WordPressのアイキャッチ画像を取得して表示する勉強

WordPressテーマを作成しながら少しずつWordPressのことを勉強しているのですが、そろそろアイキャッチ画像の設定を投稿の編集画面に追加したり、記事一覧のループや投稿ページに表示するアイキャッチ画像の取得もできるようにしたいと思いました。

アイキャッチ画像の取得ができるようになると、画像はページで視覚的な手助けをしてくれる事が多いのでコンテンツ作成には役立つ知識になるかと思います。

WordPressにアイキャッチ画像のテーマ機能取得

はじめにやることは、WordPressにアイキャッチ画像を使用できるようにテーマ機能を取得、追加することです。テーマ機能を追加して有効にすることでアイキャッチ画像の取得をするテンプレートタグが投稿にアイキャッチが付いているか判断できるようにするためです。

add_theme_support( 'post-thumbnails' );

関数のadd_theme_support()を使用して、パラメータ(カッコの中)を’post-thumbnails’にします。

そしてadd_theme_support( ‘post-thumbnails’ );と書いたコードを、アイキャッチ画像のテーマ機能を取得したいWordPressテーマのfunctions.phpに記述します。

そうするとアイキャッチ画像のテーマ機能が使えていないWordPressテーマでもアイキャッチを取得したり表示したりが可能になります。

アイキャッチ画像のテーマ機能が投稿の編集画面に表示できてるWordPressテーマの場合は、すでにテーマ機能追加できているはずなので念のため確認だけはしておくと良いかと思います。

テーマ機能を取得できたか確認

functions.phpにadd_theme_support( ‘post-thumbnails’ );を記述してアイキャッチ画像のテーマ機能が取得できたか確認しておきます。

WordPressの投稿編集する画面の右に表示してる項目の中に「アイキャッチ画像」の項目が取得できています。

ブロックエディターの場合は「文書」に切り替えることでカテゴリーやタグの下にアイキャッチ画像の機能が取得できています。

クラシックエディタの場合は、投稿の編集画面を開いた表示のままでアイキャッチ画像が取得できているのが確認できます。

アイキャッチ画像のテーマ機能表示がない場合

もしアイキャッチ画像のテーマ機能を追加しても表示がない場合は投稿のオプションでアイキャッチの表示にチェックすることで表示できます。

このような流れでWordPressにアイキャッチ画像のテーマ機能を取得して追加したのですが、少し考えてみるとHTMLのようにimgタグでマークアップしてimage画像をアイキャッチとして表示するのとは違い、WordPressはデータベースから結果を返すので、結果を返せるための土台のようなものとしてアイキャッチ画像のテーマ機能が必要なわけですね。

自信ないけど、なんか勉強して理解できたような気がします。

アイキャッチ画像を取得するテンプレートタグ

アイキャッチ画像のテーマ機能を有効にした後に、アイキャッチ画像の取得ができるWordPressのテンプレートタグを使うことになります。

アイキャッチ画像の取得をするテンプレートタグは2つしか勉強していないので、以下2つのテンプレートタグを使用しました。

この2つのテンプレートタグは見ての通りどちらもpost_thumbnailに「the」か「get」が付いている違いがあるのですが、 the_post_thumbnailはアイキャッチ画像を取得し表示するところまでやってくれます。

get_the_post_thumbnailの場合はアイキャッチ画像を取得するところまでをやってくれます。

勉強していくうちに理解できてきますが、getはゲット(取得)しかしてくれない一途なヤツで、theは取得した後に表示までやってくれる気遣いのできるヤツなのです。

それなのでテンプレートタグを使用してphpコードを書くときには違いができるわけですね

the_post_thumbnailはどう使うのか

アイキャッチ画像の取得と表示ができるthe_post_thumbnailはループ内で使います。

ループ内に使用するthe_post_thumbnailが、先述したadd_theme_support( ‘post-thumbnails’ )で投稿のアイキャッチ画像を設定している画像を取得してページに表示してくれます。

