WordPressアイキャッチ画像の設定し表示する初心者向けガイド

こちらのサイトであまり活用できていない、WordPressの素ん晴らしい機能の一つである「アイキャッチ画像」
本来であればとっても重要なWordPressの機能なので、自戒を込めてまとめました。。。ちゃんと使おう…いや、ちゃんとアイキャッチ画像作ろう….

今回の内容はWeb制作者向けに、コーディングでのアイキャッチ画像の取得、表示方法についてを中心に解説します。

その他、アイキャッチ画像の役割や設定方法、そしてSEO（検索エンジン最適化）における重要性についても、WordPress初心者の方がスムーズに活用できるように解説していきます。

WordPressアイキャッチ画像とは？

アイキャッチ画像は、ポストやページの見出しを引き立て、視覚的な興味を引くための重要な要素です。具体的には、記事一覧や検索結果などで表示され、ユーザーにコンテンツの内容を視覚的に伝えます。

アイキャッチ画像がついている画像と、ついていない画像ではクリック率が違います。YouTubeのサムネイルを見ると一目瞭然で、見たい内容なのかが判断できますよね。

アイキャッチ画像を管理画面から設定する方法

WordPressでアイキャッチ画像を設定する方法は非常に簡単です。新しい記事や固定ページを作成する際、編集画面の右上にある「アイキャッチ画像を設定」ボタンをクリックし、画像を選択するだけです。既存のコンテンツにも追加することができます。

WordPressのアイキャッチ画像設定箇所 — WordPress管理画面より、アイキャッチ登録箇所

アイキャッチ画像の取得方法

初心者のWeb制作の方向けにWordPressの標準関数「get_the_post_thumbnail_url()」を使用し、アイキャッチ画像を取得する方法をご紹介。

1. 投稿またはページのアイキャッチ画像を取得する方法

<?php
// 現在の投稿またはページのIDを指定
$post_id = get_the_ID();

// アイキャッチ画像のURLを取得
$thumbnail_url = get_the_post_thumbnail_url($post_id, 'full');

// アイキャッチ画像が存在するか確認
if ($thumbnail_url) {
    echo '<img src="' . esc_url($thumbnail_url) . '" alt="アイキャッチ画像">';
} else {
    echo '<p>アイキャッチ画像はありません。</p>';
}

// 記事表示のループ中の場合は、自動で投稿のアイキャッチ画像を取得してくれる
get_the_post_thumbnail();
// 記事表示のループ中にサムネイルを表示する
the_post_thumbnail();

?>

2. タクソノミー（カテゴリ、タグなど）ごとのアイキャッチ画像を取得する方法

<?php
// ターム（カテゴリ、タグなど）のIDを指定
$term_id = get_queried_object_id();

// アイキャッチ画像のURLを取得
$thumbnail_url = get_term_thumbnail_url($term_id, 'full');

// アイキャッチ画像が存在するか確認
if ($thumbnail_url) {
    echo '<img src="' . esc_url($thumbnail_url) . '" alt="アイキャッチ画像">';
} else {
    echo '<p>アイキャッチ画像はありません。</p>';
}
?>

3. カスタム投稿タイプのアイキャッチ画像を取得する方法

<?php
// カスタム投稿タイプのスラッグを指定
$custom_post_type = 'your_custom_post_type';

// カスタム投稿タイプのアイキャッチ画像のURLを取得
$thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');

// アイキャッチ画像が存在するか確認
if ($thumbnail_url) {
    echo '<img src="' . esc_url($thumbnail_url) . '" alt="アイキャッチ画像">';
} else {
    echo '<p>アイキャッチ画像はありません。</p>';
}
?>

アイキャッチ画像のサイズと適切な選び方

アイキャッチ画像のサイズは重要です。
大きすぎるとページの読み込み速度が遅れ、小さすぎると表示が劣化します。テーマによって指定されたデフォルトサイズがありますが、気になる場合は、適切なプラグインを使用して最適なサイズに調整します。

画像のサイズを追加する方法

コード上でアイキャッチ画像を追加するには、functions.phpに記述を追加します。
set_post_thumbnail_size関数を使用してアイキャッチ画像のデフォルトサイズを設定し、add_image_size関数を使用して追加のサイズを定義しています。必要に応じて、追加の画像サイズを適切なものに変更してください。

// アイキャッチ画像のサイズを追加
add_theme_support('post-thumbnails');
set_post_thumbnail_size(1200, 630, true); // 幅1200px、高さ630px、切り抜きモード（true）

// 追加の画像サイズを定義（必要に応じて）
add_image_size('custom-size', 800, 400, true);

表示時のサイズ変更方法

テーマファイルでアイキャッチ画像を表示する際にサイズを指定します。
get_the_post_thumbnail_url関数を使用して指定したサイズのアイキャッチ画像のURLを取得し、それを<img>タグで表示しています。custom-sizeの部分は先程add_image_sizeで定義したサイズの名前に変更してください。

<?php
if (has_post_thumbnail()) {
    // アイキャッチ画像のURLを取得
    $thumbnail_url = get_the_post_thumbnail_url(null, 'custom-size'); // 表示したいサイズの名前を指定

    // アイキャッチ画像を表示
    echo '<img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr(get_the_title()) . '">';
}
?>

アイキャッチ画像の重要性とSEOへの影響

検索エンジンはテキストだけでなく、画像もコンテンツの評価に利用します。アイキャッチ画像はSEOにおいても重要な要素であり、適切に最適化されると検索エンジンランキングの向上に寄与します。

下記Google 公式ページにて画像検索SEOについて紹介されているページがあり、SEO上有効とされています。（と、言いながらこのサイトは全然画像登録する気がない…趣味サイトですしね…）
Google 画像検索 SEO ベストプラクティス

アイキャッチ画像の最適化

アイキャッチ画像を最適化することで、ページの読み込み速度を向上させ、SEOのパフォーマンスを向上させることができます。圧縮ツールを使用してファイルサイズを最小限に抑え、画像に適切なalt属性を設定することをお勧めします。

画像の最適化は、必ずしておきたい項目です。有名どころだと、Tinypngがありますね。
他にもWordPressのプラグインを使ってアップロードした画像ファイルを圧縮する方法もあります。

https://tinypng.com/

よくある問題とトラブルシューティング

アイキャッチ画像が表示されない場合、テーマやプラグインとの互換性を確認しましょう。適切なファイル形式を使用しているかも確認し、問題が解決しない場合はサポートフォーラムやコミュニティに質問してみましょう。

まとめ

WordPressのアイキャッチ画像に焦点を当て、その設定方法や最適化のポイント、SEOにおける重要性について解説しました。

お役に立てていると幸いです！

よかったらシェアしてね！

URLをコピーしました！

WordPressアイキャッチ画像の設定し表示する 初心者向けガイド