WordPressのグローバルナビ(TOPメニュー)にアイコンを追加したい!

当ブログは、WordPressテーマ「Emanon Pro」を利用しており、グローバルナビにFont Awesomeのアイコンフォントが表示されるようにカスタマイズしています(例えば、「Apple」というテキストの左のリンゴマーク)。

ちょっとしたアイコンが追加されているだけで、メニューの内容が分かりやすくなるし、同じテーマを利用している他のブログと違いが出せてカッコイイですよね(笑)

そこで今回は、WordPressテーマ「Emanon Pro」において、グローバルメニューにアイコンフォントを利用する方法をご紹介させていただきます。

実装環境

今回の記事を書いた時点での当ブログの環境は以下の通り。

  • サーバー:エックスサーバー
  • WordPress:4.7.3
  • Emanon Pro:1.2.9

 

この記事の対象となる方

まず大前提として、この記事は以下のような方に向けて書いています。

  • WordPressテーマ「Emanon Pro」を利用している
  • 「color:#3050a0」というCSSの意味が分かる
  • テーマファイル(php)は触らなくてOK

基本的にはコピペするだけなのですが、パソコンで表示されるグローバルナビにおいて、アイコンフォントの配色を変更する必要があります。

特に、位置固定のグローバルナビを利用している場合には、キーカラーの色番号(6ケタの半角英数字)が必要となりますのでご注意ください。

 

Sponsored link

1.利用したいアイコンを選ぶ

まずは、あなたのブログで利用したいアイコンを選びましょう。

(ちなみに、WordPressテーマ「Emanon Pro」では、「Font Awesome」というアイコンフォントが予め導入されているので、使いたいアイコンの名前を調べるだけでOKです。)

 

まずは、「Font Awesome」のサイトにアクセスして、グローバルナビの「icon」を選択

Font Awesomeのサイトへアクセス

 

表示される一覧の中からアイコンを選ぶ。
(「Search icon」と表示されている検索窓に英語でアイテム名を入れると絞り込み可能。↓は「矢印=arrow」と入力してみたところ)

使いたいアイコンを探す

 

白枠で囲まれている部分で記載されているのが、今回欲しい「アイコンの名前」。

使いたいアイコンの名前をメモする

 

Sponsored link

2.WordPressの管理画面でメニューを作成する

次に、アイコンを利用するために、WordPressの管理画面でメニューを作成します。

 

「外観」→「メニュー」を選択

WordPressのメニュー作成画面を選択

 

「新規メニューを作成」を選択

新規メニューを作成

 

好きなメニュー名を記入のうえ、メニューの表示位置を選択

メニュー名を入力し表示位置を選択

 

グローバルナビに追加したいページを選択して「メニューに追加」
(下記の例では「テスト」というカテゴリを選択)

グローバルナビに追加したいページやカテゴリを選ぶ

 

カテゴリーというテキストの右側の「▼」をクリックして表示される画面で、「ナビゲーションラベル=ナビゲーションで表示されるテキスト」に下記のように表記を追加して「メニューを保存」

ナビゲーションラベルにアイコンフォントのコードを追加

 

3.アイコンフォントの配色を変更する

最後に、追加したアイコンフォントの色を調整しましょう。

(ちなみに、「2.WordPressの管理画面でメニューを作成する」までしか実施していない場合、アイコンの色が「Emanon Pro」のキーカラーと同じため、パソコンのメニューが↓のようになってしまいアイコンが見えません)

グローバルナビの色とアイコンの色が同じで見えない

 

「外観」→「テーマファイルの編集」を選択

テーマのCSSにアイコンの配色を追記

 

「style.css」の一番下に下記のコードを追記(配色はあなたのブログに合わせて変更してください)

 

ちなみに、当ブログのように「グローバルナビの位置を固定=ページスクロールしたとき、一番上にメニューを表示し続ける状態」の場合は、下記のコードを追記

 

これで無事にアイコンが表示されるようになります。

アイコンが表示される=見えるようになる

 

グローバルナビにアイコンフォントを追加する方法まとめ

ちょっとしたアイコンが追加されるだけでも、ブログの雰囲気はがらっと変わります。

1つ1つメニューに表示するアイコンを選ぶ必要はあるものの、CSSへのコード追記は1回だけでOKなので、ぜひやってみてください。

また、当ブログにおいてWordPressテーマ「Emanon Pro」に追加したカスタマイズは、下記のカテゴリに全てまとめています。

参考Emanon Pro カスタマイズ | こまろくNOTE

以上、TSUNJI(@tsunji1983)でした。

Sponsored link