カスタムフィールド内のyoutubeのURLをショー度コードで埋め込む

2024年4月14日 10:34

wordpressの記事内にyoutube動画を埋め込みたいってのは良くあることですよね。でも今回のは非常にごく一部だけに刺さる内容です。大多数の方は「いらない機能」です。

でもたくさんの記事を管理する人には結構お勧めできます。「指定した位置に動画を埋め込みたい」ってこと、あると思います。商品カタログなどでタイトルの真下に必ず動画を埋め込みたいときとか。

カスタムフィールドを使おう

そんな時はカスタムフィールドという機能を使います。詳細は省きますが、いわゆるその記事だけのメモというか付箋を貼っておけるんですよね。
タグと違ってサイトの訪問者からは見えない部分ですので、いわゆる管理目的に使ったり、記事のフィルタリングのためのラベルにしたり、あるいは今回みたいなテンプレート的な記事の値の格納のために使ったりできます。

ただそのままだと表示できないんですよね。プラグインとかもあるんですが小回りが利かないとか機能が多すぎて。

ってことで自分で実装する

以下のコードをwordpressのメニューから「外観」→「テーマファイルエディター」→今使っているテーマを選択します。
CocoonならCocoon Childで。他のテーマは使ってないので分かんないです。

あとは以下のコードを貼り付けるだけ。

//----------------------------------------------------------
// カスタムフィールドでyoutube動画を埋め込む
//----------------------------------------------------------

function CF_youtube_umekomi_shortcode() {
    $youtube_url = get_post_meta(get_the_ID(), 'youtube', true);
    
    if (!empty($youtube_url)) {
        // YouTubeのURLを正規表現でチェックし、必要に応じて置換
        if (preg_match('/^https:\/\/www\.youtube\.com\/watch\?v=(.+)/', $youtube_url, $matches)) {
            $youtube_url = 'https://www.youtube.com/embed/' . $matches[1];
        } elseif (preg_match('/^https:\/\/youtu\.be\/(.+)/', $youtube_url, $matches)) {
            $youtube_url = 'https://www.youtube.com/embed/' . $matches[1];
        }
        
        $embed_code = '<iframe width="560" height="315" src="' . esc_url($youtube_url) . '" 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>';
        return $embed_code;
    }
    
    return '';
}
add_shortcode('CF_youtube_umekomi', 'CF_youtube_umekomi_shortcode');

貼り付けたら忘れず「保存」しましょう。

早速使ってみよう

記事内のカスタムフィールドに名前を「youtube」、値をその動画のURLアドレスを入力して「新規追加」します。

あとは埋め込みたい場所に

[CF_youtube_umekomi]

と入力するだけ。

＞＞実装例はこちら。

カスタムフィールド？？どこ？？って方は以下の設定を

記事投稿画面の設定（画面右上）から開いていくと「カスタムフィールド」の設定があります。ＯＮにすることで編集が有効化されます。

直接埋め込んだほうが楽じゃないの？？

今のyoutubeってシェア機能が充実してますからね。埋め込みコード生成して貼り付けるか、いっそURLだけ放り込むだけでもしっかり表示されるんですよね。

でも例えばこれが数十記事、数百記事となったらどうでしょうか？1個1個管理するのは大変です。

ですのでスプレッドシートに記録しておくんです。これらのカスタムフィールドを。

カスタムフィールドに入れておくことでCSVインポートを行うプラグインを使う事で一斉に更新することが可能となります。

その部分だけ置き換わるので記事自体は触らず動画だけ書き換えるという寸法なんですよね。1個1個、記事を開いて編集しなくてもいいんです。

お約束

※コードの編集は自己責任で

この記事が気に入ったらサポートをしてみませんか？