WordPress アイキャッチ画像の表示方法

WordPress アイキャッチ画像の表示方法と、頻繁に使うカスタマイズ方法を合わせて紹介します。
例えば、キービジュアルやOGP画像、投稿一覧のサムネイル画像など、投稿を象徴する画像を設定したい時に便利な方法です。

1. アイキャッチ画像とは？
2. アイキャッチ画像を有効化する方法
   1. カスタム投稿タイプでアイキャッチ画像を有効化する方法
3. アイキャッチ画像の表示方法
   1. 表示するアイキャッチ画像サイズを変更する方法
   2. アイキャッチ画像に独自のクラスを付与する方法
4. 条件分岐でアイキャッチ画像を表示する方法
5. ページナビでアイキャッチ画像を表示する方法
6. アイキャッチ画像のURLを取得する方法
7. 画像のaltにページタイトルを指定する方法
8. アイキャッチ画像の横幅や高さを別々に取得する方法
9. 管理画面で表示されるアイキャッチ画像のラベルを変更
10. アイキャッチ画像をOGP画像に指定する方法

アイキャッチ画像とは？

WordPress のアイキャッチ画像は、投稿に画像を添付することができる機能です。
バージョン3.0以前では「投稿サムネイル機能」と呼ばれていました。
使用するテーマによって機能が有効化されていない場合があります。
この投稿では、アイキャッチ画像機能の有効化から、機能のカスタマイズ方法を解説します。

アイキャッチ画像を有効化する方法

アイキャッチ画像を使用するには WordPress で機能を有効化する必要があります。
機能を有効化するには、使用しているテーマファイルの functions.php に次のコードを追加します。

/*【表示カスタマイズ】アイキャッチ画像の有効化 */

add_theme_support( 'post-thumbnails' );

機能が有効化されると、管理画面の投稿編集ページの右下にアイキャッチ画像の項目が表示されます。

カスタム投稿タイプでアイキャッチ画像を有効化する方法

カスタム投稿の場合は、機能の有効化と合わせて、プロパティの supports の値に thumbnail を追加する必要があります。
次のコードは、function.php にカスタム投稿タイプを追加する場合の記述例です。

/* 【管理画面】カスタム投稿タイプの追加 */

add_action( 'init', 'create_post_type' );

function create_post_type() {

  register_post_type( 'product',

    array(

      'labels' => array(

      'name' => __( 'Product' ),

      'singular_name' => __( 'Product' )

    ),

      'public' => true,

      'has_archive' => true,

      'supports' => array('title','editor','thumbnail','custom-fields','excerpt','author','trackbacks','comments','revisions','page-attributes')

    )

  );

}

プロパティの項目 supports の値に thumbnail を追加してください。

アイキャッチ画像の表示方法

アイキャッチ画像の表示には the_post_thumbnail 関数を使用します。
例えば、投稿に登録したアイキャッチ画像の元画像（full）を表示したい時は、次のコードをテンプレート内の投稿に紐づくループ内に追加します。

<?php the_post_thumbnail('full'); ?>

値を代入する場合は get_the_post_thumbnail を使用します。

<?php

  $thumb = get_the_post_thumbnail( $post_id, 'thumbnail' );

  echo $thumb;

?>

正しく出力されると、次のように表示されます。

<img src="example.jpg" class="attachment-full size-full wp-post-image" alt="" loading="lazy" srcset="example.jpg 960w, example.jpg-640x333.jpg 640w, example.jpg-768x400.jpg 768w" sizes="(max-width: 960px) 100vw, 960px">

srcsetの値は、WordPressの環境により異なる場合があります。
画像の表示パフォーマンス対策を行うために width と height を指定する場合、「アイキャッチ画像の横幅や高さを別々に取得する方法」の項目をご覧ください。

表示するアイキャッチ画像サイズを変更する方法

表示されるアイキャッチ画像のサイズを変更する場合は、パラメーターの値を変更します。

the_post_thumbnail( 'thumbnail' ); // サムネイル (デフォルトでは 150x150px)

the_post_thumbnail( 'medium' );    // 中サイズ   (デフォルトでは 300x300px)

the_post_thumbnail( 'large' );     // 大サイズ   (デフォルトでは 640x640px)

the_post_thumbnail( 'full' );      // フルサイズ (アップロードした画像の元サイズ)

デフォルトのメディアサイズを変更する場合は、「管理画面」>「設定」>「メディア」から画像サイズを変更してください。

アイキャッチ画像に独自のクラスを付与する方法

アイキャッチ画像に独自のクラスを付与する場合は、パラメーターにクラス名を指定します。
次のコードは class に ileft を追加する方法です。

<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'ileft' ) ); ?>

条件分岐でアイキャッチ画像を表示する方法

if文を使って、アイキャッチ画像の登録があれば該当エリアを表示したいときは、the_post_thumbnail ではなく has_post_thumbnail を使用します。

<?php if ( has_post_thumbnail()): ?>

<?php the_post_thumbnail('full'); ?>

<?php endif; ?>

ページナビでアイキャッチ画像を表示する方法

ページナビ内でアイキャッチ画像を表示する場合、 get_next_post や get_previous_post を使って、前後の投稿の情報を取得してアイキャッチ画像を表示します。

例えば、今表示している投稿の「次の投稿」の記事のサムネイルを取得する場合は次のコードを追加します。

