コードだけで解決！ワードプレスとYouTube Data APIの連携術

この記事を見てわかること

プラグインを使わずにワードプレスでYoutue Data APIから動画を取得し表示する方法

お客様

D社様 広報担当
メディア系
従業員10名

背景

自社管理のyoutubeチャンネルの最新動画をHPに表示させたい。
社内に技術者がいないため方法がしりたい。

提案

プラグインを使用することでyoutubeチャンネルの動画を連携することが可能。
連携にはYoutube Data APIのキーが必要。（※この記事でAPIキーの取得に関する手順は省きます）

課題

HPを管理するワードプレスのバージョンが古いためプラグインを使用できない。
そのためテーマファイルエディタにてソースコード修正を実施し対応する必要がある。

対応

1. テーマの functions.php ファイルを編集する

ワードプレスの管理画面から、使用しているテーマの functions.php ファイルを開き、以下のコードを追加します。

    function get_latest_youtube_videos() {
        // キャッシュキーを設定
        $transient_key = 'latest_youtube_videos';

        // キャッシュからデータを取得
        $cached_videos = get_transient($transient_key);

        // キャッシュが有効な場合、そのデータを返す
        if ($cached_videos !== false) {
            return $cached_videos;
        }

        // APIキーとチャンネルIDを設定
        $api_key = 'ここにAPIキーを入力する';
        $channel_id = 'ここにチャンネルIDを入力する';
        $max_results = 5;

        // YouTube Data APIのURLを設定
        $api_url = "https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId={$channel_id}&maxResults={$max_results}&key={$api_key}";

        // cURLを使用してAPIリクエストを送信
        $response = wp_remote_get($api_url);

        // エラーチェック
        if (is_wp_error($response)) {
            return;
        }

        // レスポンスボディを取得
        $body = wp_remote_retrieve_body($response);

        // JSONをデコード
        $data = json_decode($body, true);

        // 動画の情報を取得
        $videos = array();
        foreach ($data['items'] as $item) {
            if (isset($item['id']['videoId'])) {
                $video_id = $item['id']['videoId'];
                array_push($videos, "https://www.youtube.com/embed/{$video_id}");
            }
        }

        // データをJSON形式にエンコード
        $videos_json = json_encode($videos);

        // データを30分間キャッシュに保存
        set_transient($transient_key, $videos_json, 30 * MINUTE_IN_SECONDS);

        return $videos_json;
    }

    // AJAXリクエストを処理する
    function handle_ajax_request() {
        $videos = get_latest_youtube_videos();
        echo $videos;
        wp_die();
    }
    add_action('wp_ajax_get_latest_youtube_videos', 'handle_ajax_request');
    add_action('wp_ajax_nopriv_get_latest_youtube_videos', 'handle_ajax_request');

    // ショートコードを作成
    function youtube_videos_shortcode() {
        ob_start();
        ?>
        <script>
            var container = document.getElementById('youtubelist');
            container.innerHTML = ''; // 既存の内容をクリア
            document.addEventListener('DOMContentLoaded', function() {
                fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=get_latest_youtube_videos')
                   .then(response => response.json())
                    .then(item => {
                        item.forEach((element, index, self) => {
                            console.log(element)
                            var iframe = document.createElement('iframe');
                            iframe.src = element;
                            iframe.width = '560';
                            iframe.height = '315';
                            iframe.frameBorder = '0';
                            iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
                            iframe.allowFullscreen = true;
                            var li = document.createElement('li');
                            li.appendChild(iframe);
                            container.appendChild(li);
                        });
                    });
            });
        </script>
        <?php
        return ob_get_clean();
    }
    add_shortcode('youtube_videos', 'youtube_videos_shortcode');

2. APIキーの設定

上記コードの $api_key にご自身のYouTube Data APIキーを設定してください。

3. ショートコードの使用

新着動画を表示させたいページや投稿に以下のショートコードを追加してください。

　[youtube_videos]


　直接phpファイルに記述する場合は以下のように記述する
　<?php echo do_shortcode('[youtube_videos]'); ?>

また、動画を表示させるためのコンテナをHTMLに追加する必要があります。例えば、以下のようにします。

　<div id="youtubelist"></div>

お客様の声

抱えていた課題の解決に繋がり、大変たすかったとコメント頂けました。

この記事をご覧の方で、何かお力になれることがあればぜひご連絡ください。