ワードプレスには、全ページに共通して表示することが可能なグローバルメニュー（ナビゲーションメニューと呼んだりもする）機能というものがある。
利用するテーマによってこのグローバルメニューの表示位置は異なるが、「Simplicity」テーマを使用した場合、ページの上部にこのグローバルメニューが表示されるようになっている。
WordPressをインストールした直後の場合だと、固定ページを設定していない状態のため、以下のように「サンプルページ」という残念なメニューが表示されてしまう。
このままでは格好悪いので、「サンプルページ」と表示されている部分を変更しよう。
上部メニューのカスタマイズ方法
グローバルメニューはワードプレスの「固定ページ」を作成することでカスタマイズできる。
WordPressにログインし、管理画面左メニューから「固定ページ」をクリックしよう。
すると固定ページ一覧画面が表示される。
一覧に「サンプルページ」という固定ページが1つ表示されているはずだ。
WordPressをインストールすると、「サンプルページ」という固定ページがデフォルトで作成されてしまう。そのせいで、グローバルメニューに「サンプルページ」というメニューが表示されてしまっていたわけだ。
WordPressをインストールした直後だと、メニューとしてまとめるネタはあまりないと思う。
メニュー項目が思いつかない場合は、よくある自己紹介メニュー「当ブログについて」をとりあえずメニューに追加してみよう。
まずは、固定ページ一覧に表示されている「サンプルページ」をクリック。
すると「固定ページを編集」画面が表示される。
このサンプルページの情報を以下の手順で修正しよう。
- タイトル「サンプルページ」を「当ブログについて」に修正
- パーマリンクを編集し、ドメイン以下のURLにaboutという文字列を設定
- ブログの説明を修正
- 更新ボタンをクリック
②のパーマリンクを修正するには、右横の「編集」ボタンをクリックする。
すると、パーマリンクを編集できるようになるので設定したい文字列を入力し、「OK」ボタンをクリックする。
全ての入力が終わったら「更新ボタン」をクリックして保存しよう。
固定ページの修正が終わったらブログのトップページを表示させて確認してみよう。
トップメニューにあった「サンプルページ」が「当ブログについて」に変更されているはずだ。
「当ブログについて」の部分をクリックして固定ページを表示させてみよう。
先ほど修正したパーマリンクとページ内容で固定ページが表示されたはずだ。
メニュー項目を階層構造にする方法
先ほど作成した単純なメニューではなく、ワードプレス管理画面上部メニューのような階層構造（子メニュー）をもったメニューにすることも可能だ。
階層構造を持ったグローバルメニューを作成するには、WordPressの固定ページ作成時に親子関係を設定してやればいい。
先ほど作った「当ブログについて」を階層型メニューにして確認してみよう。
まずは固定ページ一覧画面より、「新規追加」ボタンをクリックする。
その後の手順は「当ブログについて」固定ページを作成した時とほぼ同じだが、ステップ４が新たに加わっている。
- メニュータイトルを入力
- パーマリンクの設定
- 固定ページの内容を記述
- 親メニューを選択
- 「公開」ボタンをクリック
④のステップで、ページ右部分「固定ページの属性」の「親」と書かれた箇所にあるプルダウンメニューで親にしたいメニュー名を選択する。
今回は「当ブログについて」を親メニューにするので「当ブログについて」を選択した状態で「公開」ボタンをクリックして固定ページを作成する。
すると以下のように上部メニューが階層化されて表示されるようになる。
メニュー項目を追加
通常のメニューと階層構造を持ったメニューの作り方は上で説明した通りだ。
後は必要に応じて固定ページを追加して行けば、グローバルメニューの項目を追加していくことが出来る。
ためしに、もう1つ通常のメニューを追加してみよう。
固定ページ画面で「新規追加」ボタンをクリック。
以下のように入力し「親なし」設定で「公開」ボタンをクリック。
トップページを確認してみると、「当ブログについて」メニューの右横に「追加メニュー」が表示された。
メニューの順番を入れ替えるには？
固定ページを作成していけば、グローバルメニューにどんどんメニューが追加されていくことになるが、メニューの表示順序を変えたくなることがある。
そういう場合は、固定ページ編集画面内右にある「固定ページの属性」欄の「順序」で表示順序を1から順に指定してやればいい。
「追加メニュー」を １に、「当ブログについて」を 2に設定した場合、以下のようになる。
先ほどとメニューの位置が入れ替わっていることがわかる。
最後に
今回はワードプレスのグローバルメニュー（ナビゲーションメニュー）の作り方を解説した。
グローバルメニューは、適切に設定することでユーザビリティの高いブログを構築できるので、今回紹介した記事を参考にぜひ使いやすいグローバルメニューを作成して頂ければと思う。