【親切設計】「アイキャッチ画像」の名称変更と注釈を入れる方法

この記事では、WordPressの実際の投稿画面にある「アイキャッチ画像」について、タイトル文言の変更方法や、注意テキストを注入する方法をご紹介します。

※2026年8月6日にアイキャッチ画像の注釈の設定、各エディタでの設定方法を追記いたしました。

概要

この記事でできること

「アイキャッチ画像」の名称の変更
アイキャッチ画像部分への文言（注釈）の注入

この記事で利用するもの

functions.php

なぜ変更する必要があるのか

「アイキャッチ画像」とは、例えばYouTubeを見ると必ず目にする「サムネイル」のようなものです。
ユーザーの目を引くことによるサイトのクリック率向上などのメリットや、サイトのデザインテイストにも関わってきます。

そんなアイキャッチ画像ですが、実際にアイキャッチ画像を差し込む際、こんな疑問も持つことはないでしょうか。

どのサイズの画像がいいのか（適切な画像サイズはあるのか）
どんなテイストの画像がいいのか
アイキャッチ画像を設定しなかった場合、実際のサイト上での表示はどうなるのか
そもそも「アイキャッチ画像」って？

などなど。

クライアントワークで多くあると思いますが、実際の投稿者はWordPressやWebに詳しくないこともあります。
投稿者にとって、これらが画像を設定する時点でわかったほうが嬉しいはずです。
もちろん必須ではないですが、親切な投稿画面という意味では、検討してみてはいかがでしょうか。

アイキャッチ画像の有効化と名称変更

実際の方法について解説していきます。

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

まず、アイキャッチ画像（投稿サムネイル）の機能を有効にする必要があります。
有効にする場合、テンプレート（テーマ）のfunctions.php内に下記の一文を追加してください。

add_theme_support('post-thumbnails');

「アイキャッチ画像」の名称の変更方法

「アイキャッチ画像」というタイトル自体を変えたい場合です。
下記、functions.phpに記述してください。

add_filter( 'register_post_type_args', function ( $args, $post_type ) {
  switch ( $post_type ) {
      case 'post':
          $args['labels']['featured_image']        = __('サムネイル');
          $args['labels']['set_featured_image']    = __('サムネイル画像を設定');
          $args['labels']['remove_featured_image'] = __('サムネイル画像を削除');
          break;
  }
  return $args;
}, 10, 2 );

上記を記述することで、下記のように文字が変わります。

「アイキャッチ画像」→「サムネイル」
「アイキャッチ画像を設定」→「サムネイル画像を設定」

実際の表示

また、画像を削除する際も、下記のように文字が変わります。

「アイキャッチ画像を削除」→「サムネイル画像を削除」

実際の表示

投稿、カスタム投稿、固定ページでぞれぞれ違う文言にしたい場合

投稿・カスタム投稿・固定ページにおいて、ぞれぞれ違う文言にしたい場合は、下記の記述をします。

add_filter( 'register_post_type_args', function ( $args, $post_type ) {
  switch ( $post_type ) {
      case 'page': //固定ページ
          $args['labels']['featured_image']        = __('固定ページサムネイル');
          $args['labels']['set_featured_image']    = __('固定ページサムネイル画像を設定');
          $args['labels']['remove_featured_image'] = __('固定ページサムネイル画像を削除');
          break;
  }
  switch ( $post_type ) {
      case 'news': //カスタム投稿のNewsページ
          $args['labels']['featured_image']        = __('Newsサムネイル');
          $args['labels']['set_featured_image']    = __('Newsサムネイル画像を設定');
          $args['labels']['remove_featured_image'] = __('Newsサムネイル画像を削除');
          break;
  }
  return $args;
}, 10, 2 );

【注意】アイキャッチ画像の注釈の設定

wordpress5.0以降からエディタがGutenbergになった影響でphpの記述だけでは、
アイキャッチ画像に注釈を追加することができなくなりました。
そのためWordPressのバージョンに応じ、「旧エディタでの設定方法」または「Gutenbergでの設定方法」どちらかの方法で設定する必要があります。

旧エディタでの設定方法

wordpress5.0よりも前のバージョンである「Classic Editor」ではphpの記述だけでもアイキャッチ画像に注釈を追加することができます。
実際の方法について解説していきます。

アイキャッチ画像を設定するところに注意テキストを入れる

下記をfunction.phpに記述することで、注意テキストを表示することができます。

/* ---------- アイキャッチ注意テキスト (投稿)---------- */
function add_featured_image_instruction( $content ) {
  return $content .= '<p>サイズは横300px、縦200pxを基準サイズとしています。</p>';
}
add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction' );

