WordPress で愛用している Pz-LinkCard プラグインの生成するリンクカードの画像タグに、width や height 属性が無いことに気づき、子テーマのPHPファイルにこれらを追加する処理を追加してみました。
Google PageSpeed Insights計測結果による指摘
ブログ内の個別投稿記事をGoogle PageSpeed Insightsで診断していると、 width や height 属性の無い <img> タグがあると、怒られるのが以前より気になっていました。
図1.画像要素のサイズ属性未指定
挙げられている画像はいずれも、WordPress記事中のリンクをカード表示してくれる、Pz-LinkCardプラグインが生成したサイトサムネイル画像でした。
ちなみに、使用中のPz-LinkCardプラグインのバージョンは v2.5.3.1、WordPressはv6.4.4を使用しています。
プラグインの設定と実際のタグを確認
WordPress管理画面でPz-LinkCardプラグインの設定を見てみると、まず表示タブのレイアウト項で当該タグのレイアウトに関する設定があり、
図2.Pz-LinkCard表示設定
外部リンク、内部リンク各タブには、取得するサムネイルの大きさと代替テキストがありました。
図3.Pz-LinkCard外部リンク設定
図4.Pz-LinkCard内部リンク設定
この代替テキストはデフォルトでは空っぽなので、画像要素にalt属性が無いことを指摘するSEO系プラグインなどが多いことから、適当な文字列を入れて回避しています。
Pz-LinkCardによって生成される <img> タグは、実際には以下のようになっています。
|
1 2 3 |
<figure class="lkc-thumbnail"> <img decoding="async" class="lkc-thumbnail-img" src="//servercan.net/blog/wp-content/uploads/2022/06/dc447eb25cf3034864c5cf449e63690f-150x150.jpg" alt="Loading..."> </figure> |
代替テキストはプラグイン設定を反映するものの、サイズ属性は見当たりません。
暫定）プラグインのPHPファイルを改変
そこで、このタグを出力するプラグインのPHPファイル pz-linkcard.php を覗いて、見つけたのは次の2箇所。
|
1 2 3 4 5 |
[821行目] $html_thumbnail = '<img class="lkc-thumbnail-img" src="'.$thumbnail_url.'" alt="'.$thumbnail_alt.'" />'; [821行目] $html_thumbnail = '<img class="lkc-thumbnail-img" src="'.$temp.'" alt="'.$thumbnail_alt.'" />'; |
改変に当たり、このPHPファイルの冒頭にある変数定義から、サムネイルサイズを表わすと思われる変数を参照すると共に、遅延読み込みの属性も付与してみました。
|
1 2 3 4 5 |
[821行目] $html_thumbnail = '<img class="lkc-thumbnail-img" width="'.$this->options['thumbnail-width'].'" height="'.$this->options['thumbnail-height'].'" loading="lazy" src="'.$thumbnail_url.'" alt="'.$thumbnail_alt.'" />'; [821行目] $html_thumbnail = '<img class="lkc-thumbnail-img" width="'.$this->options['thumbnail-width'].'" height="'.$this->options['thumbnail-height'].'" loading="lazy" src="'.$temp.'" alt="'.$thumbnail_alt.'" />'; |
もちろん、プラグインがアップデートされると上書きされてしまうので、この措置ではあくまで暫定的。
恒久）子テーマのfunctions.phpで画像属性追加
恒久的には、プラグインファイルを触ることはせず、小テーマの functions.php でフィルターフック the_content を使って、必要な属性を追加することとしました。
|
1 2 3 4 5 6 7 8 9 |
// Pz-LinkCard Thumbnail Dimension Attribute Insert add_filter('the_content', function ($content) { if( !is_admin() && is_single() ){ $lkcThumbBefore = 'class="lkc-thumbnail-img" src="'; $lkcThumbAfter = 'class="lkc-thumbnail-img" width="100" height="108" loading="lazy" src="'; $content = str_replace($lkcThumbBefore, $lkcThumbAfter, $content); } return $content; }, 12); |
add_filter 関数の終わりの引数はプライオリティの指定で、デフォルトは 10 。対して、ショートコードは 11 のプライオリティで実行されるので、それよりも後で実行されるように 12 を指定しています。
謝辞
本件調査の過程で、過去に <img> タグにサイズ属性を追加していたと思われるツイートを見つけ、
https://twitter.com/popozure/status/1389904530737975297
何か不具合でもあったのかなと不思議に思い、作者さまへ問い合わせてみたところ、突然にもかかわらず確認から修正までトントン拍子に対応頂きました。
https://twitter.com/popozure/status/1791799837052297346
この場を借りて、厚く御礼申し上げます。
追記）Pz-LinkCard v2.5.4で織り込み
Pz-LinkCard v2.5.4がリリースされたので早速更新。一旦、 functions.php に施した処理を無効化し、プラグインが生成する <img> タグにサイズ属性が追加されているのが、確認できました。
|
1 2 3 |
<figure class="lkc-thumbnail"> <img decoding="async" class="lkc-thumbnail-img" src="/blog/wp-content/uploads/2022/06/dc447eb25cf3034864c5cf449e63690f-150x150.jpg" width="100px" height="108px" alt="Loading..." /> </figure> |
functions.php は、loading=”lazy”を挿入するだけの処理に変更しておきました。
|
1 2 3 4 5 6 7 8 9 |
// Pz-LinkCard Thumbnail Dimension Attribute Insert add_filter('the_content', function ($content) { if( !is_admin() && is_single() ){ $lkcThumbBefore = 'class="lkc-thumbnail-img"'; $lkcThumbAfter = 'class="lkc-thumbnail-img" loading="lazy"'; $content = str_replace($lkcThumbBefore, $lkcThumbAfter, $content); } return $content; }, 12); |
