こんにちは!ゆめたかです♪
今回はWordPress有料テーマ「SWELL」で、あのカッコ良いヘッダーメニューを作成する方法を紹介します。
カッコ良いヘッダーメニューの作成方法
あのカッコ良いヘッダーメニューは「外観」>「メニュー」から作成することができます。

手順①「メニューを作成する」
メニュー画面から「メニュー名」に任意のメニュー名を入力します。
私は”ヘッダーメニュー”という名前にしました。
また、PC用とスマホ用のヘッダーメニューを共通に管理したいので、「グローバルナビ」と「スマホ用ヘッダー」にチェックをつけ、「メニューを作成」ボタンを押下します。

手順②「メニュー項目を追加する」
作成したヘッダーメニューへメニュー項目を追加していきます。
私は以下のようなヘッダーメニューを作りたいので、カスタムリンクとカテゴリの中からメニュー項目を追加していきます。

カスタムリンクのメニュー項目を追加する
まずはカスタムリンクのメニュー項目を追加します。
カスタムリンクのエリアの「URL」にトップページのURL、「リンクの文字列」に表示させたい文字を入力して、「メニューに追加」ボタンを押下します。

カスタムリンクのメニュー項目が追加されました。

カテゴリーのメニュー項目を追加する
次にカテゴリーのメニュー項目を追加します。
カテゴリーのエリアの追加したいカテゴリーにチェックをつけ、「メニューに追加」ボタンを押下します。

カスタムリンクのメニュー項目が追加されました。

手順③「メニュー下の文言を設定する」
メニュー下に任意の文言が表記されるように設定します。

設定項目を表示する
メニュー下に文言を表記させるには追加したメニュー項目の詳細パネルの「説明」項目から設定をしますが、デフォルトだと詳細パネルにこの項目が表示されていないので表示されるように事前に以下操作を行います。
メニュー画面の右上にある「表示オプション」を押下するとパネルが開くので、そこから「説明」にチェックをつけるだけです。

英字部分を入力する
メニュー項目の右側にある「▼」ボタンを押下して詳細パネルを開きます。
「設定」項目が追加されているので、そこにメニュー下に表示したい文言を入力します。

手順④「メニューの並び順を設定する」
追加したメニュー項目の並び順をドラッグして任意の並び順に変更してメニュー構造を設定します。
この際にメニュー項目を右側にドラッグすることで、メニューをホバーした際に表示されるサブ項目として設定することもできます。

最後に「メニューを保存」ボタンを押下すればヘッダーメニューの作成完了です。

まとめ
以上、SWELLのあのカッコ良いヘッダーメニューの作成手順でした。
「設定」項目の表示部分で若干手こずりましたがそれ以外は感覚的に操作できましたかね。
最後に作業内容をまとめます。
作業内容まとめ
「外観」>「メニュー」からヘッダーメニューを作成する。
・手順① メニューを作成する
・手順② メニュー項目を追加する
・手順③ メニュー下の文言を設定する
・手順④ メニューの並び順を設定する
コメント