サイトにとって、グローバルナビゲーションメニューとは訪問者がサイト内を巡回するときの道案内役になると言えます。
そのサイトがどういったコンセプトなのかとか、どこにどんな情報が書いてあるのかの案内であるべきですよね。あるいは訪問者にはまずここのページは見てもらいたいなというようなページへ誘導するとか。
なので初見でもパっと目を引くようになっているとより役割を果たしてくれます。
当サイトではご覧になってもわかるように、アイコンをつけることで目を引くように工夫をしていますが、複数の方からこのやり方を教えてほしいという要望をいただきましたので、ご紹介します。
※ Simplicity2のテーマに対してバックカラーもカスタマイズしていますが、これはまた次回にでもご紹介しようと思います。
プラグイン Font Awesome 4 Menus をインストールする
まずはアイコン表示のために使うプラグインのFont Awesome 4 Menusをインストールして有効化します。
WordPress内ダッシュボード>>プラグイン>>新規追加をクリックするとプラグインを追加できる画面になりますが、ここの右上部にあるプラグインの検索とデフォルトで薄く書いてある部分へFont Awesome 4 Menusと入力します。
すると、入力するだけで検索結果が現れて、該当のプラグインが表示されます。
おそらく、Font Awesome 4 Menusのプラグインは一番上に出てくると思いますが、今すぐインストールボタンをクリックしてこれをインストールし、すぐ後に現れる有効化ボタンをクリックして有効化しましょう。
特に設定などは必要はありませんので、有効化まで行えたらOKです。
メニュー構造にCSSを追加する
WordPress内ダッシュボード>>外観>>メニューをクリックしてメニュー構造を設定できる画面に移動します。
画面右上のほうに表示オプションというタブがあるので、これをクリックします。
メニュー構造で設定できる項目のうち、どの項目を画面に表示させるかという設定画面が広がるので、ここでCSSクラスにチェックを入れます。（チェックを入れ終わったら、また表示オプションタブをクリックして閉じておきましょう。）
その状態で、メニュー構造に表示する内容として並んでいる項目の右端にある▼をクリックすると、今までは無かったCSS class (オプション)という項目が見えるようになっています。
ここまでワードプレス内で設定できたら、次はアイコンのCSS classを探して設定します。
アイコンのCSS class IDを設定する
アイコンのCSSclassは、FontAwesomeIconsというサイトで探すことが出来ます。
サイトを開くと、英語でFontAwesome5Proへのアップグレードが促される画面がオーバーレイ表示されることがありますが、✕で閉じてしまって大丈夫です。
そしてスクロールして下のほうを見ていくと、様々なアイコンが並んでいるのがわかります。その中から、自分が使いたいアイコンの形のものをざっと目視で探していきます。マウスオーバーすると、アイコンの形が少し大きく表示されますので確認してみてください。
例えば、当サイトのホームに使っているアイコンは家の形をしたアイコンを選びました。
使うアイコンを見つけたら、そのアイコンをクリックします。
すると、このアイコンのIDはfa-homeだということがわかります。
このfa-homeをコピペして、さきほどメニュー構造で追加設定できるようにしたCSS class (オプション)の項目へ貼り付けると、このアイコンがメニューに表示されるようになります。
見栄えがメニュー項目のイメージに合ったようなアイコン探しがポイントにもなってきます。
今回の例のようにホームにはかなりマッチしたアイコンがすぐに見つかりましたが、なかなか見つからないこともあります。そういった場合はメニュー項目のイメージを大きく膨らませていって適当なアイコンを見つけるといいです。
グローバルナビゲーションメニューにアイコンを表示させるテクニックは、少し手間暇がかかりますが、実際にクリック率が変わってきたりしますので活用してみてください。
]]>ワードプレスでメニューと一言で言うような場合は、たいていは下のようなヘッダー下あたりに設置するグローバルナビゲーションメニューのことを指すことが多いです。
略してグローバルナビともよく言われますが、このメニュー設置方法についてご紹介します。
グローバルナビゲーション用のメニューを作成し表示設定する
まずはグローバルナビとして表示するためのメニューを作成します。
WordPress内ダッシュボード>>外観>>メニューをクリックします。
メニュー設定の画面で新規メニューを作成をクリックします。
名称を入力しメニューを作成ボタン をクリックして新規メニューを作成します。アルファベットでも、日本語でも大丈夫です。
この名前はワードプレスのサイト表面上には特に現れないので、自分が管理しやすくて後でメニュー管理画面を見た時にぱっとグローバルナビ用のメニューだとわかるような名前にするといいです。
そして、このメニューで表示する構成内容を設定します。
当サイトのように固定ページから選んで設定したり、カテゴリーから選んで設定することが多いと思いますが、固定ページが新規で作られた際に自動で追加する機能はありますが、カテゴリーは自動で追加されることが無いので運用していく上で注意しましょう。
肝心のグランドメニュー位置へこのメニュー内容を表示するための設定方法は、少し下のほうにあるメニュー設定内のメニューの位置のヘッダーナビにチェックを入れるだけです。
ただし、使っているテーマのデザインがこのグランドメニューの表示に対応していない場合は、残念ながら設定する（グランドメニューを表示する）ことはできませんので、この点はあらかじめチェックしておきましょう。
当サイトで使っているSimplisity2の場合はヘッダーナビという表現になっていますが、ここの表現はテーマによって異なるのでテーマの仕様に沿って設定しましょう。
ちなみに、よく見かけるサイトのトップページへ誘導するためのホームというようなメニュー項目はカスタムリンクで作成できます。
メニュー項目をクリックした時に移動するURLとそのメニュー項目の名前をつけてメニューに追加ボタンをクリックして追加しましょう。
メニュー構造に表示したい内容を設定し終わったら右下にあるメニューを保存ボタンをクリックして設定が完了です。
メニューをプルダウンで表示する方法
メニュー構成の並び替えは追加されている各項目をドラッグ＆ドロップすることで可能です。
更に、ドラッグ＆ドロップを行う際に少し右のほうへドロップすることで、特定のメニュー項目の下層にプルダウンで他のメニュー項目を表示させることが可能になります。
下記のような状態になればメニューがプルダウン表示されます。
この例ではホームにマウスオーバーすると、すぐ下に運営者問合せのメニュ項目が表示されるようになります。（ホームそのものもメニュー項目としてクリック可能な状態です。）
例えば、親カテゴリーに子カテゴリーを設けているような場合などには、訪問者にとってサイト構成がわかりやすくなるかもしれません。
]]>