WordPress アイキャッチ画像の表示方法とカスタマイズ方法の紹介

Last update 
/ Posted by Takumi Hirashima

WordPress アイキャッチ画像の表示方法とカスタマイズ方法の紹介

WordPress のアイキャッチ画像の表示方法とカスタマイズ方法を紹介します。
投稿にアイキャッチ画像を登録することで、投稿に画像を添付することができるようになります。例えば、記事一覧にサムネイル画像を表示したり、投稿のメインビジュアルやOGP画像を設定したい時に便利です。
使用しているテーマによっては、投稿サムネイル機能が有効化されていない場合があります、まずは機能の有効化から順を追って説明していきます。

  1. アイキャッチ画像の有効化
  2. アイキャッチ画像の表示
    1. 画像サイズを変更したい
    2. 独自のクラスを付与したい
  3. アイキャッチ画像を条件分岐で表示
  4. ページナビでアイキャッチ画像を表示する方法
  5. アイキャッチ画像のURLを取得
  6. altの表示
    1. altにページタイトルを指定する方法
  7. 高度な表示方法
  8. 管理画面で表示されるアイキャッチ画像のラベルを変更
  9. まとめ

アイキャッチ画像の有効化

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

/*【表示カスタマイズ】アイキャッチ画像の有効化 */
add_theme_support( 'post-thumbnails' ); 

有効化されると、投稿の詳細ページ右下にアイキャッチ画像の項目が表示されます。

アイキャッチ画像の表示

アイキャッチ画像の表示には the_post_thumbnail 関数を使用します。
次のコードをテンプレートのループ内に追加します。

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

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

<?php 
  $thumb = get_the_post_thumbnail( $post_id, 'thumbnail' );
  echo $thumb;
?>

画像サイズを変更したい

アイキャッチ画像のサイズを変更したい場合は thumbnail の値を変更します。
デフォルトのメディアサイズを変更する場合は、管理画面 > 設定 > メディア から画像サイズを変更してください。

  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文を使う場合は has_post_thumbnail を使用します。

<?php if ( has_post_thumbnail()): ?>
  <?php the_post_thumbnail('full'); ?>
<?php endif; ?>

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

get_next_post や get_previous_post でアイキャッチ画像を表示する方法です。
次のコードは get_next_post で表示する場合です。

<?php 
  if(get_the_post_thumbnail( $next_post->ID )) { 
    echo get_the_post_thumbnail( $next_post->ID, 'full', array( 'class' => 'pnav-thumb'));
  } 
?>

アイキャッチ画像のURLを取得

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

<?php echo wp_get_attachment_url( get_post_thumbnail_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 を表示したい場合はキャプションにテキストを登録してください。

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($post_object->ID)): ?>
<?php 
  $thumbnail_id = get_post_thumbnail_id($post_object->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');

まとめ

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

私が続けて読みたい関連記事

スポンサーリンク