【SWELL】グローバルナビ(ヘッダーメニュー)の設定方法

global-navigation-setting
悩んでいる男性

グローバルナビの設定について教えて

今回はグローバルナビのデザイン・レイアウトの設定について画像付きで詳しく説明しています。

この記事の内容
  • ヘッダーメニューの作成方法
  • メニューの追加方法

グローバルナビとは、ヘッダーに表示されるナビのことです。

スマホの場合は、開閉式のメニュー(ハンバーガーメニュー)にあります。

ハンバーガーメニュー

ユーザーがサイトを回遊したい時に参考にするメニューです。

ユーザーが迷うことなく見たいページにたどり着けるよう、しっかり設定しておきましょう。

目次

グローバルナビ(ヘッダーメニュー)を作成する

WordPressのダッシュボードから、「外観」>「メニュー」に進みます。

メニューを編集

すでにメニューを作成済みの場合は、①から選択、初めてメニューを作成する場合は、②メニュー名を入力します。

今回は、グローバルナビを作成するので、「グローバルナビ」と入れておくとわかりやすいです。

入力ができたら③をクリックし、メニューを作成します。

グローバルナビ(ヘッダーメニュー)のメニュー項目を追加する

メニューが出来たら、そのメニュー内に入れる項目を追加していきます。

先ほどの画面で、「メニュー項目を追加」というエリアがあります。

メニュー項目

メニューとして追加したい項目を選択します。

例えば、プロフィールを固定ページで作成しているのであれば、プロフィールを追加する場合、固定ページをクリック。

カテゴリーをメニューに追加したい場合は、カテゴリーをクリックすると、追加できる項目が確認できます。

メニュー項目を追加する

すべてを表示をクリックすると、カテゴリー内にあるすべてのカテゴリーが表示されるので、グローバルナビメニューとして追加したい項目にチェックを入れて、メニューに追加をクリックします。

メニュー設定でメニューの位置をグローバルナビにする

メニューの追加が出来たら、以下のように追加されていることが確認できます。子メニュー(下記の写真の場合は、サブカテゴリー)を作成したい場合は、項目をつかんでずらすと子メニューになります。

子メニューを調整

項目が整理出来たら、メニューを使用する位置を決めます。

今回のメニューはグローバルナビに設置するので、グローバルナビにチェックを入れて、メニューを保存します。

メニューを使用する位置

スマホの場合

スマホで開閉式のメニュー(ハンバーガーメニュー)だけでなく、ヘッダーにもメニューを追加したい場合は、スマホ用ヘッダーにもチェックを入れてください。

PCのヘッダーメニューと異なったメニューをスマホのヘッダーメニューで表示させたい場合は、今回紹介した方法と同様に設定し、最後のメニューの位置を、スマホ用ヘッダーのみにチェックを入れます。

以上でグローバルナビの設定は終わりです。

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。

global-navigation-setting

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる