サイトのヘッダー部(上部)にナビゲーションメニューを表示する

Word Press
スポンサーリンク

サイドバーの「カテゴリー」によって、
記事の分類ができてはいるものの

初めて閲覧してくれた人でも
記事の検索がしやすい様に
画面トップに
ナビゲーションメニュー(ナビゲーションバー)を表示します。

スポンサーリンク

ナビゲーションメニュー表示方法

Word Pressの管理画面にて
「外観」の項目内にある【メニュー】をクリック

すると
次のような「メニュー編集」のページが開きます。

[メニュー名]欄に作成するメニューの名前を入力し、
(今回はヘッダー部分(タイトルの下)に表示するメニューの作成なので「ヘッダーメニュー」とでも名付けます。)

右の【メニューを作成】をクリック

メニューは、サイトの上下左右と表示場所を設定でき、場所によって表示内容も編集できます。
メニュー名は、メニューを複数作成した場合に
自身がどの位置に設定しているメニューかを把握するための、管理面で必要なものなので、メニュー名は何でも構いません。

すると
画像の様に編集が可能な状況になります。

メニュー構造へ表示したい項目を追加

メニューの構造(どのような分類で表示するかなど)をここで設定します。

左側のカラム
・固定ページ
・投稿
・カスタムリンク
・カテゴリー

この中から
何をメニューに設定したいかを選択し
【メニューに追加】をクリックして
右側の「メニュー構造」に追加してゆきます。

今回はとりあえず
サイドバーのカテゴリーの表示と同じような構造にしてみましょう。

「カラム」から「メニュー構造」へ表示したい項目を追加

表示したい項目にチェックを入れ
【メニューに追加】をクリック

すると
画像の様に
「メニュー構造」へ追加されました。

メニューの表示の仕方や順番を設定

編集したい項目の【▼】をクリックすると
次の様に
編集コマンドが展開されます。

ナビゲーションラベル
作成したメニューに表示する内容

移動
ひとつ上へ   :項目が一つ上へ移動
ひとつ下へ   :項目が一つ下へ移動
○○ 下の階層 :○○(一つ上にある)項目の下の階層へ移動
先頭へ     :一番上へ移動

今回は
次のような設定にしてみましょう。

メニュー設定

このメニューに新しいトップレベルページを自動的に追加

ヘッダーナビ

サイトのヘッダー部分に
ナビゲーションメニューを表示します。

モバイルヘッダーナビ(サブ不可)

Cocoonでは、モバイル用のグローバルナビを設定することが可能となっており、
モバイル用のグローバルメニューは、768px以下の幅の端末で表示される仕様となっています。

フッターナビ(サブ不可)

サイトのフッター部分に
ナビゲーションメニューを表示します。

 

今回はとりあえず
次の二つにチェックを入れました。

【メニューを保存】をクリック
これで、完了です。

スポンサーリンク

実際のサイトの仕上り

今回の設定での
実際の仕上りが

これです

「メニュー構造」の内容で
階層化した項目は

右側に【下矢印】が表示され
上の階層の項目に隠れています。

この項目にカーソルを合わせると

このように
自動で展開されるようになっています。

 

今回は
メニュー構造に
カテゴリーの項目しか使っていませんが

固定ページや投稿記事もメニューに設定できるので
自分でアレンジしたHOME画面や
会社のHPのような設定も簡単にできます。

是非試してみましょう。

コメント