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

公開日:2015年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); ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

WordPressでフリマ(マッチング)サイトを作る 投稿者の連絡先保護

【WordPress】簡単!プラグインやテーマ編集なしでナビゲーションメニューを非表示にする方法

【WordPress】お店の紹介サイトなどでフォームを使った検索機能を追加する方法


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

Youtubeの埋め込みコードは

<iframe width=”560″ height=”315″ src=”ここにユーチューブのURL” frameborder=”0″ allowfullscreen></iframe>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

です。

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

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

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

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

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

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

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

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

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

<?php the_field(“カスタムフィールドの名前”, $post->ID); ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

を参照ください

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報