Cocoonでメニューにアイコンを付ける方法 | WordPress

この記事は、Cocoonでメニューにアイコンを付ける方法を説明したものです。
例えば、以下のようなアイコンです。

先に答えを述べます。
例えば、「ホーム」メニューにアイコンを付けたいなら、「ダッシュボード」→「外観」→「メニュー」と辿り、「メニュー構造」にあるホームの「ナビゲーションラベル」欄に<i class=”fa fa-home fa-lg></i>と書き込めばアイコンを付けることができます。

ミサキ
ミサキ

このようにCocoonは、簡単にアイコンを表示させることができるWordPressのテーマです。
良いテーマですね!
詳しい方法は以降の記事をご覧ください。

一応、検証で使ったWordPressとテーマのバージョンを記載します。
バージョンが異なるとメニューなどが若干異なることもあるからです。
WordPress 5.2
Cocoonバージョン: 1.7.7.2
Cocoon Childバージョン: 1.0.6

アイコンフォントについて

今回使用するのはアイコンフォントと呼ばれているものです。
アイコンフォントとは画像を使わないアイコンのことで、拡大しても粗くならない等のメリットがあります。
WordPressテーマのCocoonは、有名なアイコンフォント「Font Awesome」をデフォルトで読み込んでいるので、比較的簡単にアイコンを表示させることができます!

メニューにアイコンを付ける方法

メニューは既に設定されているものとします。

アイコンを選ぶ

Font Awesome (https://fontawesome.com/) のサイトを開きます。
この記事を書いている時点では、Version 5.8.2でした。
Versionが異なると、表示も異なる可能性があるため注意して下さい。

画面左上にある検索窓を使い、表示させたいアイコンを検索します。
例えば「ホーム」メニューに付けたいアイコンなら「home」と入力し、Enterキーを押します。
このように英語で検索しなければなりません(- -;)

検索結果から表示させたいアイコンをクリックします。
薄くなっているものは有料版です。

そして、クリック後に表示された画面でアイコンのHTMLをコピーします。
<i class=”fas fa-home”></i>と表示されている箇所(赤枠で囲った箇所)をクリックするとコピーされます!

メニューにアイコンを付ける

「ダッシュボード」→「外観」→「メニュー」と辿ります。

「メニュー構造」にあるホームの「ナビゲーションラベル」欄に、先ほどコピーした<i class=”fas fa-home></i>を貼り付けます。

ただし、貼り付けたHTMLは
<i class=”fas fa-home></i>

<i class=”fa fa-home fa-lg“></i>
に修正して下さい。
fasfaにするのは、Cocoonに読み込まれているFont Awesomeのバージョンが古いためです(※1)。
また、fa-lgを付けることでアイコンサイズが少し大きくなります。
メニューにちょうど良い大きさだと思います。

これで、メニューにアイコンが表示されるようになります!

おわりに

少し手間がかかりますが、頑張りましょう。
スマフォで開いたときのメニューが、アイコンを付けることで良い感じになりますよ!
では。

※1
グローバルナビのメニューにアイコンWebフォント


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)


コメント

  1. […] メニューへのアイコン表示 […]

タイトルとURLをコピーしました