アフィリエイト

JINのヘッダー画像にwidth,height,loadingを付与する方法

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」です。詳しいやり方は次の記事をご覧ください。

ZIP形式のプラグインを手動でインストールする

気になる方のためにお伝えしておくと、このプラグインはこれから行う子テーマに記述する処理で使われる関数を定義しています。子テーマに直接記載しても良かったのですが、この関数は私が作った他のプラグインでも利用しているため、単独のプラグインとして切り出しました。

2. 子テーマのfunction.phpに追記

本手順では子テーマを利用します。子テーマの作り方はネットに情報がたくさんあるので調べてみてください。子テーマのfunctions.phpに以下を追記します。

スポンサーリンク

3. 子テーマにheader-image.phpを配置

以下をクリックして表示されるコードを保存してください。

header-image.php

このコードを子テーマ内に

include/head/header-image.php

というパス、ファイル名でアップロードしてください。

パスとファイル名が間違っていると動作しません。これは親テーマ側のパスと対応しています。

これで完了です。Chromeのデベロッパーツールなどであなたのサイトのヘッダー画像のimg要素を確認してみてください。

JINバージョン: 2.650で動作確認。

JIN専用のプラグイン他にも作ってます

JINで使える便利なプラグイン他にも作っていますのでご覧ください。

WordPressテーマJINの関連記事の関連度を爆上げするプラグイン!WordPressテーマJINで記事下に表示される「関連記事」というセクションありますよね?名前の割にあまり関連していない記事が表示され...
JINブログカードをURLでなくslugで指定するショートコードにするプラグインWordPressテーマ「JIN」のブログカード機能、便利ですよね。通常URLをそのまま貼り付けるだけで良いのですが、記事のslugを指...
JIN高速化!アセットファイルを遅延読み込みするプラグイン作ったWordPressテーマ「JIN」の表示速度を高速化するため、CSSやJavaScriptなどのアセットファイルを遅延読み込みするための...
JINで画像遅延読込時にくるくる画像を表示するプラグイン作ったサイトやアプリで画像を読み込んでいる時に表示するくるくるする画像ありますよね。あれをJINでも簡単に表示できるようにするプラグインを作り...
JINのプロフ画像のimgタグにloadingをつけるプラグインを作ったWordPressテーマ「JIN」のサイドバーに表示させるプロフ画像のimgタグにloading="lazy"を付与するプラグインを作り...

カッテネもおすすめ

ちなみに、3000サイト以上にご利用いただいているカッテネというWordPressプラグインも以前作りました。以下のような商品リンクを作るプラグインです。

こちらはJINはもちろん、それ以外のテーマにも対応しています。また、人気が出たので公式のプラグインとして申請したので、ボタン1つでインストールできます。無料なので使ってみてください。

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよカエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。です...

増え続けるプラグイン問題への回答

プラグイン無しにはWordPressの運用はできないと思います。私のように、細かい追加機能を自分でプラグインとしてプラグラミングしてしまう人は当然ですが、そうでない人でも、管理画面のプラグイン一覧に数十個並ぶのも普通なのではないでしょうか。

そうすると、非常に見づらくなり、管理しづらくなります。そこで超役立つプラグインがPlugin Groupsというプラグイン。Pluginをグループに分けられ、グループごとに表示できます。例えば、私が作ったプラグインを複数使っている方なら、「WebFood」などとグループを作ってそれに入れてもいいかもしれません。ちなみに、タグのように複数のグループに所属させることが可能なので、柔軟に分類することができます。ちなみに、これは私の作ったプラグインではなく、公式の方法で簡単にインストールできます。

Plugin Groups