投稿本文の最初にアイキャッチ画像を自動表示する方法

WordPressでブログを書いていると、「投稿本文の冒頭にアイキャッチ画像を自動で表示したい」と思ったことはありませんか？毎回手動で画像を挿入するのは面倒ですし、テーマによっては本文に自動表示されないこともあります。この記事では、簡単にPHPで自動表示させる方法を紹介します。

1 functions.phpにコードを追加

テーマ（または子テーマ）の functions.php に以下のコードを追加してください。これで投稿本文の最初にアイキャッチ画像が自動で挿入されます。

//-------------------------------------------
// 投稿本文の先頭にアイキャッチ画像を自動表示
//-------------------------------------------
function prepend_featured_image_to_content($content) {
    if ( is_singular('post') && has_post_thumbnail() && is_main_query() ) {
        $thumbnail = get_the_post_thumbnail(get_the_ID(), 'large', array('class' => 'auto-featured-image'));
        $content = $thumbnail . $content;
    }
    return $content;
}
add_filter('the_content', 'prepend_featured_image_to_content');

2 汎用CSS

/* ------------------------------------------
 * 投稿本文の最初にアイキャッチ画像を自動表示する
 * ------------------------------------------ */

/* アイキャッチ画像の基本スタイル */
.auto-featured-image {
    width: 100%;        /* 横幅いっぱいに広げる */
    height: auto;       /* 高さは比率を維持 */
    margin-bottom: 20px;/* 本文との余白 */
    border-radius: 5px; /* 角を少し丸める */
}

3 テーマ別サンプルCSS

3.1 Lightning用

/* --------------------------------------------------
 * Lightning用 投稿本文の最初にアイキャッチ画像を自動表示
 * -------------------------------------------------- */

.auto-featured-image {
    border: 3px solid #ff9800; /* Lightningオレンジの枠線 */
    border-radius: 8px;        /* 角を丸める */
    margin-bottom: 25px;       /* 本文との余白 */
}

3.2 Cocoon用

/* -----------------------------------------------
 * Cocoon用 投稿本文の最初にアイキャッチ画像を自動表示
 * ----------------------------------------------- */

.auto-featured-image {
    border: 2px solid #90caf9; /* Cocoon向けライトブルー */
    border-radius: 5px;        /* 角丸 */
    margin-bottom: 20px;       /* 本文との余白 */
}

（例 Lightning）

4 まとめ

投稿本文の最初にアイキャッチ画像を自動表示する方法を紹介しました。

• functions.phpにコード追加: 自動で本文の先頭に画像を挿入
• CSSで装飾: 画像サイズや余白、枠線を調整可能
• テーマ別CSSサンプル: LightningやCocoonにも対応

毎回手動で画像を挿入する手間が省けるので、ぜひ導入してみてください。