WordPress で投稿または固定ページ毎に背景画像を設定する機能を作成してみました。
プラグインという形で実装はしましたが、あまり需要がなさそうだし、たいした機能でもないので公式ディレクトリへの登録はしない（俗にいう野良プラグイン）つもりです。あと、国際化などめんどうだったので・・・。
使い方
プラグインを有効にすると、投稿および固定ページの編集画面に背景画像を設定（登録および削除）するボックスが追加されます。 
画像の設定は、アイキャッチ画像と同じです。
動作環境
- WordPress 3.5 以降
- WordPress 4.7 対応
ダウンロード
最後に
あまり需要はなさそうですが、編集画面に画像を設定するボックスを追加する部分等のコードは応用できる場面もありそうなので、参考になればと思います。
追記
2016年9月10日 アンインストール時に設定（カスタムフィールド）を削除するようにしました。
2017年4月20日 公式ディレクトリへ登録しました。
使わせていただきました！
大変たすかりました。
これぜったい需要ありますよーー
濃度を調整できれば…さらにありがたいのですが……
て贅沢いってすみません…
ありがとうございました
追記：あと、importantにできませんでしょうか…
ご利用ありがとうございます。
いちおう、important しているのですが・・・。
代わりに、濃度調整で対応できないでしょうか？
style.css 等に下記を追加してみてください。0.5 は透過度です。
#page { background-color: rgba(255,255,255,0.5); }
実際に利用してもらえてコメントももらえると嬉しいですね。更新の励みになります。
助かりました！！
テーマの仕様の関係で、プラグインが上手く働かず、固定ページ個別に背景を変えられず困っておりました。
非常によいプラグインだと思います。需要もあると思いますよ。
有難う御座いました！！
コメントありがとうございます。
お役に立てて良かったです。
使わさせて頂きました。
これ、メチャいいじゃないですか～！！！！
Voyageur というテンプレートで使用しています。
アイキャッチ画像消したいけど、背景はページごとに変えたい・・・。
これを一瞬で解決してくださいました。
大大大感謝です。ありがとうございましたーーーーー。！！！！
コメントありがとうございます。:)
Voyageur テーマがどういうものか気になったので見てみました。なんか凄くお洒落でいい感じ！！！
改めてこの投稿記事を読み直してみて「あまり需要がなさそう」などと使用する人にとってはちょっと失礼な言い方だったかなと反省してしまいました。
実は、このプラグインなんですが私が公開しているプラグインの中（公式ディレクトリに登録したものも含めて）で、一番人気（直近のダウンロード数）なんです。何れも僅少数ですが・・・。
それで、「公式ディレクトリには登録しないつもり」などと謳っていましたが、撤回してもいいかな？いいよね。
自分もめちゃくちゃく助かりましたー！
ありがとうございます^^
コメントありがとう！励みになります(^^♪
前回のは投稿ミスです。削除をお願いします。
カテゴリーごとに、背景画像を変更できるプラグインを探しています。
カテゴリごとに画像を設定したら、【カテゴリーページ】&【カテゴリー内の記事ページ】で、背景画像 + 背景色が変わるようにしたいのです。
個人的に、上側に背景画像を設定して、その画像から下に向けて、背景色をグラデーション配置させたいのですが、難しいでしょうか？
カテゴリーページの 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 関数を使用するといいかなと思います。
基本的にこちらからメールを送ることはありませんが、返答が必要な内容のコメントでしたら有効なメールアドレスでお願いします。
めっちゃいいです！感謝！
できれば、スクロール時に背景固定ができればいいなと思いました。
こんにちは、コメントありがとうございます。
スクロール時の背景固定ですが、標準の背景画像（管理画面-[外観]-[背景]）を設定している場合は、その設定が引き継がれます。
標準の背景画像の設定が存在しないテーマや標準とは異なる設定にする場合は、下記のスタイル（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 で縦位置を指定するとできます。
なるほど！ありがとうございます！
どうしてもできなかったので本当に助かりました！
投稿ページに背景設定したく探したらとてもシンプルで設定も簡単に設置できました。ありがとうございます！
上記のコメントからいろいろ抜粋して試してみましたが、投稿ページでも固定してリピート無しにしたいのですが可能でしょうか。
こんにちは、コメントありがとうございます。
下記の CSS はどうでしょうか？
body {background-repeat: no-repeat;
background-attachment: fixed;
}
もし、適用されない場合は、!important を指定してみてください。
body {background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
残念ながら新規投稿編集画面でメニュー表示が出ませんでした。
テーマはTwentytwelveです。相性の問題ですかね。
個別ページにそれぞれ違う背景色を指定したいのですが、このプラグインは色では無く、画像の設置のみなのでしょうか？
こんにちは、コメントありがとうございます。
どこのメニューのことでしょうか？ちなみに、このプラグインにはメニューはありません。背景画像メタボックスが追加されるだけです。
色を設定する機能もありません。色の設定は、次バージョンで検討したいと思います。
他のサイトでメニューが表示されると書いてあったので。
背景の色は設定出来ないのですね。
わざわざ、ご回答ありがとうございました。
オリジナルのテーマを使用しているのですが、
このプラグインをインストールし、有効化しても、
メタボックスが表示されませんでした。
とてもよさそうなプラグインでしたので、使ってみたかった。
wordpress3.5.1です。
こんにちは、コメントありがとうございます。
すみません、WordPress 4.4 未満の場合、そのままでは表示されなくなっていました。プラグインの不具合です。
下記コードをテーマの functions.php に追記することで、不具合を回避することができます。
add_filter( 'xo_post_background_meta_box_screens', '__return_null' );次バージョンで対応したいと思います。お手数おかけしてすみません。m(__)m
無事表示されるようになりました。ありがとうございます。
シンプルで使いやすく求めていたプラグインだったのですが、
固定ページ全体の背景が設定されるかと思っていたのですが、なぜかフッターの下だけにチラッと見えるだけの状態になっています！
こちらの設定の問題でしょうか？
こんにちは、コメントありがとうございます。
デフォルトでは body タグを背景として設定します。body タグが背景ではないテーマの場合は xo_post_background_style フィルターフックで変更する必要があります。
テーマは何をお使いですか？
早速の返信ありがとうございます。
専門的な事はよくわかりませんが、テーマは「Lightning Proバージョン: 4.0.5」を使っています！
よろしくお願いします。
Pro 版ではない Lightning（9.4.1）で検証してみたところ、問題なく（カスタマイズの背景と同じように）表示されました。
Pro 版との違いかもしれませんが、Pro 版が手元にないため検証することができません。動作を確認できるページがあれば URL をお知らせください。
直ぐにお見せできるURLがないのですが、こちらで素人ながら原因をさぐってみました。
「XO Post Background」はLightning Proでも動作しましたが、プラグインのJPNSTYLEとの相性の様です。
再現手順：
・wordpressインストール直後の状態からXO Post Backgroundをインストール。
・サンプルページで適当な背景を設定。
・テーマのカスタマイズでホームページ設定を固定ページとしてサンプルページを指定。
・この段階で背景を設定したサンプルページがトップに表示される。
・JPNSTYLEをインストール。
・lightningデザイン設定からJPNSTYLEを選択。
・この段階ではまだ背景は表示されている。
・lightningレイアウト設定からトップページに指定なし以外(カラム)を設定する。
・ココで背景が消える。
・トップページを指定なしに戻しても背景は表示されない。
・サンプルページ(固定ページ)のプレビューでも背景は消えている。
・lightningデザイン設定からOriginⅡに戻す。
・背景が表示される。
ただJPNSTYLEを選択している状態で背景が表示されていなくてもテーマのカスタマイズで設定を変更するごと、例えばサイト基本情報などで文字を入れるとリアルタイムに反映されると思いますがそのリロードする一瞬だけ背景が見えます。
JPNSTYLE のデモページを元に推察してみました。下記コードをテーマの functions.php に追記してみてください。
function my_post_background_style( $style, $image_src ) {$style = ".siteContent, .siteContent_after { background-image: url('$image_src') !important; }";
return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );
はじめまして。
背景画像を透過させるために検索して、こちらのプラグインにたどり着きました。
すみませんが、応用できないかと思い、質問させていただきたいのですが、どうぞよろしくお願いいたします。
WP5.4.2でテーマはcocoonです。
Page Builder By SiteOriginで、2コラムなどにして、左側と右側のコラムに別々の画像を背景に設定し、さらに文字が見やすいように背景画像の透過度を上げたいのですが、可能でしょうか？
他にできる方法があればよいのですが、どうぞよろしくお願いいたします。
こんにちは、コメントありがとうございます。
このプラグインは投稿毎に1つの画像しか設定することができません。2コラムで背景画像を設定することはできません。
Page Builder By SiteOrigin に関しては使用したことがないので分かりません m(__)m
初めまして。プラグインの開発ありがとうございます。
デフォルトでは背景画像がに適用されるとのことですが、タグではなく、より下層のタグ、例えばタグに適用させる方法はありますでしょうか。
非常にありがたいプラグインで是非利用させていただきたいので、どうぞよろしくお願いいたします。
こんにちは、プラグインのご利用ありがとうございます。
デフォルトでは body タグに適用されます。これを変更する場合は、テーマの functions.php にコードを追加する必要があります。
コードは、こちらのページの「背景画像を指定するセレクトを変更」セクションをご覧ください。
例:
function my_post_background_style( $style, $image_src ) {$style = "#content { background-image: url('$image_src') !important; }";
return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );
迅速な対応かつ非常に丁寧に、例まで一緒に教えていただきありがとうございます。
投稿ページ全体ではなく記事本体のカードだけに背景指定をしたかったのですが、意図したとおりにうまく背景を表示できました。
これから長く利用させていただくと思いますので、よろしくお願いいたします。
はじめまして。
voyageurを使用しておりカスタム投稿の背景がアイキャッチ画像になっておりまして、、、
何をしても変えられず必死に探してここにたどり着いたのですが、背景画像を設定しても反映されません。
カスタム投稿へ対応させるにはどうしたらいいでしょうか、、、
カスタム投稿にはCPT UIというプラグインを使用しています。
よろしくお願いいたします。
こんにちは、コメントありがとうございます。
下記コードをテーマの functions.php に追加するとできるかもしれません。お試しください。
function my_post_background_style( $style, $image_src ) {$style = "#header-banner-inner { background-image: url('$image_src') !important; }";
return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );
迅速な対応ありがとうございます！
上記コードをfunction.phpにて追加してみましたが、反映されませんでした、、、
アイキャッチ画像をなしにしてみると反映されましたのでアイキャッチ画像の設定が後で読み込まれているのでしょうか、、、
local by flywheelのローカル環境のためサイトurlが共有できず申し訳ありません。
Voyageur テーマのデモサイトを見た感じでは先に上げたコードでできると思うのですが、テーマのバージョンは最新（デモサイトと同じ？）でしょうか？
あと、こちらはどうでしょうか？
function my_post_background_style( $style, $image_src ) {$style = "#header-banner-outer #header-banner-inner { background-image: url('$image_src') !important; }";
return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );
デモサイトvoyageur custom skinカスタマイズ例5のテーマ、スキンともにバージョンを確認しましたが、最新バージョンに更新されておりました。
本来投稿や固定ページにはアイキャッチ画像を背景に設定するか否かの選択があるのですが、CPT UIで作ったカスタム投稿にはその投稿オプションが反映されないためCPT UIプラグインの関係かもしれませんね、、、
上記コードも試してみましたが、反映されませんでした、、、
デペロッパーツールでも確認いたしましたが、background-imageも書き換わっておりませんでした。
お手数をお掛けして申し訳ありません、、、
既存の background-image を書き換えるものではありません。下記のような style を head タグ内に追加します。
<style type="text/css">#header-banner-inner { background-image: url('http://画像.jpg') !important; }</style>
やはり、実際のページを見ないと分からないですね。すみません。
m(__)m
追加する仕様なのですね！
とてもいいプラグインだと思うのでいろいろ試してみます！
ありがとうございました！