WordPressテーマ ルクセリタス|メニュー作成でグローバルナビゲーションを表示する
Webサイトでよく見かけるタイトルの上下などにあるナビリンクは
サイト内のコンテンツを分かりやすく表示することができます。
WordPressテーマのルクセリタスでは メニュー機能を使って
独自に作成したメニューをグローバルナビや サイドバーに設置することができます。
この グローバルナビゲーションと メニューの作成についてまとめていきます。
グローバルナビゲーションとは?
ヘッダーナビ(グローバルナビゲーション)は Webサイトの
主要なコンテンツにアクセスしやすくするための メニューバー になります。
WordPressのテーマによって メニューバーの位置なども違ってくるようですが
グローバルナビゲーションは サイトタイトルの上下、Webサイトの一番上に 帯状に設置するメニューなどもあります。
ルクセリタスでの場合、外観の項目 > メニューを選択し、グローバルナビゲーションやサイドバーに設置するメニューを作成。
① 外観カスタマイズから グローバルナビゲーションや帯状のメニューの設定
② ウィジェットの設置画面から サイドバーやフッターに設置するなど 使いかたがいくつかあります。
メニュー機能の使いかた
メニューの作成は ダッシュボード画面の 外観の項目 > メニューから行います。
メニューを作成は、初めての場合は メニュー構造の下のメニュー名から作成
追加する場合は、メニュー構造の上の 新しいメニューを作成しましょう。をクリックし新たなメニュー画面を開きます。
作成したメニュー名は 分かりやすいネーミングがいいですが後から変更可能ですのでとりあえず気軽に付けてみます。
メニュー項目を追加
メニューで表示したい項目を選択します。
設定できる項目は、固定ページ・投稿・カスタムリンク・カテゴリ の4項目です。
それぞれ 特定のページをメニューとして選択することができ
これらのページをミックスし 一つのメニューを作ることができます。
今回、例として 固定ページ1・2 というタイトルのページを作成しました。
メニューに追加するページにチェックを入れ メニューに追加をクリックします。
ラベル (名前)の変更と表示位置の移動
メニューに追加したページのラベル変更と配置を設定していきます。
メニュー名は 選択したページ ( コンテンツ ) のタイトルと別の名前を ラベルとして設定でき
また、表示させたい順位や階層を持たせることで メニューをより分かりやすく表示することが出来ます。
編集するには 項目の右の ▼ をクリックし メニューを開きます。
順序の入れ替えは " 一つ上へ " や " ~の下へ " のクリックでもからもできますが
メニューバーを左クリックしたままドラッグ&ドロップで移動することもできます。
左クリックしたまま スライド移動させると うっすら点線で移動できる位置が表示されます。
少し右に表示される位置に移動させることで このメニューに階層を作ることが出来ます。
メニューの編集と位置の管理
どのメニューをどの位置に表示させるのか?また、編集するメニューをここから選択していきます。
表示させるメニューの位置
メニューの表示できる位置は ヘッダー(グローバルナビ)・ヘッダーの上の帯状メニュー
あと、フッターや サイドバーにも設置可能です。
このサイトの上部に グローバルナビゲーションメニューを設置されているサイトも多いですね。
フッターは 投稿記事より下の部分です。
使用しているテーマによって メニュー項目にフッターがない場合でも
ウィジェットから フッターにメニューを表示することが出来ます。
外観カスタマイズからメニューを確認する
外観カスタマイズからメニューやグローバルナビゲーションなどの表示イメージを確認していきます。
メニューの表示イメージ確認
作成したメニューを 外観カスタマイズからの画面で見ていきます。
外観カスタマイズ → メニュー から ナビに設定するメニューを選択します。
現在 設定されているメニューの 変更などもここから行えます。
副項目を設定した 固定ページ1 にマウスを当てると 固定ページ2 がプルダウンで表示されます。
グローバルナビゲーションと帯状のメニュー
メニューの項目より少し上段に ヘッダーナビと ヘッダーの上の帯状メニューの設定項目があります。
こちらで メニューを表示させる位置の設定と 外観的なカスタマイズを自由に指定できます。
外観カスタマイズはこちらでまとめています。
サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress
メニュー機能を使ってサイドバーのカテゴリー作成もできます。詳しくはこちら↓
カテゴリーの 一覧表示と Font Awesome アイコンを表示させるCSS|ルクセリタス