WordPress 投稿のアイキャッチ画像を動画に切り替える方法

この記事では、動画がある場合は投稿一覧に動画を表示し、動画がない場合はアイキャッチ画像を表示する方法を解説します。以下は、カスタムフィールドを利用して柔軟に対応する手順とコードです。

他の記事を読みプラグイン（例: Video Thumbnails Pro）を試しましたが、上手くいかなったため、備忘録として記録しています。

手順 1: ACFプラグインのインストールと有効化

1. 管理画面へログイン
   • WordPressの管理画面にログインします。
2. プラグインを検索
   • 管理画面左メニューから「プラグイン」 > 「新規追加」に移動。
   • 検索バーに「Advanced Custom Fields」（現在は、Secure Custom Fields）を入力。
3. インストール
   • 見つかったプラグインを「今すぐインストール」し、有効化します。

---

手順 2: カスタムフィールドを設定

1. フィールドグループの作成
   • 管理画面左メニューに「カスタムフィールド」が追加されているので、クリック。
   • 「フィールドグループを追加」をクリック。
2. 基本設定
   • フィールドグループ名: 「動画URL」など任意の名前を設定。
   • 「フィールドを追加」をクリックし、以下の情報を入力:
     • フィールドラベル: 動画URL
     • フィールド名: custom_video_field （後のコードで利用する名前）
     • フィールドタイプ: URL（動画のURLを入力するため）
3. 適用先を指定
   • 「場所」セクションで、表示対象を「投稿タイプが投稿」の場合などに設定。
   • 完了したら「更新」をクリック。

---

手順 3: 投稿に動画URLを入力

1. 投稿を作成または編集
   • 「投稿」 > 「新規追加」または既存の投稿を編集。
2. 動画URLを入力
   • 投稿編集画面に追加された「動画URL」フィールドに、埋め込みたい動画のURL（例: https://example.com/video.mp4）を入力。
3. 保存
   • 投稿を「公開」または「更新」で保存します。

---

手順 4: テーマにコードを追加

投稿一覧ページのテンプレートファイル（例: archive.php または home.php）に以下のコードを追加します。

追加コード

 <div class="rect">
    <?php
    // カスタムフィールドから動画URLを取得
    $video_url = get_field('custom_video_field'); // カスタムフィールドの値を取得

    if ($video_url): ?>
        
        <a href="<?php the_permalink(); ?>">
            <video src="<?php echo esc_url($video_url); ?>" autoplay muted loop playsinline></video>
        </a>
    <?php else: ?>
        
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(220, 110)); ?></a>
    <?php endif; ?>
 </div >

コードの解説

$video_url でカスタムフィールドの値（動画URL）を取得します。動画URLがある場合は <video> タグを使って動画を自動再生。

• autoplay: 自動再生
• muted: 音声をミュート（自動再生には必須）
• loop: 繰り返し再生
• playsinline: スマホでのフルスクリーン再生を防止

動画がない場合は、the_post_thumbnail() でアイキャッチ画像を表示します。

---

これで、投稿一覧ページで動画またはアイキャッチ画像が表示されるようになります。