ウェブサイト実験
Web勉強中おじさん
WordPressのembed機能で表示される記事サムネイル画像が荒いのを直す
お題：embed機能で表示されるサムネイル画像がときどき荒いので直す
記事の中にURLを張り付けるだけでサムネイルや抜粋をいい感じで表示してくれるembed機能について。
Wordpressには標準でaタグなどではなくURLを記載するだけで、そのURLの情報を引用してくれるembed機能が備わってます。
そのembed機能で表示されるサムネイル画像がやたらと荒いことがたまにあります。
今回はその画像が荒い問題を解消してほしいとの依頼が来たので、備忘録も兼ねて解消方法を。
問題の発生原因
embed機能は見た目は引用っぽい感じなんですが、コード的にはiframeで対象URLの情報を表示する機能になっています。
問題の発生箇所はサムネイル画像なので、iframeで引っ張ってきている先のコードを確認し、問題が発生しているものと問題が発生していないものの違いを探します。
見てみると、問題が発生しているものでは、imgタグ内のwidthとheightの値がやたら小さい値に設定されていました。50とか。
そらぁ50pxとかの画像を引き伸ばしたら画像も荒くなりますよ。
問題の解消
embed機能で引っ張ってくる情報・データの取得や成形を担っているのはだいたい以下のファイルたちな感じ
- /wp-includes/embed.php
- /wp-includes/embed-template.php
- /wp-includes/theme-compat/embed.php
- /wp-includes/theme-compat/embed-content.php
で、今回一番大事なのが一番下のembed-content.php
こいつがいろいろ情報を取得・加工してくれてます。
今回の問題では画像のサイズが悪さをしてたので、サムネイル画像のサイズ周りを確認
wp_get_attachment_metadataっていう関数でサムネイル画像の情報を取得している模様
foreachでサムネイル画像が持ってるサイズ関連の情報を後々使う変数に合う形で格納しています。
foreachで情報を集めてくるもんだから、極端にwidthが小さいようなものも律儀に取得して格納します。
これが悪さをしていると確信。
なので、foreach文の中にif文で情報を取得する条件（今回だったらwidthの値が299よりも大きい）を設定してあげて完了。
無事に荒くないサムネイルが表示されるようになりました！！The following two tabs change content below.
最近のコメント