WordPressの埋め込み機能を使ってリンクを設定すると、oEmbedという機能でブログカード形式でリンクを埋め込み表示してくれます。

ブログカード形式とは、ブログの記事側で使われているアイキャッチ画像やタイトル、記事概要を取り込んで読みやすくグラフィカルにまとめてくれる埋め込み形式です。WordPressの記事以外にも、YouTubeやTwitter投稿など様々なリンクをブログカード形式で埋め込みができるので、この運営ブログでも度々活用はしておりました。

ところが、先日この運営ブログの記事を見直してみると、このブログカード形式の出力がきちんとされておらず、ほとんどが単なるリンクとなってしまっていることに気が付きました。色々と原因を調べてはみましたが、残念ながらoEmbedの謎仕様をつきとめることができず、cssで見かけだけ直すことで解決することにしてしまいました。

この記事では、WordPressのoEmbedによるブログカード形式の出力不具合について、cssで修正をした方法をご紹介したいと思います。

wordpressで利用可能な埋め込みブロックイメージ
YouTube、Twitter、WordPress記事用と色々あります。

埋め込みが表示されない状況

埋め込みしたブロックを見直していると、どうやら全部がダメになっているという状況でもないようで、YouTubeの記事埋め込みなどは正常にできているようです。

WordPressにYouTubeを埋め込み
YouTubeの埋め込みは正常に表示

ダメになっているのは他の記事への埋め込みリンクだけという状況のようです。

Chrome DevToolsでブラウザ表示とElementsを見てみると、下の画像のような状態です。<blockquote>で囲まれた記事へのリンクだけがブラウザに表示され、肝心のブログカード形式でリンク先を表示するiframeは存在するもののブラウザの表示にはありません。

WordPressで埋め込みブログカードがうまく表示されない
<blockquote>の記事リンクだけ表示

埋め込み表示のiFrameは存在するが非表示に

どうやら、埋め込みブログカード用のiFrameにはcssで非表示設定が付いているようです。

何故に?

そこまでプラグインを多く使っていないですが、何かのプラグインでiFrameに非表示設定をするような行儀悪いものが存在しているのかもしれないです。

element.style {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
}
WordPressの埋め込みブログカード用iFrameに非表示設定がされた
iFrameにclip: rect(1px, 1px, 1px, 1px);が付いています

怪しいプラグインを停止する

プラグインはそれほど多く使ってませんでしたが、最近試しに追加してみたものはありました。「WP Super Cache」です。キャッシュも絡むのでこれ一番怪しいとは思い早速無効化して様子を見てみましたが、残念ながら特に変わるところはありませんでした。

参考サイトを発見

他のプラグインも止めてチェックしようと思ったものの、それも面倒なので、似たような症状に悩む人がいないかと調べてみたところ、埋め込みブログカードリンクが表示されない現象を色々調べてあるブログを発見できました。

こちらの方によれば、キャッシュ絡みをなんとかすればだいたい解決するだろうとのことですので、再度キャッシュを色々と見てみることにしました。

さて、埋め込みのブログカードについての問題点、第一段階は各種キャッシュのクリア、第二段階はカスタムフィールドのキー”_oembed_”の削除、これで大体解決しました。

「ブログカードの表示が変よ」の記事より

テーブル:wp_postmeta

どうやらoEmbedはカスタムフィールド用テーブル「wp_postmeta」に埋め込みカード用のキャッシュを貯め込む動きらしいので、早速テーブルを覗いてみました。

wp_postmetaメタデータという各投稿記事特有の情報を格納。カスタムフィールドとして使用するほか、各投稿に情報や設定を付加するようなプラグインが、その情報を当テーブルに追加することがある。
WordPress公式のテーブル説明

_oembed_****のデータが多数存在

「_oembed_」で始まるデータが生成されてるらしいので調べてみたところ、山ほどありました。200レコードくらいキャッシュが取られているようです。埋め込み自体はそんなにないはずですが。

SELECT * FROM 'wp_postmeta' WHERE meta_key LIKE '%_oembed%'
WordPressのwp_postmetaテーブルに生成されたoEmbedのキャッシュらしきデータ

データを見ると、meta_valueにきちんと記事リンク<blockquote>があるものも見られますが、「{{unknown}}」なる怪しい表記のものも結構あり、oEmbedは結構適当な動きをしていそうだなということがログから見て取れました。

このあたりのデータもズバっと削除をしてみましたが、残念ながらまだ変わらずの状況でした。

CSSで見た目だけ直してしまう

結局、最後はCSSで解決してしまいました。根本解決を期待されてた方には申し訳ありません。

先ほどのブログの方も同様の結論に達して自虐的な苦言を申されておられましたが、仰る通りで、このどこかスッキリしないところがあるのはWordpressの嫌なところです。

競合やスクリプトの修正といった真の問題点から目を反らし、結果である見た目だけを強制的に操作、何も問題がないふりをいたします。このような手口はまるで日本政府、悪党の思想ですが、悪意がなくても稚拙で無能力者、愚鈍で近視眼的な視点しか持たぬ低脳であった場合も同じ手口を取ります。なんだやっぱり日本政府と同じか。

「ブログカードの表示が変よ」の記事より

見た目だけ直すとなったら早いもので、<blockquote>に非表示設定を付けてあげて、逆にclip: rect(1px, 1px, 1px, 1px);で切り抜き非表示にされたiFrameをposition:relativeでclipを無効にしてあげて復活させておきました。

blockquote.wp-embedded-content {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}
iframe.wp-embedded-content {
  position: relative !important;
}

無事ブログカードが復活しました

見かけだけですが、とりあえずブログカード形式でリンクが表示されるようになりました。紹介していたプラグインへのリンクもブログカード形式できちんと表示されておりました。見かけだけですが。

おわりに

WordPressの管理画面で記事作成中に他の記事へのリンクを埋め込みしようとすると、下のように<blockquote>で囲まれた記事へのリンクとiFrameのブログカードがでてきます。

これが公開記事では<blockquote>だけ非表示にするという動きが正常でしょうが、何が原因かこれが逆になってしまっているという状況ですが、結局わからずじまいでした。

WordPress管理画面で埋め込みリンクを作成した時の表示
管理画面ではこんな感じです

CSSで見かけだけ直しは仕事だとしょっちゅうやってしまってますが、まさかここでもやることになるとは思いませんでした。そのうちWordPressのバージョンアップでまた表示がバグるとかありそうですが、当面これで様子見しようと思います。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。