wordpressで記事ページにアイキャッチ機能を追加する方法

WordPressには記事にアイキャッチを表示したり、それをカスタマイズする機能があります。これは投稿にメインビジュアルを表示したいときや、投稿一覧にサムネイル画像を表示したいときに必要になる機能です。
アイキャッチには適切なALTやTITLE属性を設定することでSEO効果が見込めます。今回はそんなアイキャッチ機能の設定方法を紹介します。

アイキャッチ機能の設定方法

アイキャッチ機能を有効化

アイキャッチ機能を使用するにはfunctions.phpに以下のコードを追加します。

add_theme_support( 'post-thumbnails' );

また、投稿タイプを指定して機能を有効にしたい場合、投稿タイプの配列を以下のように指定することもできます。

add_theme_support( 'post-thumbnails', array( 'post', 'page', 'test' ) ); // カスタム投稿タイプも指定可能

アイキャッチの表示方法

アイキャッチの表示にはthe_post_thumbnail関数を使用します。

<?php the_post_thumbnail(); ?>

アイキャッチ画像のサイズ指定

アイキャッチ画像のサイズの指定方法にはthe_post_thumbnail関数で指定する方法とadd_image_size関数で投稿画像サイズを追加する方法があります。

the_post_thumbnail関数で指定する場合

<?php the_post_thumbnail( array( 100, 100 ) ); ?>  //任意の値を指定できます

the_post_thumbnail関数で指定する場合はfunctions.phpへ以下を追記します。

add_image_size( 'dummy-thumb', 100, 100, true );

dummy-thumbと数値の箇所は任意の値を設定できます。上記を追記した後、各テーマで以下のthe_post_thumbnail関数で呼び出します。

<?php the_post_thumbnail( 'dummy-thumb' ); ?> 

画像のパラメータを別々に取得する方法

横幅や高さ、alt、画像URLをそれぞれ取得する場合、以下のように記述します。

<?php
$thum_img = get_post_thumbnail_id( $post_id );
$thum_data = wp_get_attachment_image_src( $thum_img );
$src = $image[0];    // URL
$width = $image[1];  // 横幅
$height = $image[2]; // 高さ
$alt = get_post_meta($thum_img, '_wp_attachment_image_alt', true);
?>

まとめ

アイキャッチ画像は画像を見てアクセスするユーザーに対する大事な導線です。適切な画像を設定し、また内部的にも適切な設定を施すことでSEO効果を期待することができます。
wordpressの投稿にこの機能を追加カスタマイズし、記事ページへの導線を適切に設定してみましょう。