<?php the_post_thumbnail( $size, $attr ); ?>

the_post_thumbnail()は、取得したアイキャッチ画像のサイズとHTMLのimgタグに含める属性や値を配列でパラメータに記述できます。

パラメータの使い方は言葉では理解しづらいので勉強でやってみたことで説明します。

the_post_thumbnailのパラメータの$sizeと$attrをまとめて記述してみました。

<?php the_post_thumbnail('medium', array(　'class' => 'tes' )); ?></a>

$sizeには’medium’を記述してアイキャッチ画像を取得したサイズがmediumサイズで表示できます。このときのサイズはWordPressのメディア設定の画像サイズで表示できます。

もしくはテーマのfunctions.php内でset_post_thumbnail_size() を使ってる場合は、設定しているサイズで表示です。

$attrにはアイキャッチ画像を取得するときのHTMLのimgタグにclass属性と値を記述しました。書き方は配列で記述します。

このような使い方をthe_post_thumbnailに使用した場合は、表示するアイキャッチ画像はmediumサイズのclass属性つきアイキャッチ画像が取得ができます。

取得するアイキャッチ画像をmediumサイズ(デフォルト300px×300px)以外にしたい場合

を使用することができ、もしimageサイズの幅と高さを指定したい場合には以下のphpコードのように配列を使用します。

the_post_thumbnail( array( 100, 100 ) );

配列で記述するアイキャッチ画像のサイズは縦と横のサイズを記述します。

the_post_thumbnailをどう使えばいいのかは、WordPressでアイキャッチ画像を表示したいコンテンツによってサイズが違うのでパラメータの内容も変わりますが、勉強した限りだと難しいレベルのテンプレートタグではないので扱いやすいと思えます。

get_the_post_thumbnailのゲット方法

アイキャッチ画像をWordPressで取得して表示する、もう一つのテンプレートタグget_the_post_thumbnailも使い方を勉強しておきました。

get_the_post_thumbnailはアイキャッチ画像が投稿に設定されていれば、アイキャッチ画像を出力するHTML画像エレメントが返ってきて、設定されていなければ空文字列が返ってきます。

返ってくるのは戻り値ですね。

それなのでget_the_post_thumbnailのゲット方法としては簡単なのですが、ゲットして表示までするにはphpでechoすることになります。

<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>

get_the_post_thumbnailのパラメータには、the_post_thumbnailと同じように$size,と$attrを使用でき、$post_idも受け付けます。

今回のアイキャッチ取得と表示の勉強に使用してるWordPressのテンプレートタグでは、パラメータの$post_idは初登場ですね。

どんなパラメータの渡し方をするかというと、取得して表示したい投稿のアイキャッチ画像の投稿idを書くだけでオッケーでした。

echo get_the_post_thumbnail(3667, 'full');

たとえば上のphpコードのように3667を書いた場合は、3667の投稿idがついた投稿ページで設定しているアイキャッチ画像を取得してechoで表示できます。

勉強して試したのはループさせて取得してみたのですが、全ての投稿ページにget_the_post_thumbnailのパラメータで渡した投稿idのアイキャッチ画像を取得して表示してくれるので、画像をリンクして、どの投稿ページからも遷移したい投稿がある場合などに活用できるのでは？と勉強して思えました。

$sizeと$attrについては先述したthe_post_thumbnailと同じパラメータの渡し方です。

取得したアイキャッチ画像を表示させる

WordPressでアイキャッチ画像を取得して表示するために、アイキャッチ画像のテーマ機能を取得して、アイキャッチ画像を取得できるテンプレートタグの勉強までしてきました。

ここからは、取得したアイキャッチ画像を取得する場所(テンプレート)を決めて表示しながら勉強したことを内容にしました。

「実際にアイキャッチ画像を表示する場合は、こんな感じの取得方法でできますよ」っぽい説明をした内容です。

記事一覧にアイキャッチ画像を表示

WordPressでトップページの記事一覧にアイキャッチ画像をthe_post_thumbnailで取得して表示させてみました。

