WordPressにYouTube検索結果を埋め込むショートコードのカスタマイズ

ブログ

前回の記事では、YouTube Data APIを活用して、特定のキーワードで検索したYouTube動画をWordPressページや投稿に埋め込むためのショートコード機能を実装する方法を解説しました。

WordPressにYouTube検索結果を埋め込むショートコードの作り方
前回は、Wordpress記事にYouTube検索結果を埋め込む固定ページテンプレートを作成する方法を紹介しました。 今回は、固定ページでなくても、記事内部で簡単に使えるようにショートコードにする方法を紹介します。 基本的な使い方として、前...
lifetechia.com
2024.11.25

今回は、そこに便利な機能としてタイトル表示の有無やレイアウトの方法、フィルタリングなどの機能を追加していきたいと思います。

機能の説明

このコードで実現する主な機能は以下の通りです：

レイアウト選択

  • レイアウト1（縦並び）: 動画を縦に並べて表示。タイトル表示の有無を切り替え可能。
  • レイアウト2（横スクロール）: 動画を横に並べて、小さめのサイズでスクロール可能なレイアウト。

タイトル表示のオン・オフ

ショートコード引数 title を使用して、動画のタイトルを表示するかどうかを設定できます。
– title="true": タイトルを表示する。
– title="false": タイトルを非表示にする。

フィルター機能

ショートコード引数 filter を使用して、動画タイトルに特定のキーワードがすべて含まれる動画のみを表示します。
– filter に複数のキーワードをカンマ区切りで指定すると、AND条件でフィルタリングを行います。

以下のように引数を組み合わせることで、柔軟な動画表示が可能です。
  • keyword: 検索キーワード（例: “猫動画”）。
  • max_results: 表示する動画数の上限（例: 5件）。
  • layout: レイアウト選択（1: 縦並び, 2: 横スクロール）。
  • title: タイトルの表示設定（true/false）。
  • filter: フィルターキーワード（例: “かわいい,面白い”）。

完成コードの概要

以下は、実装したコードの全体像です。

functions.php のコード

function youtube_search_shortcode($atts) {
    // ショートコード属性のデフォルト値
    $atts = shortcode_atts([
        'keyword' => 'WordPress チュートリアル', // デフォルトキーワード
        'max_results' => 5,                      // 表示する動画の最大数
        'layout' => '1',                         // レイアウトタイプ（1: 縦並び, 2: 横スクロール）
        'title' => 'true',                       // タイトル表示（true or false）
        'filter' => ''                           // フィルターキーワード（,区切りでAND検索）
    ], $atts, 'youtube_search');

    $api_key = YouTube_API; // YouTube Data APIキーを設定
    $keyword = $atts['keyword'];
    $max_results = intval($atts['max_results']);
    $layout = intval($atts['layout']);
    $show_title = strtolower($atts['title']) === 'true'; // タイトル表示の有無
    $filter_keywords = array_filter(array_map('trim', explode(',', $atts['filter']))); // フィルターキーワード配列

    $videos = fetch_youtube_videos($keyword, $api_key, $max_results);

    if (empty($videos)) {
        return '<p>該当する動画が見つかりませんでした。</p>';
    }

    // フィルタリング処理
    $filtered_videos = array_filter($videos, function($video) use ($filter_keywords) {
        $title = strtolower($video['snippet']['title']); // タイトルを小文字で比較
        foreach ($filter_keywords as $keyword) {
            if (strpos($title, strtolower($keyword)) === false) {
                return false; // キーワードが見つからなければ除外
            }
        }
        return true;
    });

    if (empty($filtered_videos)) {
        return '<p>指定されたフィルター条件に一致する動画が見つかりませんでした。</p>';
    }

    // レイアウトに応じたHTML生成
    $output = '';
    if ($layout === 1) {
        // 縦並びレイアウト
        $output .= '<div class="youtube-videos">';
        foreach ($filtered_videos as $video) {
            $video_id = $video['id']['videoId'];
            $title = $video['snippet']['title'];

            $output .= '<div class="video-item">';
            if ($show_title) {
                $output .= '<h3>' . esc_html($title) . '</h3>';
            }
            $output .= '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr($video_id) . '" frameborder="0" allowfullscreen></iframe>';
            $output .= '</div>';
        }
        $output .= '</div>';
    } elseif ($layout === 2) {
        // 横スクロールレイアウト
        $output .= '<div class="youtube-videos-scroll">';
        foreach ($filtered_videos as $video) {
            $video_id = $video['id']['videoId'];

            $output .= '<div class="video-item-scroll">';
            $output .= '<iframe width="320" height="180" src="https://www.youtube.com/embed/' . esc_attr($video_id) . '" frameborder="0" allowfullscreen></iframe>';
            $output .= '</div>';
        }
        $output .= '</div>';
    }

    return $output;
}

// ショートコードを登録
add_shortcode('youtube_search', 'youtube_search_shortcode');

次に、このコードを部分ごとに分解して、細かく解説します。

コードの詳細解説

ショートコード属性の設定

以下の部分でショートコードの属性を設定しています。

$atts = shortcode_atts([
    'keyword' => 'WordPress チュートリアル', // デフォルトキーワード
    'max_results' => 5,                      // 表示する動画の最大数
    'layout' => '1',                         // レイアウトタイプ（1: 縦並び, 2: 横スクロール）
    'title' => 'true',                       // タイトル表示（true or false）
    'filter' => ''                           // フィルターキーワード（,区切りでAND検索）
], $atts, 'youtube_search');
  • shortcode_atts: ショートコードで指定された引数を取得し、デフォルト値とマージします。
  • 各属性は以下の用途で使用されます：
  • keyword: YouTubeで検索するキーワード。
  • max_results: 検索結果として表示する最大動画数。
  • layout: 動画表示レイアウトを選択（1: 縦並び、2: 横スクロール）。
  • title: 動画のタイトルを表示するか否か（true/false）。
  • filter: 動画タイトルのフィルターキーワード（複数のキーワードをカンマ区切りで指定）。

