WordPressテーマ「JIN」のヘッダー画像のimg要素にwidth、height、loading属性を付与する方法をご紹介します。
もくじ
ヘッダー画像読込時にレイアウトがガクッと動く
昨今はJINもユーザーの体感表示速度の改善に力を入れているようで、アイキャッチ画像やサムネイルにはwidth、height、loadingが付与される変更が行われました。
しかし、なぜかヘッダー画像にはついていません。難易度としてはそんなに変わらないはずなのに、なぜつけなかったのか謎です。
そうすると、ページ表示時にヘッダー画像の領域を事前に確保できないので、途中でレイアウトがガクッと動いてしまい、読者にとっては大きなストレスになります。
私のサイトではこれらの大切な属性を付与することに成功しました。よければChromeのデベロッパーツールなどで私のサイトのトップページにあるヘッダー画像のimgタグを調べてみてください。
すぐ思いつく方法としては、親テーマか子テーマの対応するファイルのimg要素に表示したい画像のheight、widht、loadingを書き込んじゃうことです。でも、もし画像のサイズを変えたらいちいちテーマのファイルも変更しなければいけません。
私の方法では、しっかり画像のサイズを取得して記載するプログラムになっています。今回はこの方法をご紹介します。
JINヘッダー画像にwidth,height,loadingを付与する手順
3つのステップの手順になります。順を追って説明します。
1. あるプラグインをインストール
以下のボタンからダウンロードできるプラグインをダウンロードし、あなたのワードプレスにインストールしてください。プラグインはzipファイルになっています。以下のボタンから無料でダウンロードできます。
ダウンロードしたzipファイルをWordPressの管理画面からアップロードしてインストール有効化します。プラグイン名は「Get Attachment Id」です。詳しいやり方は次の記事をご覧ください。
気になる方のためにお伝えしておくと、このプラグインはこれから行う子テーマに記述する処理で使われる関数を定義しています。子テーマに直接記載しても良かったのですが、この関数は私が作った他のプラグインでも利用しているため、単独のプラグインとして切り出しました。
2. 子テーマのfunction.phpに追記
本手順では子テーマを利用します。子テーマの作り方はネットに情報がたくさんあるので調べてみてください。子テーマのfunctions.phpに以下を追記します。
|
1 2 3 4 5 6 |
//make width, height and loading attr by img url. function make_whl_by_img_url($device = 'pc'){ $url = $device == 'sp' ? get_the_top_image_url_sp() : get_the_top_image_url(); $meta = wp_get_attachment_metadata( get_attachment_id($url)); return image_hwstring($meta['width'], $meta['height']) . 'loading="lazy"'; } |
スポンサーリンク
3. 子テーマにheader-image.phpを配置
以下をクリックして表示されるコードを保存してください。
このコードを子テーマ内に
include/head/header-image.php
というパス、ファイル名でアップロードしてください。
パスとファイル名が間違っていると動作しません。これは親テーマ側のパスと対応しています。
これで完了です。Chromeのデベロッパーツールなどであなたのサイトのヘッダー画像のimg要素を確認してみてください。
JINバージョン: 2.650で動作確認。
JIN専用のプラグイン他にも作ってます
JINで使える便利なプラグイン他にも作っていますのでご覧ください。
カッテネもおすすめ
ちなみに、3000サイト以上にご利用いただいているカッテネというWordPressプラグインも以前作りました。以下のような商品リンクを作るプラグインです。
こちらはJINはもちろん、それ以外のテーマにも対応しています。また、人気が出たので公式のプラグインとして申請したので、ボタン１つでインストールできます。無料なので使ってみてください。
増え続けるプラグイン問題への回答
プラグイン無しにはWordPressの運用はできないと思います。私のように、細かい追加機能を自分でプラグインとしてプラグラミングしてしまう人は当然ですが、そうでない人でも、管理画面のプラグイン一覧に数十個並ぶのも普通なのではないでしょうか。
そうすると、非常に見づらくなり、管理しづらくなります。そこで超役立つプラグインがPlugin Groupsというプラグイン。Pluginをグループに分けられ、グループごとに表示できます。例えば、私が作ったプラグインを複数使っている方なら、「WebFood」などとグループを作ってそれに入れてもいいかもしれません。ちなみに、タグのように複数のグループに所属させることが可能なので、柔軟に分類することができます。ちなみに、これは私の作ったプラグインではなく、公式の方法で簡単にインストールできます。
