After updating to WordPress version 5.7, the cause and remedy when the internal link card (Embed card) is displayed with a citation tag

WordPressのバージョン5.7へ更新したら、内部リンクカード(Embedカード)が引用タグで表示されるようになってしまう場合の原因と対処

公開日:
WordPressのバージョン5.7へ更新したら、内部リンクカード(Embedカード)が引用タグで表示されるようになってしまう場合の原因と対処

WordPressの投稿や固定ページ本文へ段落ブロックへサイト内のURLを貼り付けるだけでカード表示される【ブログカード(内部リンクカードやEmbedカードとも呼ばれる)】機能があるのをご存じですか?

特別なプラグインを使う必要もないので、個人的にはすごくありがたい機能だと思っていますが、困ったことが発生しました。それは、WordPressを5.7へアップデート(更新)したら引用タグとして表示されてしまう現象。

それも、投稿作成時(編集画面)にはカード表示されているのに、プレビューや公開後の投稿画面のみ発生する、何とも不可解な現象が発生しました。

例えば投稿編集画面では以下のようにきちんとカード表示されているものが

公開後やプレビューで確認すると下のように「引用」で表示されてしまうのです。

WordPressのバージョン5.7へ更新したら、内部リンクカード(Embedカード)が引用タグで表示されるようになってしまう場合の原因と対処の画像|Knowledge Base

これはちょっと困った現象です。何とかせねば!

ということでいろいろ探った結果、あくまでも私自身が管理しているサイトでの自己検証ではありますが、原因と対処方法が分かりましたので、備忘録を兼ねつつ、同様の不具合で困っている方の参考になればと思い、紹介します。

この不具合は、バージョン5.7.1で解消されます。既に更新通知の来ているサイトでは、更新することで解消されます(5.7.1への更新は、その他の機能更新やセキュリティに関する更新も含まれていますので留意ください)
不具合の発生状況と解消に向けたやり取りについては「WordPress post URL oEmbed rendering blocked by iframe lazy-loading」をご覧ください。

また、この記事の方法で対処したサイトを5.7.1以降へ更新しても、私の環境で確認した限りでは、動作に問題はありませんでしたので、更新後正常動作を確認してから対応を停止すると良いでしょう。

内部リンクカード(ブログカード)が引用タグになってしまう原因

バージョン5.6.2の段階では全く不具合がなかったので、5.7にしたからということはほぼ間違いなく、複数のサイトで同様の状況になりましたので、以下のプラグインを使ってバージョン5.6.2へ戻してどうなるのかを検証してみました。

すると、やはり5.6.2では出ない現象だということが複数のサイトで試した結果、判明しました。

5.6.2と5.7とで特別に追加された機能や変更点としては、エディタ関係の利便性向上とiframeタグに対する遅延読み込み位・・でピンときました。

そうなんです。Embedカードの出力はiframeで出力されるので、遅延読み込みが影響していると確信しました。試しに以下で紹介するプラグインをひとまず使ってiframeの遅延読み込み(lazyload)機能を停止してみたら見事に解消!!原因はこれで間違いないでしょう。

内部リンクカードを正常表示させるための2つの対処方法

あくまでも私の環境での原因特定ではあるものの、恐らくWordPress5.7で追加されたiframeタグの遅延読み込み(lazyload)が原因であることは間違いないと思われますので、この機能を無効にする方法を2つ紹介します。

現時点でWordPressの公式フォーラムでは数件同様の質問が上がっていますが、標準のブログカードを利用している人が少ないからなのか?解決方法は提示されていませんが、恐らく今後のWordPress更新で何等かの対応がされると思われますので、不慣れな方はプラグインを単純に追加する方法で対処された方がよいかも知れません。

プラグインを使った解消方法

「Disable Lazy Loading for IFRAMES」という無料プラグインを使うとよいでしょう。

特に設定画面等はありませんので、インストールして有効化するだけで機能します。

テーマのfunctions.phpへ追記して対処する方法

有効化しているテーマのfunctions.phpへ以下のコードを追記することで、ページ内のiframeタグに対する遅延読み込み(lazyload)を無効にできます。

functions.phpへの追記経験がない方や不慣れな方は、上のプラグインを追加する方法で対処した方が無難です。

下記コードを挿入することにより、ページ内のiframeタグに対して遅延読み込みさせるための記述がすべて解除されます。これにより、ブログカード以外の埋め込み要素の遅延読み込みも解除されてしまうため、サイトによっては表示速度の低下やPageSpeed Insightsのスコアに影響が出ることがありますからご注意ください。

/***** iframeの遅延読み込みを停止(embedが正常に表示されない状況の回避) *****/
function ha_disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
    if ( 'iframe' === $tag_name && 'the_content' === $context ) {
        return false;
    }
    return $default;
}
add_filter('wp_lazy_loading_enabled','ha_disable_post_content_iframe_lazy_loading', 10, 3);

参考:WordPressでiframeの遅延読み込みを無効にする方法


いかがでしたか?私の場合は後者の方法で不具合は解消しました。

貴サイトでも同様の不具合が出ていて困っているようでしたら措置を施してみてください。

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

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

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