【WordPress】アイキャッチ画像を固定背景画像として表示する方法【CSS】


固定ページの時だけ、アイキャッチ画像を背景画像に設定しようと思った。
背景画像はbodyに設定するとして、固定表示をする。

style.css

基本セットをこちらで設定。
固定ページじゃないとか、アイキャッチ画像が設定されていないときはデフォルトとして『images/top-header.jpg』を表示するように設定している。

body{
	background:#111 url(images/top-header.jpg ) center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

header.php

<head>略</head>

<?php
	// 固定ページで、かつアイキャッチ画像が設定されているときは、それをbodyの背景画像に設定する。
	$thumbnail = "";
	if(is_page()){  // 固定ページの場合
		$thumbnail = "style=''";
		if ( has_post_thumbnail() ) {  // アイキャッチ画像が設定されている場合
			$image_id = get_post_thumbnail_id ();
			$image_url = wp_get_attachment_image_src ($image_id, true);
			$thumbnail = $image_url[0];  // [0]にurlが格納されている。
			$thumbnail = "style='background-image:url(".$thumbnail.");'";  // style設定文を作成
		}
	}
?>

<body <?php echo $thumbnail; ?>>略</body>