Simplicityの上部メニューをカスタマイズ

ワードプレスには、全ページに共通して表示することが可能なグローバルメニュー(ナビゲーションメニューと呼んだりもする)機能というものがある。

利用するテーマによってこのグローバルメニューの表示位置は異なるが、「Simplicity」テーマを使用した場合、ページの上部にこのグローバルメニューが表示されるようになっている。

WordPressをインストールした直後の場合だと、固定ページを設定していない状態のため、以下のように「サンプルページ」という残念なメニューが表示されてしまう。

このままでは格好悪いので、「サンプルページ」と表示されている部分を変更しよう。

上部メニューのカスタマイズ方法

グローバルメニューはワードプレスの「固定ページ」を作成することでカスタマイズできる。

WordPressにログインし、管理画面左メニューから「固定ページ」をクリックしよう。

すると固定ページ一覧画面が表示される。

一覧に「サンプルページ」という固定ページが1つ表示されているはずだ。

WordPressをインストールすると、「サンプルページ」という固定ページがデフォルトで作成されてしまう。そのせいで、グローバルメニューに「サンプルページ」というメニューが表示されてしまっていたわけだ。

WordPressをインストールした直後だと、メニューとしてまとめるネタはあまりないと思う。

メニュー項目が思いつかない場合は、よくある自己紹介メニュー「当ブログについて」をとりあえずメニューに追加してみよう。

まずは、固定ページ一覧に表示されている「サンプルページ」をクリック。

すると「固定ページを編集」画面が表示される。

このサンプルページの情報を以下の手順で修正しよう。

  1. タイトル「サンプルページ」を「当ブログについて」に修正
  2. パーマリンクを編集し、ドメイン以下のURLにaboutという文字列を設定
  3. ブログの説明を修正
  4. 更新ボタンをクリック

②のパーマリンクを修正するには、右横の「編集」ボタンをクリックする。

すると、パーマリンクを編集できるようになるので設定したい文字列を入力し、「OK」ボタンをクリックする。

全ての入力が終わったら「更新ボタン」をクリックして保存しよう。

固定ページの修正が終わったらブログのトップページを表示させて確認してみよう。

トップメニューにあった「サンプルページ」が「当ブログについて」に変更されているはずだ。

「当ブログについて」の部分をクリックして固定ページを表示させてみよう。

先ほど修正したパーマリンクとページ内容で固定ページが表示されたはずだ。

メニュー項目を階層構造にする方法

先ほど作成した単純なメニューではなく、ワードプレス管理画面上部メニューのような階層構造(子メニュー)をもったメニューにすることも可能だ。

階層構造を持ったグローバルメニューを作成するには、WordPressの固定ページ作成時に親子関係を設定してやればいい。

先ほど作った「当ブログについて」を階層型メニューにして確認してみよう。

まずは固定ページ一覧画面より、「新規追加」ボタンをクリックする。

その後の手順は「当ブログについて」固定ページを作成した時とほぼ同じだが、ステップ4が新たに加わっている。

  1.  メニュータイトルを入力
  2. パーマリンクの設定
  3. 固定ページの内容を記述
  4. 親メニューを選択
  5. 「公開」ボタンをクリック

④のステップで、ページ右部分「固定ページの属性」の「親」と書かれた箇所にあるプルダウンメニューで親にしたいメニュー名を選択する。

今回は「当ブログについて」を親メニューにするので「当ブログについて」を選択した状態で「公開」ボタンをクリックして固定ページを作成する。

すると以下のように上部メニューが階層化されて表示されるようになる。

メニュー項目を追加

通常のメニューと階層構造を持ったメニューの作り方は上で説明した通りだ。

後は必要に応じて固定ページを追加して行けば、グローバルメニューの項目を追加していくことが出来る。

ためしに、もう1つ通常のメニューを追加してみよう。

固定ページ画面で「新規追加」ボタンをクリック。

以下のように入力し「親なし」設定で「公開」ボタンをクリック。

トップページを確認してみると、「当ブログについて」メニューの右横に「追加メニュー」が表示された。

メニューの順番を入れ替えるには?

固定ページを作成していけば、グローバルメニューにどんどんメニューが追加されていくことになるが、メニューの表示順序を変えたくなることがある。

そういう場合は、固定ページ編集画面内右にある「固定ページの属性」欄の「順序」で表示順序を1から順に指定してやればいい。

「追加メニュー」を 1に、「当ブログについて」を 2に設定した場合、以下のようになる。

先ほどとメニューの位置が入れ替わっていることがわかる。

最後に

今回はワードプレスのグローバルメニュー(ナビゲーションメニュー)の作り方を解説した。

グローバルメニューは、適切に設定することでユーザビリティの高いブログを構築できるので、今回紹介した記事を参考にぜひ使いやすいグローバルメニューを作成して頂ければと思う。

レクタングル広告(大)広告
レクタングル広告(大)広告

シェアする

フォローする

レクタングル広告(大)広告