ブロックテーマでサイトの背景画像を設定する5つの方法

公開日:2022(令和4)年9月25日/最終更新日:

,
WordPressブロックテーマのカスタマイズ方法画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



ブロックテーマでは、下図のように、テーマエディターから画面右上の半月マーク?をクリックすることで、サイトの背景色や文字色が設定できるようになっています。

ブロックテーマでサイトの背景画像を設定する5つの方法|Personal WP Customization Notes (PWCN)

しかしながら、従来のテーマにあるような背景画像の設定がありません。

今回は、Twenty Twenty-Twoをはじめとするブロックテーマでサイト全体に背景画像を使う方法を、比較的簡単なものから5通り紹介します。

スキルや使い勝手に合った方法で実装してみてください。

1.サイトエディターから設定する

当初このページを作成した段階では、前述したようにサイトエディター(ブロックテーマで外観→エディターを選んだ画面)からは背景画像の設定ができませんでしたが、WordPressのどこかのバージョン(確か5.5あたり)から背景画像の設定ができるようになりました。

恐らくブロックテーマで背景画像を設定するにはこの方法が一番簡単なので、初めに紹介します。

以下が主な手順です。

サイトの「外観」→「エディター」を開きます。

次に表示されたメニューから「スタイル」をクリックします。

画面が微妙に切り替わりますので、「スタイル」と書かれている文字列の右にある編集マーク(鉛筆が斜めになったようなアイコン)をクリックします。

すると、右側にサイドバーが表示されますので、「レイアウト」をクリックします。

表示が切り替わったパネルの一番下に「背景画像を追加」というボタンがありますので、クリックして画像を指定します。

QA Analytics QA Analytics

2.すべてのテンプレートでカバーブロックを使う

方法としては単純で、サイトの各テンプレートにカバーブロックを入れ、カバーブロックに画像を設定した上で、テンプレート内にある各パーツを背景画像に設定したカバーブロックに入れていくだけです。

これが一番単純明快な方法ではあるものの、複数のテンプレートに加工が必要なので少々面倒なのと、テンプレート操作に慣れていないとレイアウトを壊してしまう可能性があるので、一からテンプレートを作る場合以外にはあまりおすすめな方法ではありません。

3.CSSで背景画像を設定する

後述するテーマカスタマイザーを用いた背景画像の設定で吐き出されるスタイルコードを参考にして、子テーマにスタイルの記述を追加して設定する方法です。

本サイトでは現在、この方法で背景画像を設定しています

この方法では、子テーマのstyle.cssおよび管理画面側のCSSへの追記が必要です。お使いの子テーマにadmin-style.cssといった管理画面側のCSSがない場合には、追加するか、こちらで配布している子テーマの使用を検討ください。

背景画像を用意したら、メディアへアップロードしておきます。

以下のコードを子テーマのstyle.cssへ追加します。

