WordPress Twenty Seventeen テーマの背景画像を設定

Twenty Seventeen テーマは背景画像を設定することができません。

ググっても背景色を設定する方法はいくつかのサイトで紹介されてはいたが、背景画像を設定する方法は見つけることができませんでした。背景色を設定する需要はあるようなので、背景画像を設定する需要もあるかなと思い、ここにその方法を載せておきます。

テーマでカスタム背景をサポート

テーマでカスタム背景をサポートするには、add_theme_support 関数を使います。functions.php ファイル内に下記のように記述します。

add_theme_support( 'custom-background' );

多く(?)のテーマにおいては、このままで背景画像を設定すれば背景画像が表示されるようになります。表示されないテーマでもスタイルをちょっと追加することで表示されるようになります。

しかし、Twenty Seventeen テーマの場合はスタイルだけでは対応することが難しいので、下記のように wp-head-callback コールバックで Twenty Seventeen テーマに合ったスタイルを出力するように変更します。

function my_after_setup_theme() {
	add_theme_support( 'custom-background', array( 'wp-head-callback' => 'my_custom_background_style' ) );
}
add_action( 'after_setup_theme', 'my_after_setup_theme' );

function my_custom_background_style() {
	$mods = get_theme_mods();
	if ( $mods !== false ) {
		$styles = array();
		if ( isset( $mods['background_image'] ) ) {
			$styles[] = "background-image: url('{$mods['background_image']}');";
		}
		if ( isset( $mods['background_position_x'] ) ) {
			$styles[] = "background-position: top {$mods['background_position_x']};";
		}
		if ( isset( $mods['background_attachment'] ) ) {
			$styles[] = "background-attachment: {$mods['background_attachment']};";
		}
		if ( isset( $mods['background_repeat'] ) ) {
			$styles[] = "background-repeat: {$mods['background_repeat']};";
		}
		if ( count( $styles ) > 0 ) {
			$style = implode(' ', $styles );
			echo "<style type=\"text/css\">.site-content-contain { $style }</style>";
		}
	}
}

スタイル

style.css 等に下記を記述します。

/* トップ ナビゲーションの背景を半透明にする */
.site-header { background-color: transparent; }
.navigation-top { background-color: rgba(255,255,255,0.8); }
/* サイト コンテンツを半透明にする */
.site-content { background-color: rgba(255,255,255,0.5); }

XO Post Background プラグイン

XO Post Background プラグインは、投稿または固定ページ毎に背景画像を設定するプラグインです。

投稿または固定ページ毎に背景画像を設定するプラグインです。

このプラグインを、Twenty Seventeen テーマで使用する場合は、前述のスタイルに加え下記のようにフィルターフックを記述することで背景画像を表示することができるようになります。

function my_post_background_style( $style, $image_src ) {
	$style = ".site-content-contain { background-image: url('$image_src') !important; }";
	return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 2 );

コメント

  • 初めてコメントさせていただきます、
    WP初中級者です、
    背景画像の設定のやり方をさがしていたのですが
    こちらのサイトのやり方がそのものずばりだったので
    早速試させていただきましたが
    うまくできず、アドバイスいただければ幸いです、
    わたしは子テーマを設定しているのですが、

    子テーマのfunctions.phpに
    add_theme_support( ‘custom-background’ );
    と書き、

    そのあと同じファイル内に
    function my_after_setup_theme() {
    add_theme_support( ‘custom-backg・・・・・・・・

    と書くのでしょうか。
    よろしくお願いいたします。

    • こんにちは、初めまして!
      add_theme_support( ‘custom-background’ );
      この行は不要です。一般的なテーマはこれだけてOKなのですが、Twenty Seventeen テーマではこれだけでは背景が表示されません。
      function my_after_setup_theme() {
      で、始まるコードをすべて functions.php に記述してください。
      スタイルはお好みで調整してください。
      不明な点がありましたら、気軽にコメントしてくださいね。
      ではでは

      • 石鷹さん
        できました、
        子テーマのfunctionに別のコードを書いていて干渉していたようで、親テーマのほうを書き換えてできました。
        有益な情報をありがとうございました。

        ご自分で自在にカスタマイズできるスキルをお持ちでうらやましい限りです。今後ともご活躍ください。

石鷹 へ返信する コメントをキャンセル

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

日本語でコメントを入力してください。(スパム対策)