<?php

  $next_post = get_next_post();

  if(get_the_post_thumbnail( $next_post->ID )) {

    echo get_the_post_thumbnail( $next_post->ID, 'full', array( 'class' => 'pnav-thumb'));

  }

?>

例えば、今表示している投稿の「前の投稿」の記事のサムネイルを取得する場合は次のコードを追加します。

<?php

  $previous_post = get_previous_post();

  if(get_the_post_thumbnail( $previous_post->ID )) {

    echo get_the_post_thumbnail( $previous_post->ID, 'full', array( 'class' => 'pnav-thumb'));

  }

?>

アイキャッチ画像のURLを取得する方法

アイキャッチ画像の元ファイルのURLを取得する場合は wp_get_attachment_url を使用します。

<?php echo wp_get_attachment_url(get_post_thumbnail_id($post_id)); ?>

メディアサイズを指定する場合は、次のコードを追加します。

<?php

  $thumbnail_id = get_post_thumbnail_id();

  $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );

  echo $thumbnail_img[0]; // URL

?>

wp_get_attachment_image_src は、画像ファイルの url , width , height 属性を配列として返します。

画像のaltにページタイトルを指定する方法

アイキャッチ画像の alt は、メディアに画像を登録した際のキャプションが表示されます。
任意テキストを alt を表示したい場合はキャプションにテキストを登録してください。
また、投稿のページタイトルを動的に入力する場合はプロパティの値にページタイトルを代入することで表示することもできます。

<?php

  $post_title = get_the_title();

  the_post_thumbnail('full',

    array(

      'alt' => $post_title, // altにページタイトルを指定

      'title' => $post_title // titleにページタイトルを指定

    )

  );

?>

アイキャッチ画像の横幅や高さを別々に取得する方法

画像の「横幅」「高さ」「URL」を別々に取得するには、アイキャッチ画像のアタッチメントIDを取得することで対応します。
次のコードは、if文を使うことでアイキャッチ画像がない場合の処理を追加、ダミー画像を表示して使い勝手をよくしています。

<?php if ( has_post_thumbnail()): ?>

<?php

  $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得

  $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // full サイズのアイキャッチの情報を取得

  $src = $image[0];    // URL

  $width = $image[1];  // 横幅

  $height = $image[2]; // 高さ

  echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" alt="" />';

?>

<?php else: //画像がない場合 ?>

<img src="dummy.jpg" alt=""/>

<?php endif; ?>

表示に必要のない項目は適宜調整を加えてください。

管理画面で表示されるアイキャッチ画像のラベルを変更

ここで言うラベルとは、管理画面に表示される名称「アイキャッチ画像」のことを指します。このラベルを変更する方法を紹介します。
例えば、クライアントが管理画面を触る際に「アイキャッチ画像」から「メインビジュアル」に変更することで、より直感的に操作してもらえると思います。
合わせて、アイキャッチ画像のボックスに注釈を追加する方法も紹介します。

/* 【管理画面】アイキャッチ画像のラベルを変更 */

function translate_my_stuff($translation, $text, $domain) {

  if ($text == 'Featured Image') {

    return 'メインビジュアル画像';

  }

  if ($text == 'Use as featured image') {

    return 'メインビジュアル画像として使用';

  }

  return $translation;

  }

add_filter('gettext', 'translate_my_stuff', null, 3);

function custom_admin_post_thumbnail_html( $content ) {

  $content = str_replace( __('アイキャッチ画像を削除'), __('メインビジュアル画像を削除'), $content);

  $content = str_replace( __('アイキャッチ画像を設定'), __('メインビジュアル画像を設定'), $content);

  $content .= '<p>詳細ページのメインビジュアルとして表示する画像を登録してください。</p>';

  return $content;

}

add_filter('admin_post_thumbnail_html', 'custom_admin_post_thumbnail_html');

アイキャッチ画像をOGP画像に指定する方法

アイキャッチ画像をOGP画像に指定する場合、if文で詳細ページかどうかを判別後、og:image にアイキャッチ画像を指定します。
例えば、投稿の詳細ページで og:image にアイキャッチ画像を指定する場合は、次のコードを head タグ内に指定します。

<?php // アイキャッチ画像をOGP画像に指定する方法

	if (is_singular() && has_post_thumbnail($post_object->ID)) { // 詳細ページでアイキャッチ画像の登録がある場合に TRUE

    $thumbnail_id = get_post_thumbnail_id($post_object->ID); // アタッチメントIDの取得

    $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // full サイズのアイキャッチの情報を取得

    $og_image = $image[0]; // アイキャッチ画像の絶対パスを代入

	} else { // 詳細ページ以外

    $og_image = get_template_directory_uri().'/img/ogp.png'; // テーマファイル内の共通イメージを選択

	}

?>

<meta property="og:image" content="<?php echo $og_image; ?>">

共通イメージは適宜変更してご利用ください。
テンプレートの作りによっては、一覧ページなどで最初の投稿がOGP画像として表示される場合があるため、詳細ページの判別を行って処理をします。

まとめ

WordPress のアイキャッチ画像の表示とカスタマイズ方法を紹介しました。
サイトによっては使わない機能かもしれませんが、OGP画像の設定や投稿に対して一つの画像を指定したい場合に便利な機能なので、表示をカスタマイズして上手に使いこなしたい機能の一つです。