WordPress

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

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

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

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

アイキャッチ画像とは?

WordPress のアイキャッチ機能は、投稿に画像を添付することができる機能です。
使用するテーマによって機能が有効化されていない場合があります。
この投稿ではアイキャッチの有効化から機能のカスタマイズ方法を、順を追って説明します。

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

アイキャッチ画像を使用するには 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 関数を使用します。
次のコードをテンプレートのループ内に追加します。

<?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($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($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');

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

この記事をシェアする