【SWELL】メニュー（グローバルナビ）設定とアイコンの表示方法

こういった悩みにお答えします。

本記事を読むことで以下のようなグローバルナビが作れるようになります

ドロップダウンさせることもできます。

SWELLでメニュー（グローバルナビ）を設置する方法を解説

グローバルナビに固定ページを設置する

固定ページを準備

以下の5記事を用意しました。

メニューを作成

管理画面メニューから、「外観」＞「メニュー」を選択します。

「メニュー名」を入力後、「メニューを作成」をクリックします。

メニュー項目を追加

固定ページから、追加したい項目を選択後、「メニューに追加」をクリックします。

追加されたメニューを並び替え、メニュー設定から「グローバルナビ」を選択後、「メニューを保存」をクリックします。

並び替えはドラッグ&ドロップ方式で行えます。

表示確認

プレビューすると、グローバルナビに固定ページが表示されています。

グローバルナビに固定ページ以外も設置する

メニュー項目を追加

「固定ページ」「投稿」「カスタムリンク」「カテゴリー」からメニュー項目を追加します。

以下の4項目を追加しました。

表示確認

プレビューすると、グローバルナビに固定ページ・投稿・カスタムリンク・カテゴリーが表示されています。

メニューをドロップダウン表示させる

メニュー項目を追加

メニュー項目を追加します。

追加したメニュー項目を並び替えかつ右にスライドさせてサブ項目にします。

表示確認

プレビュー後、サンプルページにカーソルを乗せるとメニューがドロップダウン表示されます。

サンプルページ下にサブ項目を設置したのでこのような動きになっています。

メニュー項目下に説明を表示させる

サイトを表示させた状態から、「カスタマイズ」を選択します。

サイドバーから、「メニュー」を選択します。

メニューから、「グローバルナビメニュー」を選択します。

グローバルナビメニューが表示されます。

ホームを開いて「説明」にテキストを入力すると、メニュー下に表示されます。

全てのメニュー下に説明を表示させました。

SWELLでメニュー（グローバルナビ）にアイコンを表示させる方法を解説

アイコンを表示させるには以下の2パターンがありますのでそれぞれ解説していきます。

「SWELLで使えるアイコン一覧」のアイコンを使う

グローバルナビメニューを開いた所から解説していきます。

アイコンを付ける

ナビゲーションラベルに「[icon ココにアイコンクラス名] ホーム」と入力すると「 ホーム」と表示されます。

「Font Awesome」のアイコンを使う

「Font Awesome」の読み込み設定

管理画面メニューから、「SWELL設定」＞「SWELL設定」を選択します。

「Font Awesome」を選択後、以下に設定します。

アイコンを付ける

ナビゲーションラベルに「[icon class="ココにアイコンクラス名"] サンプルページ」と入力すると「 サンプルページ」と表示されます。

全てのメニューにアイコンを付けました。

ドロップダウンさせた状態です。

「SWELLで使えるアイコン一覧」や「Font Awesomeの詳しい使い方」は下記記事に記載しています。

今回は以上です。