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

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

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');

CSSでデザインを整える

/*投稿本文の最初にアイキャッチ画像を自動表示する*/
.auto-featured-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 5px;
}

テーマ別サンプルCSS

Lightning用

/*Lightning用 投稿本文の最初にアイキャッチ画像を自動表示*/
.auto-featured-image {
    border: 3px solid #ff9800;
    border-radius: 8px;
    margin-bottom: 25px;
}

Cocoon用

/*Cocoon用 投稿本文の最初にアイキャッチ画像を自動表示*/
.auto-featured-image {
    border: 2px solid #90caf9;
    border-radius: 5px;
    margin-bottom: 20px;
}

（例 Lightning）

まとめ

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

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

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