本文上のアイキャッチにYouTube動画を表示する方法

はじめに

通常、投稿本文の上に表示されるアイキャッチには画像しか設定できません。

そこで、アイキャッチにYouTube動画を表示できるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// メタボックスを追加
add_action('add_meta_boxes', function () {
  add_meta_box(
    'youtube_url',
    'YouTubeアイキャッチ',
    'render_youtube_url',
    'post',
    'side',
    'default'
  );
});


/**
 * メタボックスの入力フォームを出力
 *
 * @param WP_Post $post 投稿オブジェクト
 * @return void
 */
if (!function_exists('render_youtube_url')):
function render_youtube_url($post) {
  $value = get_post_meta($post->ID, 'my_youtube_url', true);

  wp_nonce_field('youtube_url_action', 'youtube_url_nonce');
  ?>
  <label for="youtube_url_field">URL</label>
  <input type="text" name="youtube_url_field" id="youtube_url_field" value="<?= esc_attr($value); ?>" style="width:100%;" />
  <?php
}
endif;


/**
 * YouTube URLを保存し、YouTubeサムネイルをアイキャッチに設定
 *
 * @param int $post_id 投稿ID
 * @return void
 */
if (!function_exists('save_youtube_url')):
function save_youtube_url($post_id) {
  // nonceチェック
  if (!isset($_POST['youtube_url_nonce']) || !wp_verify_nonce($_POST['youtube_url_nonce'], 'youtube_url_action')) {
    return;
  }

  // 自動保存チェック
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return;
  }

  // リビジョンは除外
  if (wp_is_post_revision($post_id)) {
    return;
  }

  // 権限チェック
  if (!current_user_can('edit_post', $post_id)) {
    return;
  }

  // カスタムフィールドに保存
  if (isset($_POST['youtube_url_field'])) {
    $youtube_url = esc_url_raw($_POST['youtube_url_field']);
    update_post_meta($post_id, 'my_youtube_url', $youtube_url);
  } else {
    return;
  }

  // アイキャッチ設定済みなら終了
  if (has_post_thumbnail($post_id)) {
    return;
  }

  // URL未入力なら終了
  if (!$youtube_url) {
    return;
  }

  // YouTube IDを抽出
  if (!preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^\&\?\/]+)/', $youtube_url, $matches)) {
    return;
  }

  $youtube_id = $matches[1];

  $thumbnail_url = "https://img.youtube.com/vi/{$youtube_id}/hqdefault.jpg";

  require_once(ABSPATH . 'wp-admin/includes/media.php');
  require_once(ABSPATH . 'wp-admin/includes/file.php');
  require_once(ABSPATH . 'wp-admin/includes/image.php');

  // サムネイルをダウンロード
  $tmp = download_url($thumbnail_url);
  if (is_wp_error($tmp)) {
    return;
  }

  $file_array = [
    'name'     => $youtube_id . '.jpg',
    'tmp_name' => $tmp,
  ];

  // save_postのループを防止
  remove_action('save_post', 'save_youtube_url', 20);

  $attachment_id = media_handle_sideload($file_array, $post_id);

  // save_postを再登録
  add_action('save_post', 'save_youtube_url', 20);

  // 一時ファイルを削除
  if (file_exists($tmp)) {
    @unlink($tmp);
  }

  // アイキャッチを設定
  if (!is_wp_error($attachment_id)) {
    set_post_thumbnail($post_id, $attachment_id);
  }
}
endif;


// 投稿データを保存
add_action('save_post', 'save_youtube_url', 20);


// テンプレート（アイキャッチ画像）を変更
add_filter('cocoon_part__tmp/eye-catch', function ($content) {
  global $post;

  // YouTube URLを取得
  $youtube_url = get_post_meta($post->ID, 'my_youtube_url', true);
  if (!$youtube_url) {
    return $content;
  }

  // YouTube IDを抽出
  if (!preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^\&\?\/]+)/', $youtube_url, $matches)) {
    return $content;
  }

  $youtube_id = $matches[1];

  $display_none = is_eyecatch_visible() ? null : ' display-none';

  ob_start();
  ?>
  <div class="eye-catch-wrap<?= esc_attr($display_none); ?>">
    <figure class="eye-catch">
      <iframe style="width: 100%; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/<?= esc_attr($youtube_id); ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </figure>
  </div>
  <?php
  return ob_get_clean();
});

さいごに

今回紹介した方法を使えば、投稿の本文上にYouTube 動画をアイキャッチとして表示できます。
メタボックスに動画URLを入力するだけで自動的にサムネイルが取得され、アイキャッチとして設定されます。
これにより、投稿の視覚的インパクトを高め、読者の注目を集めやすくなります。