サイトやアプリで画像を読み込んでいる時に表示するくるくるする画像ありますよね。あれをJINでも簡単に表示できるようにするプラグインを作りました。
もくじ
WordPressが画像遅延読込をデフォルト化した
LazyLoading（遅延読込）をデフォルト化したので、ユーザー体験としてはページの表示速度は上がりました。でも、画像が読み込まれるまでは真っ白い空間がだけが表示され、ユーザーは何が起きているかわかりにくいです。
そこにアプリやサイトで画像を読み込んでいる時に表示されるくるくる回る画像が表示されたら、心理的に安心感が出ます。例えばこういう画像です。
簡単にくるくる画像を表示するプラグインを作った
読み込み時にこういうくるくる画像を表示するプラグインを作りました。このプラグインを導入すると、記事上のアイキャッチ画像はこんな感じで読み込まれます。
くるくる画像の色は「カスタマイズ」⇒「カラー設定」⇒「テーマカラー」で設定した色に自動的になります。
一応JIN専用のプラグインですが、get_theme_mod()で'theme_color'に設定している値があるなら、他のテーマでも使えるはずです。
HTMLに画像データを埋め込んだので最速で表示されます
同種のプラグインを見てみたのですが、くるくる画像自体がHTMLとは別のファイルになっていて、読み込みに時間がかかってしまうのが多いです。それに対し、このプラグインは、HTML内にくるくる画像のデータを埋め込んでいるので、ページロード開始からくるくる画像が表示される時間が限りなく短く済みます。
もしよければ、他のと比べてみてください。検証はChromeのデベロッパーツーで遅い通信帯域をエミュレートすると簡単にできます。
アドセンスやYouTubeの読込時にも表示される
imgタグだけでなく、iframeの読込時にも表示するようにしました。なので、埋め込まれたアドセンスやYouTube動画のパーツが読み込まれている間も表示してくれます。
スポンサーリンク
zipファイルをアップロードしてインストール
通常のWordPressプラグインは、WordPressの管理画面でプラグインの新規追加画面で検索してボタン一つか二つ押すだけでインストールできます。しかし、このプラグインはまだ公式のWordPressプラグインとして申請していません。
なので、zipファイルになっているプラグインを入手していただき、それをWordPressの管理画面からアップロードしてインストールする、という方法になります。
zipファイルは以下のボタンから無料でダウンロードできます。
ダウンロードしたzipファイルをWordPressの管理画面からアップロードしてインストールします。プラグイン名は「Loading img」です。詳しいやり方は次の記事をご覧ください。
JINバージョン: 2.650で動作確認。
もしニーズが大きければ
そこまで機能変更があるプラグインでもないので、アップデートする機会はあまりないと思いますが、zipファイルでの手動インストールだと、アップデート時は面倒です。一度プラグインを削除してから、先ほどと同じ手順でインストールする必要があります。
公式のWordPressプラグインとして申請して認められれば、イントールも更新もボタン1つでできるようになります。
もしニーズが大きいようであれば、申請しようと思います。なので、利用してみて使い勝手が良ければ、ブログやSNSでこのプラグインについて紹介してください！
Twitterの場合は、以下の私のアカウントにメンション頂ければ気付きやすいので助かります。またこのプラグインをアップデートした際は、Twitterでお知らせするのでフォロー頂けたら嬉しいです。
https://twitter.com/tai_tantan
JIN専用のプラグイン他にも作ってます
JINで使える便利なプラグイン他にも作っていますのでご覧ください。
カッテネもおすすめ
ちなみに、3000サイト以上にご利用いただいているカッテネというWordPressプラグインも以前作りました。以下のような商品リンクを作るプラグインです。
こちらはJINはもちろん、それ以外のテーマにも対応しています。また、人気が出たので公式のプラグインとして申請したので、ボタン１つでインストールできます。無料なので使ってみてください。
増え続けるプラグイン問題への回答
プラグイン無しにはWordPressの運用はできないと思います。私のように、細かい追加機能を自分でプラグインとしてプラグラミングしてしまう人は当然ですが、そうでない人でも、管理画面のプラグイン一覧に数十個並ぶのも普通なのではないでしょうか。
そうすると、非常に見づらくなり、管理しづらくなります。そこで超役立つプラグインがPlugin Groupsというプラグイン。Pluginをグループに分けられ、グループごとに表示できます。例えば、私が作ったプラグインを複数使っている方なら、「WebFood」などとグループを作ってそれに入れてもいいかもしれません。ちなみに、タグのように複数のグループに所属させることが可能なので、柔軟に分類することができます。ちなみに、これは私の作ったプラグインではなく、公式の方法で簡単にインストールできます。
