【WordPress】ACFのカスタムフィールドでYoutube動画を表示させる方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPressのACFのカスタムフィールドを使ってYoutube動画を表示させる方法をご紹介します。

以下の方におすすめです。

なんとWordPressの関数であるwp_oembed_getを使用することで簡単に実装できてしまいます。

それでは見て参りましょう!!

【WordPress】ACFのカスタムフィールドでYoutube動画を表示させてみよう！

ACFの準備から

まずはYoutube動画URL入力用のフィールドを設定していきます。

※プラグイン ACFをインストールしていない方はインストールして有効化をよろしくお願いいたします。

ACFを有効化したら、メニューの「カスタムフィールド→新規追加」でフィールドグループを作成します。

適当に「動画コンテンツ」などの名前をつけたら、「フィールドを追加」ボタンを押します。

以下のように「フィールド」、「フィールド名」、「フィールドタイプ」等を設定していきます。

フィールド名（movie_url）は後ほどテンプレートファイル内で使用します。

フィールドタイプは「URL」でも「テキスト」でも大丈夫です。

設定し終わったら、「更新」ボタンを押して変更を保存するようお願いします。

テンプレートファイルに追記

ご自身のプロジェクトに合わせてYoutube動画を表示したいテンプレートファイルにコードを追記していきます。

wp_oembed_get関数の使い方は簡単で、「wp_oembed_get(Youtube動画のURL)」という感じで使用します。

ACFのカスタムフィールドの値は、「get_field(‘フィールド名’)」で取得できます。

なので、最終的に以下のようなコードととなります。

<?php if( get_field('movie_url') ): ?>
  <?php echo $embed_code = wp_oembed_get( get_field('movie_url') ); ?
<?php endif; ?>

縦横比率を維持したままYoutube動画を表示

上述のコードだけだとYoutube動画を実際に表示した際におかしな幅になって扱いづらいのでhtmlとcssで縦横比率を自由自在に制御していきます。

先程のコードを少し書き換えます。

<?php if( get_field('movie_url') ): ?>
  <div class="Box">
    <?php echo $embed_code = wp_oembed_get( get_field('movie_url') ); ?
  </div>
<?php endif; ?>

Boxクラスを付与したdivタグで囲いました。

次に、CSSで縦横比率を維持させていきます。

こんな感じに。

.Box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.Box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

16:9の比率に維持させたいので、「9 / 16 * 100」で56.25%という値を計算して求めてBoxクラスのpadding-topの値に%で指定してやればOKです！

デザインなどに合わせて比率を変えたい場合はよしなに(^o^)

参考記事

とても助かりました。ありがとうございます！

まとめ

以上、WordPressのACFのカスタムフィールドを使ってYoutube動画を表示させる方法をご紹介しました。

実際の案件でよく使用している実装方法だし、手軽に実装できるのでぜひACFを使用する際にチャレンジしてみてくださいまし(^o^)

最後までご高覧いただきありがとうございました！