body {
    background-image: url(背景画像のURL);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

「背景画像のURL」となっているところを先ほどアップロードした背景画像のURLへ置き換えます。

画像のURLはメディア一覧から画像名をマウスオーバーした時に出現する「URLをクリップボードにコピー」をクリックすることで取得できます

これで、すべてのテンプレートに背景画像が自動で入るようになり、テーマエディター上でも反映されるようになります。

が、この設定は、投稿及び固定ページ編集画面にも反映されてしまいますので、このサイトのように、本文は白背景という場合には都合が悪いです。

そこで、「admin-style.css」(こちらで配布している子テーマの場合)へ以下のスタイルコードを追加して、投稿編集画面で背景画像が出力されないようにします。

body.post-php .editor-styles-wrapper ,
body.post-new-php .editor-styles-wrapper
{
    background-image: none;
    background-position: unset;
    background-size: unset;
    background-repeat: unset;
    background-attachment: unset;
}

4.theme.jsonで指定する

これはWordPress6.6から利用可能になった機能で、theme.jsonというテーマの基礎情報を設定するファイルを操作して背景画像の設定ができます。

ただし、theme.jsonはPHPなどと比べてコードを厳格に記述しないと動作しなくなってしまうので、theme.jsonって何?どうやって編集するの?という方はこの方法は避けた方がいいと思います。

簡単にいうと、公式の解説ページにもあるように「styles」という属性の中に背景画像のコードを指定します。

コード例としてはこんな感じです(公式ページのまんまコピーです)

{
    "styles": {
        "background": {
            "backgroundImage": {
                "url": "<a href="http://path.to/some/image.png">http://path.to/some/image.png</a>"
            },
            "backgroundSize": "cover"
        }
    }
}

これによって出力される結果は、前項のCSSで指定する方法と同じようなことになりますし、URLで画像を指定する必要があるので、他のサイトへテーマを複製(流用)した際にはtheme.jsonで画像を指定しなおす必要が出てきますので、どうしてもtheme.jsonで行いたい場合を除いて、サイトエディターやCSSでの指定を行った方がトラブルが少ないと思います。

5.テーマカスタマイザーを復活させて設定できるようにする

ブロックテーマを有効化すると、従来のテーマ(クラシックテーマ)にあった、テーマカスタマイザー(外観→カスタマイズ)というメニューがなくなり、エディターというメニューしか表示されなくなります。

クラシックテーマに慣れた方だと「あれ?カスタマイズというメニューから背景画像設定できたのに」と思うかも知れません。実はブロックテーマではこのカスタマイズメニューが隠されるようになっているので、復活せさて、背景画像を自由に設定・変更できるようにします。

この方法は、ブロックテーマが出た当初に荒業として行う方法として数多く紹介された手法で、わざわざ背景画像のためだけにこの措置を行うのは工数が多いので、できれば他の方法で設定することをおすすめします

画像を選択して入れ替えができるので、当初私もこの方法が一番いいのかな?と考えたのですが、ブロックテーマのテンプレートをカスタマイズする「テーマエディター」で背景画像が再現できないので、例えば暗い背景画像に白の文字のような形にした場合には、エディター上で何も見えなくなってしまうので、冒頭のCSSで行う方法へ変更しました。

このカスタマイズを行うには、テーマのfunctions.phpへの追記が必要です。スキルに自信のない方やトラブル時に対処が困難な方はやめておいた方がいいでしょう

この方法で背景色の設定をできるようにするためには、以下の処置を行っていく必要があります。

  1. クラシックテーマ時代の「テーマカスタマイザー」を復活させる
  2. テーマのサポートを追加して背景画像が設定できるようにする
  3. 独自の設定項目(セクション)を作る
  4. 標準のカスタマイザーメニューにある背景色設定関係の項目を作成したセクションへ表示させる

この順に処理させるようにしていかないとトラブルになる可能性が高いですから、ここから先に紹介する順で作業を進めてください

「テーマカスタマイザー」を復活させる

Twenty Twenty-Twoテーマは、フルサイト編集でサイトを作成するという意義から、機能重複する可能性のあるテーマカスタマイザーは存在しないことになっています。

ただ、WordPressの標準機能にあるものを無効にしているだけですので、以下のコードをテーマのfunctions.phpへ追加して、テーマカスタマイザーを復活させます。

/***** テーマカスタマイザーを復活させる *****/
add_action( 'customize_register', '__return_true' );

コード追加したら、「外観」メニューに「カスタマイズ」という項目を開いて、テーマカスタマイザーが起動するか確認しましょう。

テーマのサポートを追加して背景画像が設定できるようにする

WordPressのテーマを自作したことがある人ならご存じかと思いますが、テーマでWordPressの基本機能を有効にする(サポートする)には、functions.phpへ有効にさせるためのコードを追加する必要があります。

以下のコードをfunctions.phpへ追加して、今回のテーマである背景画像のサポートを有効にしましょう。

/***** WordPress標準のテーマ機能を追加 *****/
if ( !function_exists( 'pwcn_default_theme_option' ) ){
function pwcn_default_theme_option() {
	//カスタム背景を復活させる
	add_theme_support( 'custom-background', array(
		'default-image' => '',
		'default-preset' => 'default',
		'default-position-x' => 'center',
		'default-position-y' => 'center',
		'default-size' => 'auto',
		'default-repeat' => 'repeat',
		'default-attachment' => 'scroll',
		'default-color' => 'ffffff',
		'wp-head-callback' => '_custom_background_cb',
		'admin-head-callback' => '',
		'admin-preview-callback' => '',
	));//カスタム背景
}
}
add_action( 'after_setup_theme', 'pwcn_default_theme_option' );

オプション部分(規定値)について問題があるようでしたら適宜変更してください

独自の設定項目(セクション)を作る

ここまで行っても、テーマカスタマイザーを開くと、「サイト基本情報」「ホームページ設定」「追加CSS」のメニューしか表示されませんし、背景画像の設定項目はどこにも見つかりません。

そこで次に、背景画像の設定項目を表示させるための以下のコードをfunctions.phpへ追加します。

/***** セクションの設定 *****/
function pwcn_customizer_section_init($wp_customize){
//「全般」パネルのセクション
$wp_customize->add_section(
	'customizer_general_section',
	array(
		'title'=>__('サイト背景の設定',''),
		'panel'=>'',
		'description'=>__('',''),
		'priority'=>10,
	)
);
}
add_action( 'customize_register', 'pwcn_customizer_section_init' );

ここまで行って、テーマカスタマイザーを開きなおしても、まだ背景画像設定項目はありません。

また、上記コードで追加される「サイト背景の設定」というパネルも、パネル内の設定項目がありませんので表示されません(これはWordPressの標準仕様です)。

気にせず次の項へ進んでください。

余談ですが、今回はメニューを細分化する必要がないので、パネル設定は設けず、セクション設定のみを追加しています

標準のカスタマイザーメニューにある背景色設定関係の項目を作成したセクションへ表示させる

いよいよ最終段階です。

以下のコードを追加することで、カスタマイザーに「背景画像の設定」という項目が表示され、クリックすると、背景画像と色の設定画面が表示されるようになります。

/* 「背景画像の設定」セクションへ背景画像関係のメニューを表示 */
function pwcn_move_default_panel($wp_customize){
//背景色
	$wp_customize -> get_control('background_color') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_color') -> priority = 50;//優先度
//背景画像
	$wp_customize -> get_control('background_image') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_image') -> priority = 60;//優先度
//背景画像のプリセット
	$wp_customize -> get_control('background_preset') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_preset') -> priority = 70;//優先度
//背景画像の位置
	$wp_customize -> get_control('background_position') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_position') -> priority = 80;//優先度
//背景画像のサイズ
	$wp_customize -> get_control('background_size') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_size') -> priority = 90;//優先度
//背景画像の繰り返し
	$wp_customize -> get_control('background_repeat') -> section = 'customizer_general_section';//移動
	$wp_customize -> get_control('background_repeat') -> priority = 100;//優先度
//背景画像の添付ファイル
	$wp_customize -> get_control('background_attachment') -> section = 'hima_art_customizer_panel_general';//移動
	$wp_customize -> get_control('background_attachment') -> priority = 110;//優先度
}
add_action('customize_register','pwcn_move_default_panel');

なんだかたくさんのメニューを表示させているような感じがするコードですが、背景画像や背景色の設定は、何かを選ぶと何かの項目が現れるという仕組みになっているので、実際はこれだけが背景関係の設定すべてになります(全部で7個の設定項目を追加していることになります)。

このコードについての補足

これは余談ですので、読み飛ばしていただいてもかまいません。

テーマカスタマイザーに独自の設定項目を追加した経験のある方は、上記のコードを見て、「あれ?add_setting..とかで項目って追加するんじゃないの?」と思われたかも知れません。

そう、通常は「add_setting」「add_control」を使って項目を追加するのですが、今回の場合は、WordPressのテーマサポートで表示されるはずの設定項目が表示されないため、別のセクションを作って、標準の設定項目をそこへ移動させるということをしています。

これまた余談ですが、クラシックテーマでカスタマイザーに独自項目を作る際、標準の項目を移動させるときにこのコードは利用できますから、覚えておくといいかも知れません。


これですべての設定が完了しました。

テーマカスタマイザーを開く(すでに開いている場合には画面をリロード)して、以下を確認して終了です。

  • 項目の追加ができているか?
  • 背景画像を設定したら右側のプレビューが変化するか?
  • 画像や色を設定して「公開」をクリック後、実際にサイトを表示させて背景が設定されているか?

背景設定をすると、本文の部分までもが背景画像バックになってしまうのですが、これは、本文部分などに背景色が設定されていないだけですから、テーマエディターで、必要な部分の背景色を設定すれば解決します。

以上、Twenty Twenty-Twoテーマ(TT2テーマ)で背景画像を設定する方法でした。

現在では、TT2テーマの仕様?なのか、冒頭で紹介した、テーマエディターからの背景色などの設定は色のみになっていますが、今後更新されて背景画像が追加されていくかも知れません..。

多分そうなっても今回の措置が無駄になることはありませんし、テーマエディタ側に搭載されれば、このような措置をする必要もないので楽になるのに..と個人的には思います。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法