WordPressでアイキャッチ画像を背景画像として表示する方法

記事一覧に表示するアイキャッチ画像を背景画像として表示させたいケースがあります。例えば背景画像の上にタイトルやカテゴリーを載せたいときに、background-imageでアイキャッチ画像を表示すれば、背景画像の上にタイトルやカテゴリーを載せられます。

WordPressでは<?php the_post_thumbnail(”); ?>を使うと、アイキャッチ画像を表示できますが、これだとimg属性でしか画像が表示されず背景画像として表示できません。

本記事では、アイキャッチ画像をimg属性ではなく、background-imageで表示する方法を解説します。

アイキャッチ画像のURLを取得してから、CSSでURLを指定する

img属性ではなく背景画像で画像を表示するには、アイキャッチ画像のURLを取得してから、CSSのbackground-imageでそのURLを指定するといった方法が必要になります。

以下のコードがアイキャッチ画像を背景画像として表示するためのコードです。

<?php
$back_img_url = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
$no_image = get_template_directory_uri() . '/img/no-image.jpg';
?>
 <?php if ($back_img_url) : ?>
  <div class="thumb" style="background-image: url( '<?php echo $back_img_url; ?>' ); background-size: cover;">
<?php else : ?>
 <div class="thumb" style="background-image: url( '<?php echo $no_image; ?>' ); background-size: cover;"></div>
                            <?php endif; ?>

では以下にてコードの簡単な解説を行います。

$back_img_url = wp_get_attachment_url(get_post_thumbnail_id($post->ID));

このコードは、アイキャッチ画像のURLを取得できるコードです。そしてそのURLを変数の「$back_img_url」に格納しています。

 <?php if ($back_img_url) : ?>
  <div class="thumb" style="background-image: url( '<?php echo $back_img_url; ?>' ); background-size: cover;">

この記述ではアイキャッチ画像のURLを格納している変数「$back_img_url」を使った条件分岐を設定しています。そしてアイキャッチ画像のURLがある場合は、アイキャッチ画像のURLをCSSのbackground-imageで表示するという命令をしています。

CSSのbackground-imageは「style=”background-image: url()」というように、HTMLに直接CSSを記載することで、CSSを適用できます。

またbackground-size: cover;というCSSも適用させていますが、これにより背景画像の大きさに関わらず、表示領域いっぱいに画像が収まるようになります。

その後に<?php echo $back_img_url; ?>という記述で、アイキャッチ画像のURLを格納している「$back_img_url」を出力すれば、アイキャッチ画像が背景画像として表示されます。

これで下記のようにアイキャッチ画像を背景にして、その上にタイトルとカテゴリー、日付が表示できるようになりました。

アイキャッチ画像がないときの場合にno_imageを用意する

条件分岐の記述で、<?php else : ?>〜以降は、アイキャッチ画像が設定されていないなら変数no_imageに格納されている画像を表示するという処理を行っています。

no_imageにはアイキャッチ画像がないことを表す、空欄を示すような画像を用意しておきましょう。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。