アフィリエイト

JINのプロフ画像のimgタグにloadingをつけるプラグインを作った

WordPressテーマ「JIN」のサイドバーに表示させるプロフ画像のimgタグにloading="lazy"を付与するプラグインを作りました。

遅延読み込みしなくてPageSpeed Insightsでマイナス要素になる

本サイトもGoogleの公式ツールであるPageSpeed Insightsでの数値改善に取り組んできました。JINもwidht、height、loading要素を付与するなどのアップデートがあり、開発陣もこのあたり意識をしているようです。

でも、なぜかサイドバーに設置するプロフ画像には、width、height要素の付与のみで、loading要素がつきませんでした。

これだとPageSpeed Insightsで「オフスクリーン画像の遅延読み込み 」という項目でひっかかってしまいます。

なので、プラグインを導入するだけで、loading="lazy"を付与するプラグインを作りました。

よければ、本サイトのプロフィール画像のHTMLをChromeのデベロッパーツールなどで確認してみてください。

このプラグインを導入することで「オフスクリーン画像の遅延読み込み 」の項目もクリアできました。

ついでにprofileページがなければリンクしないようにした

ついでにこのプラグインにちょっとした機能を入れました。JIN側のバグを修正したとも言えるかもしれません。

前々から気になっていたのですが、JINは「profile」という投稿をしていると、プロフィール画像にその記事のURLに対してリンクされる仕様になっています。

でももし「profile」という投稿がない場合は、なぜか無関係の記事のURLがリンクされてしまいます。特にprofileという投稿をしない人は多いと思います。これはバグだと思います。

そういう人はおそらく、CSSやJavaScriptでプロフィール画像をクリックできないようにして、しのいでいるのではないでしょうか。私もこれまでそうでした。

読者から見ればそれで全然問題ないのですが、サイドバーからリンクされるということは、サイトの全ページからになるのですごい数のリンクになってしまいます。無駄な発リンクはおそらくGoogleのクローラーさんの混乱の元なので、SEO的にもよろしくないと考えました。

なので、もしprofileという投稿がなければ、どのページにもリンクしない(aタグを出力しない)仕様にしました。もしprofileという投稿があれば、これまで通りその記事にリンクします。

このプラグインを導入すれば適用されます。

zipファイルをアップロードしてインストール

通常のWordPressプラグインは、WordPressの管理画面でプラグインの新規追加画面で検索してボタン一つか二つ押すだけでインストールできます。しかし、このプラグインはまだ公式のWordPressプラグインとして申請していません。

なので、zipファイルになっているプラグインを入手していただき、それをWordPressの管理画面からアップロードしてインストールする、という方法になります。

zipファイルは以下のボタンから無料でダウンロードできます。

ダウンロードしたzipファイルをWordPressの管理画面からアップロードしてインストールします。プラグイン名は「Jin add loading prof img」です。詳しいやり方は次の記事をご覧ください。

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

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

スポンサーリンク

もしニーズが大きければ

そこまで機能変更があるプラグインでもないので、アップデートする機会はあまりないと思いますが、zipファイルでの手動インストールだと、アップデート時は面倒です。一度プラグインを削除してから、先ほどと同じ手順でインストールする必要があります。

公式のWordPressプラグインとして申請して認められれば、イントールも更新もボタン1つでできるようになります。

もしニーズが大きいようであれば、申請しようと思います。なので、利用してみて使い勝手が良ければ、ブログやSNSでこのプラグインについて紹介してください!

Twitterの場合は、以下の私のアカウントにメンション頂ければ気付きやすいので助かります。またこのプラグインをアップデートした際は、Twitterでお知らせするのでフォロー頂けたら嬉しいです。

https://twitter.com/tai_tantan

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

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

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

カッテネもおすすめ

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

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

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

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

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

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

Plugin Groups