前回、「投稿・固定等ページによって指定した画像をヘッダーに表示する」という投稿をしました。（下記ページ参照）
今回は、前回のパターンだと、Webサイト開設当初に設定した画像がそのままになってしまい、商品画像等を表示していた場合、既に販売していない等で改修をしなくても、都度お客様側で修正できるように、「アイキャッチ画像をヘッダーに表示する」というものです。
はじめに
functions.phpにコードを追加しますので、必ず本番環境ではなく、ローカル環境もしくはテスト環境で作業を行ってください。
デバックモードをONにするのも忘れずに。
define( 'WP_DEBUG', true );
アイキャッチ機能を有効化
（これもうWordpressで標準でONにしておいてくれないかな）
functions.phpに下記コードを追加します。
//アイキャッチON
add_theme_support('post-thumbnails');
完成イメージ
前回記事と同様、画像を背景に置き、タイトルを上にのせて表示します。
前回の記事と違うのは、今回「アイキャッチ画像を背景に置く」ことです。
コード（PHPとHTML）
header.phpの各ページのヘッダーになる部分に下記コードを追加します。
このコードは、if ( !is_home() || !is_front_page()) {としていますので、homeとfront_pageでは下記処理は行いません。
<?php
if ( !is_home() || !is_front_page()) {
if( has_post_thumbnail() ) {
$thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
} else {
$thumburl = get_template_directory_uri(). '/images/noimages.jpg';
}
?>
TOP以外のページを表示した時に、if( has_post_thumbnail() ) {でアイキャッチがあるかどうかを判定して、アイキャッチのURLを変数に格納しています。
ない場合はNoimages.jpgが表示される様に、変数にNoimages.jpgのURLを格納しています。
ただ、このNoimages.jpgが表示されるのは、サムネイルとして表示される分にはいいのですが、画面横幅いっぱいにNoimagesはどうなのかな？という疑問が残る処理ではあるので、どんなジャンルのページで表示しても問題ない、無難な完成イメージの様な画像を用意して表示させるのが良いかと思います。
<header class="subheader" style="background-image: url('<?php echo $thumburl; ?>')">
<h1><?php the_title(); ?></h1>
<?php
}
?>
上記コードで取得した画像URLをstyle="background-image: urlに入れます。
コード（CSS）
あとはCSSで整えて完了です。
.subheader {
position:relative;
width:100%;
height:300px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.subheader h1 {
position:absolute;
top:50%;
left:5%;
font-weight:bolder;
color: #fff;
}
アイキャッチのURLを取得してheaderにstyle="background-images: に入れているため、CSSでプロパティをまとめて指定することができません。
必ずbackground-position background-size background-repeatと個別に指定してください。
まとめ
各ページを表示した時に、アイキャッチのURLを取得してheaderにstyle="background-images: を指定してアイキャッチをヘッダーに指定すると言うやり方を紹介しました。
折角WPの機能として「アイキャッチ」があるので、これを利用してサイトの見栄えをよくし、それぞれのページの特徴を表せる良い機会なので是非実装してください。
毎度、WPで15年ほどWebサイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。