記事一覧はループしてページに一覧を表示するので、アイキャッチ画像もループ内にphpコードを記述することで、記事一覧の投稿ごとの画像を取得して表示できるようになります。

<section class="thumbnail-tes">
　<h1 style="color: pink; margin-left: 10px;">アイキャッチ画像取得ループ</h1>

　<?php if(have_posts()):
　　while (have_posts()):the_post(); ?>
　　<h2><?php the_title(); ?></h2>
　　<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'tes' )); ?></a>
　<?php the_excerpt(); ?>

　<div class="thumbnail-clear"></div>
　<?php endwhile; endif; ?>
</section>

勉強で試しただけだったので「training.php」というテンプレートファイルを作成してトップページにget_template_part()で読み込んだファイル内に書いたのが上記のphpコードです。

記事一覧のループ内でアイキャッチ画像を取得しているのが7行目です。

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'tes' )); ?></a>

コード7行目を切り分けて説明すると、アイキャッチ画像をmediumサイズにして、imgタグのclass名も指定してパラメータを渡しています。

そして取得するアイキャッチ画像には、the_permalink()というテンプレートタグで、ループ の中で処理される投稿の パーマリンクのURLを表示し、HTMLのaタグでアイキャッチ画像をリンク付きにしています。

そうするとWordPressの記事一覧はアイキャッチ画像にリンクがついた一覧で表示でき、各ページに飛ぶことができます。

投稿ページでアイキャッチ画像を表示

次はアイキャッチ画像をWordPressの投稿ページで取得して表示した場合です。

せっかくget_the_template_part()も勉強したので、投稿ページのアイキャッチ画像の取得と表示にはget_the_template_part()を使ってみました。

<div class="img-tes">
  <?php
  if(has_post_thumbnail()){
     echo get_the_post_thumbnail( $post_id,'full');
  }
  else {
     //アイキャッチがない場合の画像
   echo '<img src="no-image.gif">';
} ?>
</div>
	
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
        <p class="postinfo">
        <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
  		  </time>｜カテゴリー：<?php the_category(' , '); ?>
        </p>       
</article>
    <!-- ループ終了 -->  
    <?php endwhile; endif; ?>

表示するイメージとしては、それぞれの投稿ページに設定しているアイキャッチ画像をヘッダーの下で表示するようにしたいという目的で書いたphpコードです。

アイキャッチ画像の取得をしている関係のコードは2行目からです。
得意のコード切り分けたのが以下です。

<div class="img-tes">
　<?php
　if(has_post_thumbnail()){
　　echo get_the_post_thumbnail($post_id,'full');
　}
　else {
　　//アイキャッチがない場合の画像
　　echo '<img src="no-image.gif">';
　　} ?>
</div>

投稿ページの場合は少し取得の仕方を変えて投稿にアイキャッチ画像がない場合の取得もできるようにしました。

条件で、もしhas_post_thumbnail()で投稿にアイキャッチ画像が登録されているかどうかをチェックした結果、ある場合はecho get_the_post_thumbnail(‘full’);で、投稿のアイキャッチ画像サイズをfullで表示できるように取得をします。

投稿にアイキャッチ画像がない場合はelseでHTMLのimgタグに画像パスを指定したno-image画像を表示するようにしました。

こうして取得した投稿のアイキャッチ画像は、以下の画像のように投稿ページで表示できます。

投稿にアイキャッチ画像がある場合

投稿にアイキャッチ画像がない場合

まとめ

投稿を終えて考えると、WordPressにアイキャッチを取得して表示する勉強をしたことを、さらに記事で説明しながら勉強し直すというような記事になった気がしています。

それでも勉強したことで覚えたことが、誰かがWordPressのアイキャッチ画像を取得したり表示するときに参考になる事が一つでも見つけられたらいいなと思います。

最後に、この記事を書いているときアイキャッチを何度も「アイキャッチょ」と書いていて自分の疲れを感じました。

では。