ワードプレスのメニューにアイコンを表示させる方法|画像付解説

アイコンをタッチする人

今回は、下図のような通常のテキストのみのメニューから、

変更前のメニュー
変更前のメニュー

テキストにアイコンが追加されたメニューに変更する設定方法を画像付きで説明します。

変更後のアイコンが追加されたメニュー
変更後のアイコンが追加されたメニュー

なお、設定方法は、既存のメニュー名称にコードを追加するだけなんで、非常に簡単です!

メニューにアイコンを追加する設定方法

アイコンをタッチする人
メニュー表示にアイコンを追加するカスタマイズをしてみよう!

メニューにアイコンを追加する設定方法として、「通常編集画面」「ライブプレビュー画面」がありますが、基本的には同じですので、通常の方でご理解いただけると思います。

通常編集画面からの設定方法

ダッシュボードの「外観」、「メニュー」から設定していきます。

ワードプレスのメニュー画面を選択
ダッシュボード画面から「外観」、「メニュー」を選択
メニュー編集画面
変更対象のメニューの「▼」を選択
変更対象メニューの画面
変更対象メニューの画面が表示。
ナビゲーションラベルは「ホーム」のまま

上記のナビゲーションラベル欄にアイコンのコードを追記するだけです。そのコードは「Font Awesome」のサイトからコピペします。

Font Awesomeのトップページ
Font Awesomeにアクセスしトップページを表示
Font Awesomeのアイコン検索画面
検索ボックスに「home」と入力
画面下に表示された「アイコン」を選択
Font Awesomeの対象アイコン詳細
表示されたコードを「コピー」
変更対象メニューの画面
ナビゲーションラベルに「コピーしたコード」を貼り付け

わたしは、「アイコン」と文字列「ホーム」の間隔を調整するため、半角スペースを入れています。

ホームが変更されたメニュー
ホームの文字列にアイコンが追加

ライブプレビュー画面からの設定方法

繰り返しになりますが、こちらの設定の流れも基本的には同じです。プレビューしながら設定できるので不安な方はこちらをおすすめします。

ライブプレビュー選択画面
外観>メニュー画面から「ライブプレビュー」を選択
ライブプレビューでのアイコン編集
左メニューの「ナビゲーションラベル」欄で同様に編集

おわりに

CSSなどもいじらず、非常に簡単ですね。コードを参照した 「Font Awesome」には 様々なアイコンがあるので、ブログ構成のヒントにしてもいいかもしれません。