【WordPressユーザー必見】条件分岐を使用して、アイキャッチ画像をヘッダー背景に設定する方法

こんにちは。
プロクラスの中本です。

ずいぶん暖かくなってきて、真冬は通り越したなという感じですね。
暖かくなるのは嬉しいですが、私は重度の花粉症なのでGWまでは花粉との戦いです。
花粉症の皆さん頑張って乗り切りましょう！

本日はWordpressユーザーには必見の内容となっております。
phpというスクリプト言語を使用して、アイキャッチ画像を固定ページなどのヘッダー背景にする方法です。

下層ページなどでは、下記サイトのようにページのタイトルに背景画像をつけることが多々あります。

これをCSSで指定することは簡単ですが、アイキャッチ画像をヘッダー背景に指定できると
その後のカスタマイズがとてもしやすくなります。

テンプレートファイルを編集したことがある方ならどなたでも出来るので、
ぜひチャレンジしてみてください！

アイキャッチ画像とは

まずはじめにアイキャッチ画像をご説明します。

アイキャッチ画像とは固定ページや投稿ページに指定できるサムネイルのことです。
プロクラスのブログ一覧を表示したときにも画像が並んでおりますが、
その画像を編集画面でお好みの画像に指定することができます。

アイキャッチ画像を出力するには

ワードプレスではphpで記事のタイトルを出力したり、記事の内容を出力することがよくあります。
例えば、記事のタイトルを出力する場合、

<?php the_title(); ?>

このように記述するとその記事のタイトルがページに表示されます。
ワードプレスではよく登場するループ処理には必須の出力方法です。

記事の本文を出力させる場合は下記のとおりです。

<?php the_content(); ?>

これを記述することによって編集画面に入力した記事の本文がページに表示されます。

ではアイキャッチ画像を出力するにはどう書けばよいのでしょうか？
アイキャッチ画像の場合、

<?php the_post_thumbnail(); ?>

この記述をアイキャッチ画像を表示させたいところに記述すると
その記事で登録したアイキャッチ画像を表示させることができます。

条件分岐の指定方法

ではつぎに条件分岐について簡単にご説明いたします。

「条件分岐」とはループ処理の際によく使用される方法です。
テンプレートファイル内で表示される内容や、特定の内容を表示する条件を設定するのに使用します。
もし上記でご紹介したコードを使用する場合はつぎのようになります。

<?php if ( have_posts() ) : ?> 　
<?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php else : ?>
<p>お探しの記事がありませんでした。</p>
<?php endif; ?>

上記の内容を日本語訳すると、

”もし投稿があったら
「アイキャッチ画像」
「記事のタイトル」
「記事の本文」
を出力する。
そうでなければ
「お探しの記事がありませんでした。」
と出力する。”

という意味になります。
英語そのままの意味なのでわかりやすいですね。

最後の <?php endif; ?> がないとページがエラーを起こしてしまうので、
そこだけ注意しましょう。

ちなみにこの記述はsingle.php（投稿ページ）によく使用されます。

アイキャッチ画像をヘッダーの背景にするには

ここまでご理解いただけたところで、本題に入っていきましょう。
今回は<header>タグにstyle属性を使用して、背景画像を指定していきます。

<?php if(has_post_thumbnail()): ?>
<header style="background-image: url(
<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)">
<?php else: ?>
<header style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/sample.jpg)">
<?php endif; ?>

上記を日本語訳すると、

”もしアイキャッチ画像があれば
ヘッダーの背景画像にアイキャッチ画像を指定して
そうでなければ
ヘッダーの背景画像に「sample.jpg」を指定する。”

となります。
この記述を本来<header>の記述があった場所に記述するだけで完了です！

そのページにアイキャッチ画像が指定されていればアイキャッチ画像を表示し、指定されていなければお好みのデフォルト画像を指定することができます。