WordPress 投稿または固定ページ毎に背景画像を設定

WordPress で投稿または固定ページ毎に背景画像を設定する機能を作成してみました。

プラグインという形で実装はしましたが、あまり需要がなさそうだし、たいした機能でもないので公式ディレクトリへの登録はしない(俗にいう野良プラグイン)つもりです。あと、国際化などめんどうだったので・・・。

使い方

プラグインを有効にすると、投稿および固定ページの編集画面に背景画像を設定(登録および削除)するボックスが追加されます。 2016-08-18-post-background 画像の設定は、アイキャッチ画像と同じです。

動作環境

  • WordPress 3.5 以降
  • WordPress 4.7 対応

ダウンロード

XO Post Background

最後に

あまり需要はなさそうですが、編集画面に画像を設定するボックスを追加する部分等のコードは応用できる場面もありそうなので、参考になればと思います。

追記

2016年9月10日 アンインストール時に設定(カスタムフィールド)を削除するようにしました。

2017年4月20日 公式ディレクトリへ登録しました。

コメント

  • NEROLI design. より:

    使わせていただきました!
    大変たすかりました。
    これぜったい需要ありますよーー
    濃度を調整できれば…さらにありがたいのですが……
    て贅沢いってすみません…
    ありがとうございました

  • NEROLI design. より:

    追記:あと、importantにできませんでしょうか…

    • 石鷹 より:

      ご利用ありがとうございます。
      いちおう、important しているのですが・・・。
      代わりに、濃度調整で対応できないでしょうか?
      style.css 等に下記を追加してみてください。0.5 は透過度です。

      #page { background-color: rgba(255,255,255,0.5); }

      実際に利用してもらえてコメントももらえると嬉しいですね。更新の励みになります。

  • Prodece4 より:

    助かりました!!
    テーマの仕様の関係で、プラグインが上手く働かず、固定ページ個別に背景を変えられず困っておりました。
    非常によいプラグインだと思います。需要もあると思いますよ。
    有難う御座いました!!

  • 望月孝彦 より:

    使わさせて頂きました。
    これ、メチャいいじゃないですか~!!!!
    Voyageur というテンプレートで使用しています。
    アイキャッチ画像消したいけど、背景はページごとに変えたい・・・。
    これを一瞬で解決してくださいました。
    大大大感謝です。ありがとうございましたーーーーー。!!!!

    • 石鷹 より:

      コメントありがとうございます。:)
      Voyageur テーマがどういうものか気になったので見てみました。なんか凄くお洒落でいい感じ!!!

  • 石鷹 より:

    改めてこの投稿記事を読み直してみて「あまり需要がなさそう」などと使用する人にとってはちょっと失礼な言い方だったかなと反省してしまいました。
    実は、このプラグインなんですが私が公開しているプラグインの中(公式ディレクトリに登録したものも含めて)で、一番人気(直近のダウンロード数)なんです。何れも僅少数ですが・・・。
    それで、「公式ディレクトリには登録しないつもり」などと謳っていましたが、撤回してもいいかな?いいよね。

  • 56 より:

    自分もめちゃくちゃく助かりましたー!

    ありがとうございます^^

  • Mania より:

    前回のは投稿ミスです。削除をお願いします。

    カテゴリーごとに、背景画像を変更できるプラグインを探しています。
    カテゴリごとに画像を設定したら、【カテゴリーページ】&【カテゴリー内の記事ページ】で、背景画像 + 背景色が変わるようにしたいのです。

    個人的に、上側に背景画像を設定して、その画像から下に向けて、背景色をグラデーション配置させたいのですが、難しいでしょうか?

    • 石鷹 より:

      カテゴリーページの body タグのクラスには、category-{スラッグ名} および category-{ID} のようなカテゴリーを識別できるクラスが追加されるので、下記のようにスタイルで設定するのが簡単でいいかなと思います。
      .category-foo {
      background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1.0)), url(foo.jpg);
      }
      .category-bar {
      background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1.0)), url(bar.jpg);
      }
      グラデーションは linear-gradient 関数を使用するといいかなと思います。

    • 石鷹 より:

      基本的にこちらからメールを送ることはありませんが、返答が必要な内容のコメントでしたら有効なメールアドレスでお願いします。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。