最近、WordpressのテーマでFont Awesomeを使用しているものも多いです。
このサイトでもFont Awesomeのアイコンフォントを利用しています。
ただ、個々のグローバルナビメニュー部分は、Wordpress側で動的に作成されたるめに、テンプレートをカスタマイズしてFont Awesomeのクラスを挿入したりするわけにはいきません。なので、僕はできないものなのだと思っていました。
けれど今日たまたま、「Wordpressのグローバルナビメニューに個々のFont Awesomeアイコンを挿入するにはどうしたらよいか？」と質問を受けました。良い機会だったので、ちょっと調べてみたら方法が見つかり、思ったより簡単そうだったので紹介です。
その方法は、Font Awesome 4 Menusというプラグインを使った方法です。
目次
メニューにFont Awesomeアイコン追加する手順
まず手順を簡単に説明します。
- Font Awesome 4 Menusのインストール
- メニュー設定、表示オプションのCSSクラスを有効化
- メニュー設定でFont Awesomeのクラスを追加
- Font Awesome 4 Menusの設定（任意）
最後の設定は任意なので、主な設定手順は3手順になります。
Font Awesome 4 Menusのインストール
まずはプラグインのインストールです。
「プラグイン→新規追加」から「Font Awesome 4 Menus」と検索してインストールを行ってください。
インストールが終了したら有効化します。
メニュー設定のCSSクラスを有効化
次にメニュー設定の表示オプションの変更を行います。
表示オプションを変更するには、「外観→メニュー」に移動して「表示オプション」ボタンをクリックします。
クリックするとオプションが表示されるので、「CSSクラス」にチェックを入れます。
これで表示オプションの設定はOKです。
メニューにFont Awesomeクラスを追加
これまでの設定を行うと、ナビゲーションの個々のメニューに「CSS class (オプション)」という設定項目が追加されます。
ここにFont AwesomeのCSSクラスを記入します。
Font AwesomeのCSSクラスを取得するには、Font Awesome Iconsから探して取得します。
例えば、ホームアイコンを取得するには、まず目当てのアイコンを探し出します。
ここで表示されているクラス名を使用します。
アイコンをクリックすると、個別ページが表示されるので、コピペでもOKです。
クラス名を取得したら、グローバルナビメニューの「CSS class (オプション)」に記入していきます。
全てのメニューの設定が終わったら「メニューの保存」ボタンを押してください。
表示確認
全ての設定を終えると、以下のようにグローバルナビメニューにアイコンフォントが表示されます。
Font Awesome 4 Menusの設定
Font Awesome 4 Menusの設定について簡単に説明しておきます。
WordPress管理画面から「設定→Font Awesome」に移動します。すると以下のような画面が表示されます。
Load Font Awesome 4 From
この項目では、Font Awesomeのスタイルシートの呼び出しについて設定します。
この設定では以下の設定項目が選べます。
- Local plugin folder (default)
（プラグインのローカルフォルダ。通常はこれでOK） - Official Font Awesome CDN
（Font AwesomeのオフィシャルCDNサーバーから取得） - 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の個々のグローバルナビメニューにワンポイント置きたいときには、おすすめの方法です。
