こんにちは。
ゆうや(@yuyaphotograph)です!
本記事では、WordPressのACFのカスタムフィールドを使ってYoutube動画を表示させる方法をご紹介します。
以下の方におすすめです。
管理画面からYoutube動画のURLを入力するだけで縦横比率を維持したまま表示させたい…!!
なんと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(‘フィールド名’)」で取得できます。
なので、最終的に以下のようなコードととなります。
縦横比率を維持したままYoutube動画を表示
上述のコードだけだとYoutube動画を実際に表示した際におかしな幅になって扱いづらいのでhtmlとcssで縦横比率を自由自在に制御していきます。
先程のコードを少し書き換えます。
Boxクラスを付与したdivタグで囲いました。
次に、CSSで縦横比率を維持させていきます。
こんな感じに。
16:9の比率に維持させたいので、「9 / 16 * 100」で56.25%という値を計算して求めてBoxクラスのpadding-topの値に%で指定してやればOKです!
デザインなどに合わせて比率を変えたい場合はよしなに(^o^)
参考記事
とても助かりました。ありがとうございます!
参考 youtube動画をWordPressのカスタムフィールドで挿入したいnote for codingまとめ
以上、WordPressのACFのカスタムフィールドを使ってYoutube動画を表示させる方法をご紹介しました。
実際の案件でよく使用している実装方法だし、手軽に実装できるのでぜひACFを使用する際にチャレンジしてみてくださいまし(^o^)
最後までご高覧いただきありがとうございました!