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

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

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

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

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

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

固定ページを準備

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

メニューを作成

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

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

メニュー項目を追加

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

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

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

表示確認

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

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

メニュー項目を追加

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

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

表示確認

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

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

メニュー項目を追加

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

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

表示確認

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

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

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

管理画面メニューから、「外観」＞「カスタマイズ」を選択します。

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

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

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

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

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

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

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

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

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

アイコンを付ける

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

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

「Font Awesome」の読み込み設定

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

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

アイコンを付ける

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

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

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

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

【おまけ①】検索ボタンの位置を変更する

デフォルトでは検索ボタンはヘッダーバー内にあります。

管理画面メニューから、「外観」＞「カスタマイズ」を選択した後からの解説となります。

サイドバーから、「ヘッダー」を選択します。

ヘッダーが表示された後、検索ボタン設定内の検索ボタン表示位置（PC）から以下を選択します。すると、検索ボタンがヘッダーメニューに表示されます。

【おまけ②】SNSリンクや検索ボタンをヘッダー内部に設置する

SNSリンクや検索ボタンをヘッダー内部に設置できます。

デフォルトでは、SNSリンクや検索ボタンはヘッダーバーに表示されます。

SNSリンクを表示する

カスタマイザーから、「SNS情報」を選択します。

SNSリンク設定から、URLを入力するとSNSリンクが表示されます。

ヘッダーバーのSNSアイコンリストを非表示にする

カスタマイザーから、「ヘッダー」を選択します。

ヘッダーから、以下の設定を行うとヘッダーバーが非表示になります。

ヘッダー内部にSNSリンクと検索ボタンを設置する

カスタマイザーから、「ウィジェット」を選択します。

ウィジェットから、「ヘッダー内部」を選択します。

ヘッダー内部から、「ウィジェットを追加」＞「[SWELL]SNSリンク」を選択します。

[SWELL]SNSリンクから、以下の設定を行います。

[SWELL]SNSリンクをヘッダー内部に追加した時点でSNSリンクが設置されます。

今回は以上です。