WordPressのグローバルナビメニューにFont Awesomeのアイコンフォントを表示させる方法

Font Awesome Icons

最近、WordpressのテーマでFont Awesomeを使用しているものも多いです。

このサイトでもFont Awesomeのアイコンフォントを利用しています。

ただ、個々のグローバルナビメニュー部分は、Wordpress側で動的に作成されために、テンプレートをカスタマイズしてFont Awesomeのクラスを挿入したりするわけにはいきません。なので、僕はできないものなのだと思っていました。

けれど今日たまたま、「Wordpressのグローバルナビメニューに個々のFont Awesomeアイコンを挿入するにはどうしたらよいか?」と質問を受けました。良い機会だったので、ちょっと調べてみたら方法が見つかり、思ったより簡単そうだったので紹介です。

その方法は、Font Awesome 4 Menusというプラグインを使った方法です。

スポンサーリンク
レクタングル(大)広告

メニューにFont Awesomeアイコン追加する手順

Font Awesome 4 Menusロゴ

まず手順を簡単に説明します。

  1. Font Awesome 4 Menusのインストール
  2. メニュー設定、表示オプションのCSSクラスを有効化
  3. メニュー設定でFont Awesomeのクラスを追加
  4. Font Awesome 4 Menusの設定(任意)

最後の設定は任意なので、主な設定手順は3手順になります。

Font Awesome 4 Menusのインストール

まずはプラグインのインストールです。

「プラグイン→新規追加」から「Font Awesome 4 Menus」と検索してインストールを行ってください。

Font Awesome 4 Menus

インストールが終了したら有効化します。

メニュー設定のCSSクラスを有効化

次にメニュー設定の表示オプションの変更を行います。

表示オプションを変更するには、「外観→メニュー」に移動して「表示オプション」ボタンをクリックします。

メニュー設定の表示オプションの変更を

クリックするとオプションが表示されるので、「CSSクラス」にチェックを入れます。

CSSクラスにチェックを入れる

これで表示オプションの設定はOKです。

メニューにFont Awesomeクラスを追加

これまでの設定を行うと、ナビゲーションの個々のメニューに「CSS class (オプション)」という設定項目が追加されます。

CSSクラス設定項目

ここにFont AwesomeのCSSクラスを記入します。

Font AwesomeのCSSクラスを取得するには、Font Awesome Iconsから探して取得します。

例えば、ホームアイコンを取得するには、まず目当てのアイコンを探し出します。

目当てのアイコンを見つける

ここで表示されているクラス名を使用します。

アイコンをクリックすると、個別ページが表示されるので、コピペでもOKです。

Font Awesomeクラスをコピペする

クラス名を取得したら、グローバルナビメニューの「CSS class (オプション)」に記入していきます。

Font Awesomeクラスを記入

全てのメニューの設定が終わったら「メニューの保存」ボタンを押してください。

メニューの保存ボタン

表示確認

全ての設定を終えると、以下のようにグローバルナビメニューにアイコンフォントが表示されます。

表示確認

Font Awesome 4 Menusの設定

Font Awesome 4 Menusの設定について簡単に説明しておきます。

WordPress管理画面から「設定→Font Awesome」に移動します。すると以下のような画面が表示されます。

Font Awesome 4 Menusの設定

Load Font Awesome 4 From

この項目では、Font Awesomeのスタイルシートの呼び出しについて設定します。

この設定では以下の設定項目が選べます。

  • Local plugin folder (default)
    (プラグインのローカルフォルダ。通常はこれでOK)
  • Official Font Awesome CDN
    (Font AwesomeのオフィシャルCDMサーバーから取得)
  • A custom location
    (ユーザーが設定した任意の場所)
  • Don’t load Font Awesome 4’s stylesheet
    (Font Awesomeスタイルシートを使用しない。テーマなどで既に呼び出している時に。)

Icon Spacing

アイコンとメニューテキストの間にスペースが必要な場合は、「Keep the space between my text and my icons (default is checked)」にチェックを入れます(デフォルト)。

これをチェックしておかないと、アイコンとメニューテキストのスペースがなくなり以下のように表示されます。

フォントアイコンのスペース

まとめ

Font Awesome 4 Menusを使用すれば、このように簡単にグローバルナビメニューにアイコンフォントを追加することができます。

設定自体はとても簡単です。唯一面倒くさいことといえば、Font Awesomeからメニューに合うアイコンを探すことくらいでしょうか。

WordPressの個々のグローバルナビメニューにワンポイント置きたいときには、おすすめの方法です。

参考 How to Add Font Awesome Icons to WordPress Menus