【Cocoon】ツールバーにアイコンが表示されない場合の対応方法

INDEX

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

今回WordPressのツールバーにアイコンが表示されないので、その対応方法について書いてみました。

通常WordPressのツールバーの右端に自分が設定したアイコンが表示されていますが、表示されていません。

また、ログイン・ログアウト時のユーザー名、日時、IPアドレス、ユーザーエージェントを記録する「Crazy Bone (狂骨)」というプラグインを導入することで、ツールバーにアイコン（国、OS、ブラウザ）が表示されるようになるのですが、やはりアイコンが表示されていません。

そこでアイコンが表示されない原因を調べてみました。

WordPressテーマ Cocoonの機能として、画像の高速化機能「Lazy Load（レイジーロード）」が備わっています。

「Lazy Load（レイジーロード）」とは、画像を遅れて読み込むことで、画像表示のタイミングを調整してページの表示速度を向上させる機能です。

その画像の高速化機能「Lazy Load（レイジーロード）」により、アイコンが正常に表示されていないようです。

このWordPressテーマ Cocoonの画像の高速化機能「Lazyload（レイジーロード）」をオフすることで、アイコンが表示されるようになります。

しかし、WordPressテーマ Cocoonの画像の高速化機能「Lazyload（レイジーロード）」をオフにすることで、サイト全体の表示スピード低下に繋がってしまいます。

そこで、ツールバーのアイコンだけを「Lazyload（レイジーロード）」の対象外に設定したいと思います。

[Cocoon設定] - [高速化]を選択し、サイト高速化の設定ページを開きます。

[Lazy Load設定] - [遅延読み込み]の設定項目を確認します。

[Lazy Load設定] - [遅延読み込み]の項目に、自分のアイコンのファイル名を入力します。

但し、.jpgや.pngなどの拡張子は入力する必要はありません。

次に同じく[Lazy Load設定] - [遅延読み込み]の項目に、プラグイン「Crazy Bone (狂骨)」のアイコンを入力します。

アイコンに関しては

jp
chrome
firefox
mozilla
ie
macos
windows

辺りを入力しておけばOKでしょう。

なお、プラグイン「Crazy Bone (狂骨)」で登録されているブラウザとOSのアイコンは、

[plugins] - [crazy-bone] - [images] - [browsers]

の場所に保存されています。

また、国のアイコンは、

[plugins] - [crazy-bone] - [images] - [flags]

の場所に保存されていいます。

最後に一番下の[変更を保存]をクリックして完了です。

これで、WordPressテーマ Cocoonの画像の高速化機能「Lazyload（レイジーロード）」を有効にしつつ、アイコン画像は正常に表示されるようになりました。

これでアイコンが表示されるようになりスッキリしました。

また、「Jetpack by WordPress.com」のプラグインを導入している場合、同様にツールバー上のサイト統計情報の画像が表示されない可能性があります。

今回と同じ方法で表示することができるので、その場合は、以前掲載したエントリー記事をご確認下さい。