WordPressでiframeが表示されない（解決）

タイトルは正確ではありません。WordPressでの iframe 関連のトラブルではあるのですが、表示されないのではなく、表示が iframe で止まってしまい、それ以降表示されないトラブルです。また、かなり特殊なケースですので、仮に同じ症状が出る場合でもあまり参考にはならないかもしれません。

• iframe 以降表示されない症状
• 原因と解消方法
  • 原因
  • 解消方法

01iframe 以降表示されない症状

次の記事があります。テキストブロックの間に GoogleMap のコードをカスタムHTMLで入れています。

問題なければ次のリンク先のように表示されるはずです。

• 問題のない表示

ところが次のように GoogleMap 以降表示されません。スクロールバーも含めてキャプチャしましたので iframe で止まっていることがよくわかると思います。

02原因と解消方法

以前から気づいていたのですが、調べている時間がなく、とりあえず GoogleMap はリンクで済ませていました。で、今回調査して解消しました。

原因

原因は自作の関数でした。

目次を自動で挿入するために記事をスクレイピングして見出しタグ h2〜 を取り出す作業をしているのですが、記事を XPath として評価する際に iframe が空要素となっている場合 <iframe **** /> と変換されてしまうためでした。

その関数の記事はこちらです。

WordPress：目次をプラグインなしで自動作成、自動表示する

なぜこれに気づかなかったかは、これまた原因不明なんですが、記事編集画面では <iframe ***></iframe> と終了タグがちゃんと入っているのです。なのに、公開記事のソースでは

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d46382.49424228554!2d3.6835437!3d43.3998964!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1658909195241!5m2!1sja!2sjp" width="650" height="366" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"/>

となっています。これもまた調べなくてはいけません。

解消方法

現在のところ消極的な方法ですが、<iframe></iframe> の間にテキストを入れて空要素を解消しています。

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d46382.49424228554!2d3.6835437!3d43.3998964!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1658909195241!5m2!1sja!2sjp" width="650" height="366" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"><a href="https://goo.gl/maps/eUknoGe3KERFhkof" target="_blank" rel="noreferrer noopener">Google Map</a></iframe>

たとえばこんな感じです。

関数の方でなにか解決方法を考えなくてはいけません。

（2022.9.1）Gutenberg ブロックで書かれた記事対応の新しい目次作成記事があります。

WordPressに目次（プラグインなし、保存型）