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

【TT2】サイトの背景画像を設定する3つの方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

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

今回は、Twenty Twenty-Twoテーマでサイト全体に背景画像を使う方法を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;
}

サイトの背景画像をテーマカスタマイザーで設定できるようにする手順

従来のテーマ(クラシックテーマ)にあった、テーマカスタマイザー(外観→カスタマイズ)を復活せさて、背景画像を自由に設定・変更できるようにして、表現の幅を広げてみましょう。

画像を選択して入れ替えができるので、当初私もこの方法が一番いいのかな?と考えたのですが、ブロックテーマのテンプレートをカスタマイズする「テーマエディター」で背景画像が再現できないので、例えば暗い背景画像に白の文字のような形にした場合には、エディター上で何も見えなくなってしまうので、冒頭の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( 'sample_default_theme_option' ) ){
function sample_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', 'sample_default_theme_option' );

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

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

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

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

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

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

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

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

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

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

いよいよ最終段階です。

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

/* 「背景画像の設定」セクションへ背景画像関係のメニューを表示 */
function sample_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','sample_move_default_panel');

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

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

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

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

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

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


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

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

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

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

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

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

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