WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】投稿や固定ページへYoutubeなどの動画を挿入する方法いろいろ

公開日:2015(平成27)年10月19日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

本当に便利なカスタムフィールドプラグイン「Advanced Custom Fields」。投稿フォームづくりができるこのAdvanced Custom Fieldsプラグインを使っていて、「Youtube」などの動画コンテンツとのリンク(再生画面)を挿入したいと思ったので試した方法について備忘録。

通常WordPressでは、投稿画面にYoutubeなどの動画URLを張り付けると自動的に動画として判断してくれて、再生画面が表示されるのですが、「Advanced Custom Fields」を使ってURLを表示させると・・・URLがそのまま表示されてしまうという現象が発生します。具合悪いですね~。これを解消する方法を3つ紹介します。サイトに合った方法を試してみてください。

1.最も単純な方法

テキストフィールドに入力した値を記事の中に挿入するには

<?php the_field("カスタムフィールドの名前", $post->ID); ?>

を使うのはご存じですよね。

これを使って単純に動画を挿入するには・・・

Youtubeなどの動画の下にある「共有」ボタンをクリックして「埋め込みコード」タブをクリックすると動画を埋め込むためのコードが表示されるので、これをAdvanced Custom Fieldsのテキストフィールドに張り付けて表示させる

これが一番スムーズな方法です。この方法ではテキストフォームの「デフォルト値」が設定できるので、動画がない場合は自動的にデフォルト値に入力してある値が表示されます。

ただ、これだといちいちユーチューブ側で埋め込みコード画面を出す手間が出てしまうのでちょっと面倒。ということで次の方法

2.タグ部分は投稿に含んでおいて、URLだけを入力する

Youtubeの埋め込みコードは

<iframe width="560" height="315" src="ここにユーチューブのURL" frameborder="0" allowfullscreen></iframe>

です。

この「ここにユーチューブのURL」部分だけをAdvanced Custom Fieldsのテキストフィールドに入力して表示させる方法です

テキストフィールドの使い方は上の項と同じですが、これなら動画そのもののリンクURLをコピペするだけで挿入することができます。

ただ、この方法だと何も入力しないとiframeで指定された大きさの白い枠だけが表示されてしまうので、がらーんとスペースが開いてしまって格好悪い。

そこで次の方法(私はこの方法にしました)

QA AnalyticsQA Analytics

3.プラグインのためのプラグインを使う

何かいい方法はないのかなぁとぼんやりプラグインの検索をしていたら・・・

なんと「Advanced Custom Fields」に追加するプラグインがありました。
「Advanced Custom Fields: oEmbed Field」というプラグインです(というかAdvanced Custom Fieldsの拡張プラグインです)。

これをインストールして有効化すると、カスタムフィールドの設定画面の「フィールドタイプ」に「oEmbed」という項目が表示されるようになります。

フィールドタイプを「oEmbed」にしたらあとは挿入時のサイズなどなのでとりあえずそのままにして、投稿のフィールドにYoutubeの動画URLを挿入。
普通通り

<?php the_field("カスタムフィールドの名前", $post->ID); ?>

を挿入してみたら・・・ちゃんと動画の再生画面が表示されました。

しかも2の場合にあったようなエラー(空白)問題も解消され、入力が無ければその部分が上に詰まるようになります。
空白が上に詰まってくれるなら、カスタムフィールドと表示するコードをあり得る数(3個とか)作っておいて、複数の動画の再生画面を表示することも格好良くできるようになります。これは使えそうです。

ぜひ試してみてくださいね。

リンクではなく、スマホで撮影した動画をアップロードして表示する方法は

スマートフォンで撮影した動画をWordPressへアップロードして投稿などへ挿入する方法

を参照ください