Contents
WordPressのブログデザインのカスタマイズにあたり、グローバルメニューの見出しにアイコンを表示する方法を探していたところ、以下の４つのプラグインに出会いました。
- Font Awesome 4 Menus
- AGP Font Awesome Collection
- Menu Icons
- Menu Image
これらのプラグインの使い方を備忘を兼ねてご紹介するとともに、実際に使ってみた感想を書いていきたいと思います。なお、このプラグインを使ってみた時のデザインテーマはTwentySeventeenです。
グローバルメニュー表示方法
そもそも、グローバルメニューってどうやって表示するんだという方がいるかもしれませんので、まずは表示方法を記載します。
【１】ダッシュボードの「外観」「メニュー」を開き、任意のメニュー名を入力してメニューを作成します。
【２】再び「外観」「メニュー」から、【１】で作成したメニューを選択し、「メニュー構造」に表示したいメニューを追加していきます。追加するメニューは、「固定ページ」、「カスタムリンク」、「カテゴリー」などから選択できます。
メニュー構造の設定が終わったら、メニュー設定で「トップメニュー」をチェックし、メニューを保存します。
【３】サイトのトップメニューを確認すると、グローバルメニューが表示されます。
【４】ちなみに、メニューは入れ子にして階層化することができます。「メニュー構造」で副項目にしたいメニューをドラックし、右に一段下げればOKです。
【５】サイトのトップメニューを確認すると、以下のとおりメニューが階層化されました。マウスオーバーすると、副項目が表示されます。
では、プラグインの使い方について書いていきたいと思います。
Font Awesome 4 Menusの使い方
【１】「プラグイン」「新規追加」からキーワードに「Font Awesome 4 Menus」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化しましょう。
【２】「外観」「メニュー」から、右上の表示オプションを開きます。
【３】表示オプションが開いたら、CSSクラスにチェックを入れます。
【４】ここで、一旦WordPressを離れて、以下のリンク「The Icons」のページを開きます。このページを閲覧する目的は、設定するアイコンのコードを確認するためです。
CHECKThe Icons
ここでは、HOMEのアイコンを選ぶことにしますので、HOMEのアイコンを検索し、リンクを押下します。
【５】選択したアイコンの詳細ページが開きますので、アイコンの横にあるCSS classをコピーします。
【６】ここでWordPressのダッシュボードに戻り、「外観」「メニュー」から、メニュー構造の設定を行います。
アイコンを設定したいメニューをオープンし、【５】でコピーしたCSS classオプションを入力します。スペースは入れないように注意です。
同様に、他のメニューについてもアイコンを設定します。
入力が終わったらメニューを保存します。
【７】サイトのトップメニューを開き、グローバルメニューを確認すると、メニューの横にアイコンが表示されていることがわかります。
注意！TwentySeventeenでは、グローバルメニューを階層表示すると、Font Awesome 4 Menusで設定したアイコンの表示が崩れる！
ここで、１点注意です。
Font Awesome 4 Menusを使ってアイコンを表示した場合、TwentySeventeenでは、グローバルメニューを階層表示するとデザインが崩れてしまうことが分かりました。
副項目は問題ないんですけどね・・・。
このため、TwentySeventeenでFont Awesome 4 Menusを使う場合は、階層表示しないよう注意しなくてはなりません。
なお、TwentySixteen、TwentyFifteenでは、階層表示してもデザインは崩れませんでしたよ。
AGP Font Awesome Collectionの使い方
【１】「プラグイン」「新規追加」からキーワードに「AGP Font Awesome Collection」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化します。
【２】「外観」「メニュー」からアイコンを設定したいメニューの設定をしていきます。
「Menu Icon」という項目が表示されていますので、プルダウンからアイコンを選択し、メニューを保存を押下します。
ちなみに、アイコンはとっても多くの種類が！
以下の内容でも、ごく一部です。検索機能が無いのが欠点ですね・・・。地道に気に入るアイコンを探しましょう。
【３】サイトのトップメニューを確認すると、アイコンが綺麗に表示されました。
階層表示していても問題ありません。
Menu Iconsの使い方
【１】「プラグイン」「新規追加」からキーワードに「Menu Icons」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化します。
【２】「外観」「メニュー」からアイコンを設定していきます。「Select」というリンクが表示されているので、押下します。
【３】アイコンの一覧が表示されますので、一覧の中から表示したいアイコンを選びます。検索機能もあるので、キーワードを入力すると便利です。
ここでは、例としてHOMEを選択します。
【４】アイコンを選択すると、詳細な設定を行うことができます。
下段では、以下の設定ができます。
- Hide Label：ラベルの表示有無を設定する。アイコンのみの表示が可能。
- Position：アイコンをラベルの前後どちらに表示するか設定する。
- Vertical Align：アイコンの上下位置を設定する。
- Font Size：フォントのサイズを設定する。
上段には、設定内容がプレビュー表示されるので、確認が便利です。
【５】サイトのトップメニューを確認すると、アイコンが設定内容のとおり表示されました。階層表示にしても問題ありません。
ただ、そもそもアイコンの種類が少ないようです・・・。
サンプルでCARというメニューを作りましたが、車のアイコンがなくて、止むを得ずショッピングカートのアイコンにしてしまいました・・・(*_*;
Menu Imageの使い方
【１】「プラグイン」「新規追加」からキーワードに「Menu Image」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化します。
【２】「外観」「メニュー」からアイコンを設定していきます。
「画像を設定」ボタンを押すと、自分で用意した画像をアイコンに設定することができます。「マウスオーバー時の画像設定」もあるので、色を反転させるなどして、オリジナルのアイコンが作れますね。
その他には、「画像サイズ」「タイトル位置」を設定することができます。
設定が完了したら、メニューを保存しましょう。
【３】サイトのトップメニューを確認してみます。アイコンがきちんと表示されていました。アイコンの画像や位置を好みに合わせて設定できるので、自由度が高いプラグインだと感じました。
まとめ
実際に４つのプラグインを使ってみて、以下の特徴があると感じました。
Font Awesome 4 Menusの特徴
- 外部サイトを利用するが、アイコンの検索機能があり、使いやすい
- アイコンの種類が多い
- デザインテーマにTwenty Seventeenを使用している場合は、メニューを階層表示するとアイコンの表示が崩れてしまうので注意が必要
AGP Font Awesome Collectionの特徴
- アイコンの種類が多い
- アイコンの設定自体はとても簡単
- ただし、検索機能が無いので、不便
Menu Iconsの特徴
- アイコンの設定は簡単で、検索機能があり使いやすい
- フォントサイズやラベル位置の変更等が好みに合わせて設定できて便利
- ただし、アイコンの種類が少ない
Menu Imageの特徴
- 自分が用意したアイコン画像を使用できたり、マウスオーバー時の画像を設定でき、自由度が高い
- アイコンサイズやラベル位置の変更について選択項目が多く便利
- アイコン画像は自分で用意しなければならないので、自分で探せない人には不便
これらのプラグインは同時に有効化することもできますので、自分の好みに合ったプラグインをケースバイケースで利用してみてはいかがでしょうか。
