WordPress への YouTube 動画の埋め込み(が上手く反映されないのでまいっている)が,解決した。

2021年4月2日

WordPress の Gutenberg(グーテンベルク)では,
YouTube の URL を入力するだけで,自動的に動画が埋め込まれる。

例えば,下の通りである。

このようになる,はず。

しかし,実際に表示させようとしたところ,YouTube へのリンクが表示されるのみで,埋め込み動画にならない。

出力されるソースコードは下の通り。

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=rjlJ1hkVMFQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    https://www.youtube.com/watch?v=rjlJ1hkVMFQ
  </div>
</figure>
<!-- /wp:embed -->

これが,正しく動いていると,”wp-block-embed__wrapper” 以下が,自動で <iframe> タグで生成され,YouTube のウインドウが生成される。

試したこと

・プラグインの無効化(Jetpack)

・functions.php の修正
 →WordPress の theme.css や style.css を読み込むように,あらためて明示。
  しかし,そもそも読み込んでいたため,変化なし。
参考:WordPress:Gutenberg用CSSを読み込んだり設定する方法

・webpack の見直し
 →バージョンを上げたが,変化なし

・WordPress 自体の再インストール
 →効果なし

・別の YouTube 動画を読み込み
 →同じく iframe が生成されない

どこが問題なんだろう。

oEmbedというのがキーらしいが,どうもこれがうまく動いていないのか。
それが動くまでの JavaScript でコケているのか。
しかし,すべてのプラグインを切ってもコケるので,やはり問題が分からない・・・。


ちなみに,ここでコンソールにTESTと出力するスクリプトを書くと動く。

<script type="text/javascript">
console.log("TEST");
</script>

うーん,JavaScript がコケているわけではないのか?


【解決編】

PHPの書き方が原因でした。

最初は,下のように書いていました。

$content = get_the_content();
echo "<div class='content'>${content}</div>";

が,ふと,「この,get_the_content() を echo してるのが問題じゃね?」ってことで,下のように修正。

echo "<div class='content'>";
the_content();
echo "</div>";

これで,oEmbed が動くようになりました。
記事の内容は,変数に格納するのではなく,そのまま出力すべし。
WordPress の機嫌を損ねる場合がある。

ちなみに,ショートコードもうまく動かない。

ショートコードの動作も確認しました。

「中国女」を聴いて落ち着きましょう。


 カテゴリ一覧

 雑談(170)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(33)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)