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 関数を使用するといいかなと思います。

    • 石鷹 より:

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

  • tamiya より:

    めっちゃいいです!感謝!
    できれば、スクロール時に背景固定ができればいいなと思いました。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      スクロール時の背景固定ですが、標準の背景画像(管理画面-[外観]-[背景])を設定している場合は、その設定が引き継がれます。
      標準の背景画像の設定が存在しないテーマや標準とは異なる設定にする場合は、下記のスタイル(CSS)を style.css またはカスタマイズの [追加 CSS] 等に追記すると背景画像が固定されます。
      body { background-attachment: fixed; }
      フィルタフックを使う場合は、下記のようなコードになります。テーマの functions.php 等に追記してみてください。
      function my_post_background_style( $style ) {
      $style .= 'body { background-attachment: fixed; }';
      return $style;
      }
      add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 1 );

  • アート より:

    とてもわかりやすいプラグインを開発していただきありがとうございます。
    活用させていただきます。

    センターに配置する方法と、レスポンシブ(横幅が可変)に設定する方法を教えていただけませんでしょうか。
    カスタマイズする場所がわかりません。

    ちなみにテーマは「bizvektor」を使用しています。

    よろしくお願いいたします。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      下記のスタイル(CSS)を style.css またはカスタマイズの [追加 CSS] 等に追記してみてください。
      センターに配置する場合:
      body { background-position: center center; }
      ページいっぱいになるように背景画像を拡大縮小する場合:
      body { background-size:contain; }
      ページを完全に覆う最小サイズになるように背景画像を拡大縮小する場合:
      body { background-size:cover; }
      あと、テーマは「BizVektor Global Edition」テーマでしょうか?
      参考までに、このテーマにおいてヘッダーから背景画像を除く方法を紹介しておきます。
      body タグではなく #main のタグに背景画像を設定する場合:
      functions.php 等に、
      function my_post_background_style( $style, $image_src ) {
      $style = "#main { background-image: url('$image_src') !important; }";
      //$style .= "#main { background-size: cover; }";
      return $style;
      }
      add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );

      • アート より:

        とてもわかりやすい方法をご教授いただき、ありがとうございます。
        おかげさまで、解決いたしました。

        あらためて、すばらしいプラグインをつくってくださり、ありがとうございます。
        ブログもとても読みやすいです。これからも参考にさせていただきます!

  • ゆきな より:

    はじめまして!とても便利なプラグインで使わせていただいています。
    こんな風に背景画像を左右に固定して、レスポンシブに対応するようにしたいのですが、いろいろやってみてもうまく行きません。
    https://www.kitayukina.com/

    追加のCSS教えていただけないでしょうか?

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      下記の CSS はどうでしょうか?
      body {
      background-position: left bottom;
      background-size: contain;
      background-repeat: no-repeat;
      background-attachment: fixed;
      }

      • ゆきな より:

        ありがとうございます!
        だいぶいい感じになって来たんですが、
        顔だけ隠れてしまっているんです。。。
        http://kitawanko.xsrv.jp/schedule/

        • 石鷹 より:

          背景画像を固定(fixed)にする場合は、隠れている分を考慮した画像にするか、画像の位置を下げるしかないですね。
          画像を調整するのがいいのではないでしょうか。
          ちなみに画像の位置を下げるには、
          background-position: left bottom -200px;
          のように、background-position で縦位置を指定するとできます。

          • ゆきな より:

            なるほど!ありがとうございます!
            どうしてもできなかったので本当に助かりました!

  • SASA より:

    投稿ページに背景設定したく探したらとてもシンプルで設定も簡単に設置できました。ありがとうございます!

    上記のコメントからいろいろ抜粋して試してみましたが、投稿ページでも固定してリピート無しにしたいのですが可能でしょうか。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      下記の CSS はどうでしょうか?

      body {
      background-repeat: no-repeat;
      background-attachment: fixed;
      }

      もし、適用されない場合は、!important を指定してみてください。

      body {
      background-repeat: no-repeat !important;
      background-attachment: fixed !important;
      }

  • saeki makoto より:

    残念ながら新規投稿編集画面でメニュー表示が出ませんでした。
    テーマはTwentytwelveです。相性の問題ですかね。
    個別ページにそれぞれ違う背景色を指定したいのですが、このプラグインは色では無く、画像の設置のみなのでしょうか?

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      どこのメニューのことでしょうか?ちなみに、このプラグインにはメニューはありません。背景画像メタボックスが追加されるだけです。
      色を設定する機能もありません。色の設定は、次バージョンで検討したいと思います。

      • saeki makoto より:

        他のサイトでメニューが表示されると書いてあったので。
        背景の色は設定出来ないのですね。
        わざわざ、ご回答ありがとうございました。

  • ばけ より:

    オリジナルのテーマを使用しているのですが、
    このプラグインをインストールし、有効化しても、
    メタボックスが表示されませんでした。
    とてもよさそうなプラグインでしたので、使ってみたかった。
    wordpress3.5.1です。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      すみません、WordPress 4.4 未満の場合、そのままでは表示されなくなっていました。プラグインの不具合です。
      下記コードをテーマの functions.php に追記することで、不具合を回避することができます。
      add_filter( 'xo_post_background_meta_box_screens', '__return_null' );
      次バージョンで対応したいと思います。お手数おかけしてすみません。m(__)m

コメントを残す

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

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