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

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' ); // フルサイズ (アップロードした画像の元サイズ)

独自のクラスを付与したい

アイキャッチ画像に独自のクラスを付与することもできます。
次のコードは classileft を追加する方法です。

<?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_postget_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画像の設定や投稿に対して一つの画像を指定したい場合に便利な機能なので、表示をカスタマイズして上手に使いこなしたい機能の一つです。

スポンサーリンク

合わせて読みたい関連記事