ちょっと長いタイトルになってしまいました（笑）。
具体的には、自作プラグインの設定画面で保存できるようにした画像（optionsテーブルへURLとして保存）を、フロントエンド（閲覧画面）、サイトエディター（ブロックテーマ）、投稿や固定ページの編集画面に反映させるにはどうするか？というのが本ページの主題です。
そんなのテーマ（子テーマ）のstyle.cssへ書けばそもそも反映されるのでは？と言われればそれまで．．ですが、これをいつでも簡単に変えられるようにプラグインの設定画面で！とすると途端に難題になるんです。
出来上がってしまえば結構スマートにできたものの、結構苦労したので自身も忘れないよう、苦労話を交えつつ、メモ代わりに公開しておきます。
TT2のようなブロックテーマで背景画像を設定する方法については以前に公開した「【TT2】サイトの背景画像を設定する3つの方法」に掲載していますので、そちらも参照いただければと思います（ただし、リンク先ページの方法では、サイトエディターには反映されませんのであしからず）。
私と同じように苦労して本ページへたどり着いた方の一助になれれば幸いです。
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
ブロックテーマで背景画像を設定する方法
本ページで紹介する方法以外にも、前述したリンク先ページでも書いている通り、style.cssへの直接追記、クラシックテーマ時代のテーマカスタマイザーを有効にして背景画像部分を復活させる方法などさまざまな方法があります。
ただ、今回の方法で違うのは、自作プラグインで実装したいということと、CSSを触らなくても画像を入れ替えられること。
自身で管理・運営・カスタマイズし続けるサイトならマニュアルで変更でもいいかも知れませんが、他の方が編集するという場合には難がありますからね。
それでは、既に自作プラグインに設定画面があり、背景画像とする画像のアップロードができる状態（optionsテーブルに画像URLが保存される状態）であることを前提に話を進めていきます。
以下コード中のすべての画像URLは「sample-bg-image」というオプション項目に画像URLが保存されているものとしますし（文中では「オプション」と略します）ので、自身の項目に変更してお使いください
フロントエンド（表示画面）への出力
コードを示した後に解説をしていきます。
プラグインのプログラムに追加するのは以下のコードです。
/***** フロントエンドの背景画像 *****/
function sample_add_bg_image_site_frontend_init(){
//スタイルの登録
wp_register_style( 'frontend-bg-style', plugin_dir_url( __FILE__ ) .'style.css', array(),'', 'all' );
//スタイルシートの読み込み
wp_enqueue_style('frontend-bg-style', '', array(), '1.0', false);
//プラグインオプションの変数化
$bg_image = get_option('sample-bg-image',false);
//出力（追加）するスタイルコード
$custom_css = '
body{
background-image: url('.$bg_image.');
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
';
//追加したスタイルコードをインライン出力
wp_add_inline_style( 'frontend-bg-style', $custom_css );
}
add_action('wp_enqueue_scripts','sample_add_bg_image_site_frontend_init');以下仕組みや手順の補足解説です。
大きな仕組みとしては、最終的に、「オプション」を背景画像URLとして整形したスタイルコードを、ヘッダー内へ「wp_add_inline_style」を使って吐き出すというものです。
「wp_add_inline_style」は、公式にもある通り、エンキューされたスタイルシートに対してのみ有効ですので、以下のようにして適用させています。
- 同じ階層に、空のstyle.cssファイルを置く
- wp_register_styleで、1のスタイルシートを登録
- wp_enqueue_styleでスタイルシートをエンキュー
- エンキューしたスタイルシートに、整形したスタイルコードをwp_add_inline_styleで追加
- 一連の流れをwp_enqueue_scriptsでヘッダーへ出力
なんでこんなにまどろっこしいことするの？と言われそうですが、ちゃんと理由があります。
それは、style.cssはスタイルコードだけが記述でき、オプションに保存された項目をコード中で呼び出すことができないからです。
この一文で「なるほどね」と思われた方は、結構苦労した人かも．．（笑）。
補足ですけど、style.phpというPHPファイルにヘッダー情報を書き、コード途中に「オプション」呼び出しを書き、エンキューすればいいというようなことが書かれている記事をいくつも見たのですが、実際にやってみると、どうやっても「オプション呼び出し」の手前で読み込みがストップするんです。
ここであきらめた方多いのでは？
私は少し前に「wp_add_inline_style」という便利な関数があることに気づいたのでここは結構早期にクリアできました（笑）。
サイトエディター、投稿・固定ページ編集画面への出力
背景画像を設定しても、サイトエディター側で適用された状態で見た目の確認ができない（本文を白にしたい場合にきちんと設定できているかの確認もできない）、背景色と本文色が同一の状態でサイト標準の文字色などの設定がきちんとできているかの確認ができないことから、サイトエディターにもきちんと背景画像を適用させておきたいところ．．ではありましたが．．。
この項は、サイトエディターでは、ifameにスタイルを追加できないと全く反映されないため、単純に管理画面用のスタイルに追加しても適用されないことから、相当苦労して実装できた部分です。
この件について、GitHub上でWarning when enqueuing styles for a plugin in iframed Full Site Editorというタイトルで議論されていて（ここにたどり着くまでが本当に大変でした）、途中に出てくる浜野 哲明さん（@tetsuaki_hamano）の書き込みがなければ、私自身も実現できませんでしたし、本ページも公開することはありませんでした。浜野さんに感謝♡♡
前項同様にまずはコードを紹介した後、補足解説します。
サイトエディタだけに反映させる場合
/***** サイトエディタに背景画像を反映 *****/
function sample_add_bg_image_site_editor_init() {
//プラグインオプションの変数化
$bg_image = get_option('sample-bg-image',false);
//出力（追加）するスタイルコード
$custom_css = '
.is-root-container.edit-site-block-editor__block-list.wp-site-blocks.is-outline-mode.block-editor-block-list__layout {
background-image: url('.$bg_image.');
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
';
//追加したスタイルコードをサイトエディタ側へインライン出力
wp_add_inline_style( 'wp-edit-blocks', $custom_css ); //wp-edit-blocks(サイトエディタのスタイルシートID)
}
add_action( 'init', 'sample_add_bg_image_site_editor_init' );サイトエディタと投稿・固定ページ編集画面両方に反映させる場合
/***** サイトエディタと編集画面に背景画像を反映 *****/
function sample_add_bg_image_site_editor_init() {
//プラグインオプションの変数化
$bg_image = get_option('sample-bg-image',false);
//出力（追加）するスタイルコード
$custom_css = '
.is-root-container.edit-site-block-editor__block-list.wp-site-blocks.is-outline-mode.block-editor-block-list__layout {
background-image: url('.$bg_image.');
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
body.post-php .editor-styles-wrapper.block-editor-writing-flow,
body.post-new-php .editor-styles-wrapper.block-editor-writing-flow
{
background-image: url('.$bg_image.');
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
';
//追加したスタイルコードをサイトエディタ側へインライン出力
wp_add_inline_style( 'wp-edit-blocks', $custom_css ); //wp-edit-blocks(サイトエディタのスタイルシートID)
}
add_action( 'init', 'sample_add_bg_image_site_editor_init' );このコードで行っていることは、前項と同じように「wp_add_inline_style」を使って既存のスタイルシートに整形したスタイルコードを追加するというものです。
前項のコードと違うのは、サイトエディタ用のスタイルは既に「wp-edit-blocks」としてエンキューされているので、register_style、enqueue_styleの設定が不要なことです。
前後のコードで異なるのは、追加するコード後半の、投稿・固定ページの背景を指定する以下の部分があるかどうかです。
body.post-php .editor-styles-wrapper.block-editor-writing-flow,
body.post-new-php .editor-styles-wrapper.block-editor-writing-flow
{
background-image: url('.$bg_image.');
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}ちなみに私が自作したプラグイン【Hima Art Utility 】では、両方に反映させておいて、投稿・固定ページ編集画面では背景画像を出力しないという項目を追加、それを元に以下のような背景画像を打ち消すスタイルコードを適用させています。
body.post-php .editor-styles-wrapper.block-editor-writing-flow,
body.post-new-php .editor-styles-wrapper.block-editor-writing-flow
{
background-image: none;
background-position: unset;
background-size: unset;
background-repeat: unset;
background-attachment: unset;
}まあ、一度設定した背景関係のスタイルをnoneやunsetで後から打ち消すということですね。
本文の背景は色指定していて背景画像が関係ないという場合には、上記の「サイトエディタだけに反映させる場合」の方法を使うか、スイッチを設けて上記のコードを後から適用させるかのいずれかが必要でしょう。
オプションは必要ないという方は
プラグインの設定画面やオプションなど必要なく、テーマ（子テーマ）のスタイルシートに記述して簡単に実装したい方はこちらを参考にしてください。
とどのつまり、これをプラグインの設定画面経由で反映させたかっただけ．．と思うとちょっとやるせない感じもしますがあえて紹介しておきます
フロントエンドとサイトエディターへの背景画像反映
特別なケースでない限り、ブロックテーマでは、テーマ（子テーマ）のstyle.cssへ記述した内容がサイトエディターへも反映されるようになっているはずですから、以下のコードを追加して試してみてください。
/* フロントエンドの背景画像 */
body {
background-image: url(画像URL);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* サイトエディタの背景画像 */
.is-root-container.edit-site-block-editor__block-list.wp-site-blocks.is-outline-mode.block-editor-block-list__layout {
background-image: url(画像URL);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}コード中の「画像URL」は自サイトの画像URLへ変えてください
投稿・固定ページ編集画面への反映
投稿・固定ページ編集画面の背景画像は、管理画面側のスタイルシートに書く必要があります。
管理画面用のスタイル適用方法については本ページでは割愛します
以下のコードを管理画面側のスタイルシートへ追記すれば反映されます。
/* 投稿・固定ページ編集画面の背景画像 */
body.post-php .editor-styles-wrapper.block-editor-writing-flow,
body.post-new-php .editor-styles-wrapper.block-editor-writing-flow
{
background-image: url(画像URL);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}コード中の「画像URL」は自サイトの画像URLへ変えてください