実際の表示

いかがでしょうか。
これで投稿者はひと目で「300×200の画像が良いんだな」とわかります。
無駄に高画質な画像を差し込んでしまったり、縦横比が違う画像を差し込んでしまう、などと言ったことが防げます。

文言にスタイルを当てる方法

また、スタイル（色の変更や文字の大きさ）を当てることも可能です。
例えば、注意文言全体を赤文字にしたり↓↓↓

/* ---------- アイキャッチ注意テキスト (投稿)---------- */
function add_featured_image_instruction( $content ) {
  return $content .= '<p style="color:red;">サイズは横300px、縦200pxを基準サイズとしています。</p>';
}
add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction' );

実際の表示

spanタグで囲って指定サイズだけを赤文字にしたり↓↓↓

/* ---------- アイキャッチ注意テキスト (投稿)---------- */
function add_featured_image_instruction( $content ) {
  return $content .= '<p>サイズは<span style="color:red;">横300px</span>、<span style="color:red;">縦200px</span>を基準サイズとしています。</p>';
}
add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction' );

実際の表示

他にも、改行を入れたり。

/* ---------- アイキャッチ注意テキスト ---------- */
function add_featured_image_instruction( $content ) {
  return $content .= '<p>サイズは横300px、縦200pxを基準サイズとしています。<br>アイキャッチ画像を設定しない場合はサイトのロゴが表示されます。</p>';
}
add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction' );

実際の表示

サイズは横300px、縦200pxを基準サイズとしています。アイキャッチ画像を設定しない場合はサイトのロゴが表示されます。

投稿者が分かりやすいように、いろいろと工夫してみてください！

投稿とカスタム投稿でそれぞれ違う文言にしたい場合

投稿とカスタム投稿で別の文言にしたい場合は、下記で対応できます。

postが投稿、worksとnewsがカスタム投稿になります。
postType == ‘ ‘ に、適用したい投稿のスラッグを記述してください。

/* ---------- アイキャッチ注意テキスト（投稿タイプ別） ---------- */
function my_admin_post_thumbnail_html( $content ) {
  $screen = get_current_screen();
  if ( $screen->post_type == 'post' ) { //投稿
    $content .= '<p>アイキャッチ説明文</p>';
  } elseif ( $screen->post_type == 'works' ) { //カスタム投稿名
    $content .= '<p>アイキャッチ説明文</p>';
  } elseif ( $screen->post_type == 'news' ) { //カスタム投稿名
    $content .= '<p>アイキャッチ説明文</p>';
  }
  return $content;
}
add_filter( 'admin_post_thumbnail_html', 'my_admin_post_thumbnail_html');

Gutenbergでの設定方法

wordpress5.0以降のエディタ「Gutenberg」での設定方法です。
Gutenbergでも対応できるようにするためには、functions.phpからJavaScriptを読み込ませる必要があります。

アイキャッチ画像を設定するところに注意テキストを入れる

下記をfunction.phpに記述することで、注意テキストを表示することができます。

add_action( 'admin_footer-post.php', 'add_featured_image_instruction_gutenberg' );
add_action( 'admin_footer-post-new.php', 'add_featured_image_instruction_gutenberg' );