YouTube APIから動画を取得

fetch_youtube_videos関数を呼び出して、YouTube APIから動画を取得します。

$videos = fetch_youtube_videos($keyword, $api_key, $max_results);
  • この関数では以下を行います：
  • 指定されたキーワードでYouTube Data APIを呼び出します。
  • 検索結果を返します。
  • ポイント: APIキー（$api_key）は予め設定しておく必要があります。

API呼び出し部分の詳細は後述します。

フィルタリング

取得した動画リストをフィルターします。

$filtered_videos = array_filter($videos, function($video) use ($filter_keywords) {
    $title = strtolower($video['snippet']['title']); // タイトルを小文字で比較
    foreach ($filter_keywords as $keyword) {
        if (strpos($title, strtolower($keyword)) === false) {
            return false; // キーワードが見つからなければ除外
        }
    }
    return true;
});
  • タイトル中にフィルターキーワードがすべて含まれるかを確認します。
  • strtolower: 大文字と小文字の違いを無視して比較。
  • strpos: キーワードが含まれていない場合に除外します。
  • キーワードが指定されていない場合（filter引数が空の場合）は、フィルタリングをスキップします。

レイアウトごとのHTML生成

レイアウト1と2で異なるスタイルのHTMLを動的に生成します。

アウト1（縦並び）

$output .= '<div class="youtube-videos">';
foreach ($filtered_videos as $video) {
    $video_id = $video['id']['videoId'];
    $title = $video['snippet']['title'];

    $output .= '<div class="video-item">';
    if ($show_title) {
        $output .= '<h3>' . esc_html($title) . '</h3>';
    }
    $output .= '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr($video_id) . '" frameborder="0" allowfullscreen></iframe>';
    $output .= '</div>';
}
$output .= '</div>';
  • 特徴:
  • 動画は縦に並びます。
  • タイトルの表示有無は $show_title で制御します。

アウト2（横スクロール）

$output .= '<div class="youtube-videos-scroll">';
foreach ($filtered_videos as $video) {
    $video_id = $video['id']['videoId'];

    $output .= '<div class="video-item-scroll">';
    $output .= '<iframe width="320" height="180" src="https://www.youtube.com/embed/' . esc_attr($video_id) . '" frameborder="0" allowfullscreen></iframe>';
    $output .= '</div>';
}
$output .= '</div>';
  • 特徴:
  • 動画は横に並び、スクロール可能です。
  • 動画サイズは小さめに設定しています（width="320" height="180"）。

ショートコード登録

add_shortcode('youtube_search', 'youtube_search_shortcode');
  • このコードでショートコード

    Youtube(自動抽出)

    WordPressの使い方！初心者向け23分で基本をおさえる
    Wordpress初心者使い方・始め方【ホームページ・ブログ作成】
    【最新版】Wordpressホームページの作り方！初心者でもゼロからできる簡単マニュアル！
    【WordPressの使い方・始め方】初心者が１日でホームページ作成する手順
    【最新有料級！】最強無料WordPressテーマ「Cocoon 」を使ったブログサイトの始め方・作り方（ドメイン/サーバー契約/初期設定/テーマ設定全て解説）
     が登録されます。
  • ページや投稿内でショートコードを使用して、動的に動画を表示できます。

CSSスタイル（必要に応じて）

横スクロールレイアウトのスタイルを調整するCSS例です。

.youtube-videos-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}

.video-item-scroll {
    flex-shrink: 0;
}
  • overflow-x: auto: 横スクロール可能にします。
  • gap: 動画間のスペースを設定します。

API呼び出し関数

APIを呼び出す fetch_youtube_videos 関数は次のように実装されています。

function fetch_youtube_videos($keyword, $api_key, $max_results) {
    $url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=' . urlencode($keyword) . '&maxResults=' . $max_results . '&type=video&key=' . $api_key;

    $response = wp_remote_get($url);

    if (is_wp_error($response)) {
        return [];
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    return $data['items'] ?? [];
}
  • wp_remote_get: YouTube APIにリクエストを送信。
  • json_decode: レスポンスを配列に変換。
  • エラー処理: API呼び出しが失敗した場合は空の配列を返します。

実行例

以下のショートコードをページや投稿に追加すると、動的にYouTube動画が表示されます。

例1: 縦並び、タイトルあり

Youtube(自動抽出)
【豪華】ツッコミどころ満載なおもしろ猫動画30連発！
おやつのおかわりを催促する子猫【かぐ告兄妹日記#25】Kittens begging for more treats.
【猫が喜ぶ映像・猫が飽きない動画】ひも・動くネコなど🐱 Games For Cats！音あり30分
【猫用動画MIX６】ひも・ねずみなど30分 GAME FOR CATS 6
先住猫にぶわぁ〜しちゃう子猫｜PECO #マンチカン #子猫 #子猫のいる生活 #アメリカンショートヘア #munchkin #kitten #americanshorthair

例2: 横スクロール、タイトルなし

Youtube(自動抽出)

これで、WordPress上でYouTube動画を検索・表示するショートコード機能が実装できました！

タイトルとURLをコピーしました