WordPressのメニューに、アイコンとか画像ってどうやって付けるの？
私が最初見たときは、こんな風に思っていました。
この内容を実現する方法に言い換えると、つまりはこういうことになるのです。
WordPressのグローバルメニューに、Font Awesomeを使って装飾する方法が知りたい
昨日私は、こんなツイートをしていました。
はい、そうなんです。
つまりこの赤枠の部分のことをグローバルメニューと呼ぶのです。
元はカテゴリ名だけの並びだったのですが、アイコンを付けて装飾しました。
このアイコンは、Font Awesomeと呼ばれるものを使用しています。
当サイトはWordpressのテーマにCocoonを利用させていただいているのですが、CocoonはFont Awesomeにデフォルトで対応しており、難しい知識は不要で、簡単に使うことができるのです。
では、さっそくその方法をご紹介しましょう。
Font Awesomeとは
Font Awesomeとは、無料で利用できる（一部有料）のWebアイコンサービスです。
無料のアイコンだけでも1,500以上あります。
AppleやAmazonなど、利用するケースの多い有名どころのアイコンも豊富に取り揃えられています。
Font Awesomeアイコンを、日本語で検索できるサイトもあります。
CocoonでFont Awesomeを使ったグローバルメニューの作り方
では、ここからが実践です。
グローバルメニューを設定する
グローバルメニューを設定していない人は、まずこちらのCocoonの公式マニュアルを参考に設定してください。
- PCサイト用のグローバルメニュー
- モバイル用のブローバルメニュー
Cocoon設定でFont Awesomeのバージョンを確認する
上でも述べたとおり、Cocoonをインストールした時点で、すでにFont Awesomeのアイコン画像のデータも一緒に保存されているため、あとはそのデータを呼び出す操作をするだけです。
私がツイートしていたような、ヘッダーのソースをいじるなどといった難しい操作は必要ありません。
まずは、Cocoon側の設定を確認しましょう。
Cocoonでは、Font Awesomeのver.4とver.5が使えます。
WordPressのダッシュボードを開き、［Cocoon設定］を開いてください。
次に［全体］タブを開きます。
下の方にスクロールすると、「サイトアイコンフォント」という設定箇所があります。
デフォルトでは、［Font Awesome 4］が選択されています。
４と５のどちらのバージョンを使用すれば良いかは、使用したいアイコンによります。
私的にバージョン５の方が、素敵なアイコンがいっぱいあると思います。
アイコンのバージョンを確認する方法は、次で説明します。
Font Awesomeから使用したいアイコンのスクリプトをコピーする
では、早速使用したいアイコンを探しましょう。
先ほど紹介した Search fot Font Awesome(日本語) や、Font Awesomeの本家サイトから、アイコンを検索します。
例として、Font Awesomeの本家サイトでハートのアイコンを検索してみました。
グレーアウトしているアイコンは、有料のFont Awesome Proのアイコンです。（PCだと、マウスカーソルを合わせると下記のようにProと表示されます）
無料だけに絞り込みたいときは、左側メニューの[Free]をクリックすればOKです。
今回は、右上にある黒いハートを使用します。
黒いハートを選択すると、次のような画面に遷移します。
画面左上で、このアイコンがver.5で利用できると確認できます。
そして赤枠で囲んだ <i class>〇〇</i> と書かれたものが、このアイコンを呼び出すためのスクリプトです。
これをコピーして、設定したグローバルメニューの画面に貼り付けます。
グローバルメニューにFont Awesomeのスクリプトをペーストする
[外観]→[メニュー]を開いて、設定したメニューの「ナビゲーションラベル」に、スクリプトを貼り付けて[メニューを保存]します。
自サイトのトップ画面にもどり、ちゃんとアイコンができているか確認してください。
ちょっと例では意味不明なメニューが出来あがりましたけど、うまくいきましたでしょうか。
まとめ
最近、HTML/CSSの勉強していて、初めてFont Awesomeの存在を知りました。
自分で画像を作って装飾するのもいいですけど、手間も時間もかかるので、こういった無料サービスは積極的に利用していきたいですね。
もしこれに関して、操作に不明点などありましたら、ツイッターでリプしてもらえれば確認します。
メッセージは怪しい勧誘が多いので見ていません。
私のどのメッセージに対してでも良いので、リプライ（返信）でご連絡をお願いしますね。
