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 );