ボックスメニューは、メニューをボックス型で表示できる機能です。
初期の設定では、ボックスメニューを表示したとき、全てのメニューが星のアイコンになっていますよね。
全てのメニューが星のアイコンじゃ分かりにくいから変更できないかな・・・？。
そんなときは、Font Awesomeの無料アイコンを使えば、星のアイコンを、それぞれのメニューに合わせて、オリジナルのアイコンに変更できます。
今回は、ワードプレスでCocoonのテーマを利用している人向けに、ボックスメニューにアイコンを表示する方法を紹介します。
ボックスメニューにアイコンを表示する方法
1番最初に、「最新のCDNファイル」をコピーしてCCSにコードを貼り付けましょう。
以下の記事に詳しい説明があります。
アイコンだけを変更しても反映されないので、CDNファイルをコピーしてくださいね。
＞簡単！ワードプレスのヘッダーメニュー（グローバルメニュー）にアイコンを表示する方法 Cocoon
ボックスメニューに、オリジナルアイコンを表示するためにすることは、以下の３つです。
- ボックスメニューに表示するメニューの作成
- Font Awesomeアイコンのコードを、メニューのCCS classに入力する
- ボックスメニューをサイドバーに表示する設定
ボックスメニューに表示するメニューの作成
まず最初に、ボックスメニューに表示する、メニューを作成します。
ワードプレスの管理画面にログイン後、ダッシュボード画面から、「外観」→「メニュー」をクリックします。
私の場合は、ボックスメニューにカテゴリーを表示したいので、カテゴリーのメニューを作成する方法を説明しますね。
「新しいメニューを作成しましょう」をクリックします。
メニュー構造にある、メニュー名に分かりやすく、”ボックスメニュー”と入力して、「メニューを作成」をクリックします。
編集するメニューを選択から、∨をクリックして”ボックスメニュー”を選び、右横にある「選択」をクリックします。
メニュー項目を追加から、「カテゴリー」をクリックして、ボックスメニューに表示するカテゴリーに✓を入れます。
「メニューに追加」をクリックします。
この時点で今作成したメニューは、まだ保存できていないので注意してください。
設定までもう少しです。
次に設定するアイコンのコードを貼り付ければ、メニューが保存されますよ。
次は、先ほど作成したメニューに、アイコンを表示する設定を行います。
次の設定もメニュー画面から行うので、まだ画面は閉じないで下さいね。
スマホの場合、文字化けするので、パソコンでのアクセスがおすすめです。
たとえば下記のマークを選んだとします。アイコンをクリックすると、下記のように表示されるので、ピンクのライン部分のコードをコピーしましょう。
ただし、そのまま貼り付けてもアイコンが表示されないので、少しコードの修正が必要になります。
以下に記載があるので、変更したコードを貼り付けてくださいね。
Font AwesomeアイコンのコードをCCS classに入力する
初期のままだと、メニューにCCSコード入力画面がないので、CCSコード入力画面を表示する設定が必要。
メニュー編集画面の右上にある、「表示オプション」をクリックして、「CCSクラス」に✓を入れます。
次は、カテゴリーのメニューに、1つずつ順番にアイコンを設定していきます。
カテゴリーの横にある▼をクリックして、「CSS class (オプション)」に、アイコンのコードを入力します。
本のアイコンは、以下のコードですが、修正が必要です。
<i class="fa-solid fa-book"></i>上記のコードで、ccsコードに入力するのは、
“fa-solid fa-book“この部分だけですが、fas fa-bookに変更します。
「fa-solid fa-book」の部分だけをコピーして、CCS classに貼り付けるのはNG
fa-sの時は、前半部分をfasに変更する
なぜかこのままだと、アイコンが表示されないので、コードを以下のように変更します。
fa-solid fa-bookの前半を、fa-solidからfasに変えます。
fa-solid fa-book↓
fas fa-bookfa-bの時は、前半部分をfabに変更する
Googleのアイコンの場合は、以下のコードですが、こちらは前半をfabに変更します。
<i class="fa-brands fa-google"></i>fa-brands fa-googleの前半を、fa-brandsからfabに変える
先ほどとの違い分かりますか？
最初の文字がfa-s…の時はfasに、fa-b…の時はfabに変えます。
fa-brands fa-googlefab fa-google他のコードも同じように変更して、すべて入力したら、最後に「メニューを保存」をクリックします。
お疲れさまでした。これでボックスメニューに、アイコンが表示されるようになりました。
次は、ボックスメニューをサイドバーに表示させる設定を行います。
ボックスメニューをサイドバーに表示する
ワードプレスのダッシュボード画面から、「外観」→「ウィジェット」をクリックします。
利用できるウィジェットの中から、「ボックスメニュー」を選びます。
「サイドバー」→「ウィジェットを追加」をクリックします。
タイトルに好きな言葉を入力して、メニュー名は、メニュー一覧から、先ほど作成した「ボックスメニュー」を選びます。
保存すればサイドバーに、アイコン付きのボックスメニューが追加されました。
ブログのトップページに行って確認してみて下さい。
ボックスメニューにアイコンが表示されましたよね。
私の場合は、こんな感じです。
まとめ
今回は、ボックスメニューにアイコンを表示する方法を紹介しました。
ボックスメニューのアイコンを変えると、一目でメニューが分かりやすくなりますよね。
ブログの読者の人にもメニューを認識してもらえるので、おすすめです。
かんたんなので、ぜひアイコンを設定してみて下さいね。
