WordPressの埋め込みカードが表示されない問題を解決 oEmbed

WordPressの埋め込みカードが表示されない問題を解決 oEmbed

記事にリンクを貼った時に自動で埋め込みカードとして生成してくれる機能がWordPress4.4以降から標準で搭載されています。

それがなんらかの原因でうまく機能しない問題が発生したので解決方法を紹介します。

 

  1. oEmbed有効化に必要なソースコードを確認する。
  2. 足りないソースコードをheader内に追加する。

 

ネットで検索してみるとその原因に、

  • プラグインTinyMCE Advancedと相性が悪い(Pタグの自動除去停止機能)
  • iframeタグが有効にならないケースがある(管理権限レベル)

などが見つかりました。

私の管理権限レベルは問題無しでTinyMCE Advancedを利用していたのでこれが原因か?と思い停止させて確認してみたところ変化がなく埋め込みが表示されませんでした。

全てのプラグインを停止させてもダメだったのでプラグインが原因ではなさそうでした。

 

次にテーマをWordPressデフォルトのTwentySeventeenに変更して確認しました。
するとoEmbedが機能して上手く埋め込みカードが表示されていました。プラグインは普段使っているものを有効にしていたのでTinyMCE Adcancedが原因ではなさそうです。

 

次にTwitterやYoutubeの埋め込みが機能しているか確認しました。

こちらは自作テーマでも問題なく埋め込みが表示されていました。

 

私の環境で起こった問題をまとめると、

  • WordPressで作られたページだけ埋め込みが機能しない。
  • 埋め込みは普通のリンクになり、<blockquote>で囲われている。
  • TwentySeventeenでは問題なく埋め込みカードが表示される。
  • プラグインを全て停止させても変わらない。

という感じでした。これに当てはまる人には今回の記事は役に立つかもしれません。

 

 

oEmbed有効化に必要なソースコードを確認する。

具体的には以下のコードが問題のあるページのソースコードに含まれているか確認してください。環境によってパラメータは変わるのでembedで検索をかけてみてください。

<link rel='https://api.w.org/' href='http://自分のドメイン/wp-json/' />
<link rel="alternate" type="application/json+oembed" href="http://自分のドメイン/wp-includes/oembed/1.0/embed?url=独自のパラメータ" />
<link rel="alternate" type="text/xml+oembed" href="http://自分のドメイン/wp-includes/oembed/1.0/embed?url=独自のパラメータ" />
<script type='text/javascript' src='http://自分のドメイン/wp-includes/js/wp-embed.min.js'></script>

 

これは<?php wp_head(); ?>で呼ばれるソースコード類です。4つの内どれかが無い場合oEmbedが有効化されません。

私の場合/wp-includes/js/wp-embed.min.js?ver=4.8.2が読み込まれていませんでした。これがWP_APIのバグなのか、別のところで干渉しているのかは今回は確認できませんでした。wp_head()でwp-embed.min.jsだけが読み込まれない。

 

 

足りないソースコードをheader内に追加する。

<script type="text/javascript" src="http://自分のドメイン/wp-includes/js/wp-embed.min.js?ver=4.8.2"></script>

をheader.php内に追加して読み込ませることでoEmbedを有効化することで無事に埋め込みカードを表示させることが出来ました。

 

       ____
     /⌒  ⌒\
   /  癶   癶 \
  /::::::⌒(__人__)⌒::::: \ コメント待ってるよー
  |     |r┬-|     |
  \      `ー'´     /

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。