function add_featured_image_instruction_gutenberg() {
    ?>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
        // アイキャッチ画像エリアが読み込まれるのを待つための監視
        const observer = new MutationObserver((mutations, obs) => {
            const target = document.querySelector('.editor-post-featured-image');
            if (target && !document.getElementById('custom-featured-image-instruction')) {
                // 注釈を入れるPタグを作成
                const p = document.createElement('p');
                p.id = 'custom-featured-image-instruction';
                p.style.fontSize = '12px';
                p.style.color = '#000';
                p.style.marginTop = '10px';
                p.innerText = 'サイズは横300px、縦200pxを基準サイズとしています。';
                
                // アイキャッチ画像の下に追加
                target.appendChild(p);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}

実際の表示

文言にスタイルを当てる方法

p.style.colorの値を変えると文字色を変えることもできます。

add_action( 'admin_footer-post.php', 'add_featured_image_instruction_gutenberg' );
add_action( 'admin_footer-post-new.php', 'add_featured_image_instruction_gutenberg' );

function add_featured_image_instruction_gutenberg() {
    ?>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
        // アイキャッチ画像エリアが読み込まれるのを待つための監視
        const observer = new MutationObserver((mutations, obs) => {
            const target = document.querySelector('.editor-post-featured-image');
            if (target && !document.getElementById('custom-featured-image-instruction')) {
                // 注釈を入れるPタグを作成
                const p = document.createElement('p');
                p.id = 'custom-featured-image-instruction';
                p.style.fontSize = '12px';
                p.style.color = 'red';
                p.style.marginTop = '10px';
                p.innerText = 'サイズは横300px、縦200pxを基準サイズとしています。';
                
                // アイキャッチ画像の下に追加
                target.appendChild(p);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}

実際の表示

またspanで囲んで特定の箇所を赤文字にすることもできます。

add_action( 'admin_footer-post.php', 'add_featured_image_instruction_gutenberg' );
add_action( 'admin_footer-post-new.php', 'add_featured_image_instruction_gutenberg' );

function add_featured_image_instruction_gutenberg() {
    ?>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
        // アイキャッチ画像エリアが読み込まれるのを待つための監視
        const observer = new MutationObserver((mutations, obs) => {
            const target = document.querySelector('.editor-post-featured-image');
            if (target && !document.getElementById('custom-featured-image-instruction')) {
                // 注釈を入れるPタグを作成
                const p = document.createElement('p');
                p.id = 'custom-featured-image-instruction';
                p.style.fontSize = '12px';
                p.style.color = '#000';
                p.style.marginTop = '10px';
                
                // 特定の部分だけ赤文字にするためにinnerHTMLを使用
                p.innerHTML = 'サイズは<span style="color: red;">横300px、縦200px</span>を基準サイズとしています。';
                
                // アイキャッチ画像の下に追加
                target.appendChild(p);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}

実際の表示

他にも改行を入れることができます。

add_action( 'admin_footer-post.php', 'add_featured_image_instruction_gutenberg' );
add_action( 'admin_footer-post-new.php', 'add_featured_image_instruction_gutenberg' );

function add_featured_image_instruction_gutenberg() {
    ?>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
        // アイキャッチ画像エリアが読み込まれるのを待つための監視
        const observer = new MutationObserver((mutations, obs) => {
            const target = document.querySelector('.editor-post-featured-image');
            if (target && !document.getElementById('custom-featured-image-instruction')) {
                // 注釈を入れるPタグを作成
                const p = document.createElement('p');
                p.id = 'custom-featured-image-instruction';
                p.style.fontSize = '12px';
                p.style.color = '#000';
                p.style.marginTop = '10px';
                
                // 特定の部分だけ赤文字にするためにinnerHTMLを使用
                p.innerHTML = 'サイズは<span style="color: red;">横300px、縦200px</span>を基準サイズとしています。<br>アイキャッチ画像を設定しない場合はサイトのロゴが表示されます。';
                
                // アイキャッチ画像の下に追加
                target.appendChild(p);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}

実際の表示

投稿とカスタム投稿でそれぞれ違う文言にしたい場合

投稿とカスタム投稿で別の文言にしたい場合は、下記で対応できます。
postが投稿、newsがカスタム投稿になります。 postType === ‘ ‘ に、適用したい投稿のスラッグを記述してください。

/* ---------- アイキャッチ注意テキスト (投稿タイプ別の出し分け) ---------- */
add_action( 'admin_footer-post.php', 'add_featured_image_instruction_gutenberg' );
add_action( 'admin_footer-post-new.php', 'add_featured_image_instruction_gutenberg' );

function add_featured_image_instruction_gutenberg() {
    ?>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
        // アイキャッチ画像エリアが読み込まれるのを待つための監視
        const observer = new MutationObserver((mutations, obs) => {
            const target = document.querySelector('.editor-post-featured-image');
            if (target && !document.getElementById('custom-featured-image-instruction')) {
                
                // 現在の投稿タイプを取得
                const postType = wp.data.select('core/editor').getCurrentPostType();
                let instructionText = '';

                // 投稿タイプごとに文言を設定
                if (postType === 'post') {
                    // 通常の「投稿」の場合
                    instructionText = 'サイズは横300px、縦200pxを基準サイズとしています。';
                } else if (postType === 'news') { 
                    // 「カスタム投稿（例: news）」の場合 ※実際の投稿タイプ名に書き換えてください
                    instructionText = 'カスタム投稿用の注釈テキストです。';
                }

                // 文言がある場合のみ注釈を表示
                if (instructionText) {
                    const p = document.createElement('p');
                    p.id = 'custom-featured-image-instruction';
                    p.style.fontSize = '12px';
                    p.style.color = '#000';
                    p.style.marginTop = '10px';
                    p.innerText = instructionText;
                    
                    target.appendChild(p);
                }
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}