JINではハンバーガーメニューというものがページの右上にあり、その中にグローバルメニューと同じ内容を表示させることができます。
ですが、ページをスクロールしていくとそのハンバーガーメニューが見えなくなり結局、
「ハンバーガーメニューって必要？？」
と疑問視する声は少なくありませんでした。
というわけで、スマホフッターメニューをタップするだけで、ハンバーガーメニューの中身を表示させるカスタマイズをご紹介します。
目次
ハンバーガーメニューを表示させる
WordPressの管理画面から「外観」→「メニュー」へ
WordPressの管理画面から「外観」→「メニュー」と飛び、編集するメニューを「スマホフッターメニュー」に設定してください。
もしまだ、スマホフッターメニューを作成していない方はJIN公式の「スマホフッターメニューの設定方法」から作成しておいてください。
表示オプションから「CSSクラス」にチェックを入れる
メニューの右上あたりに「表示オプション」というボタンがありますので、そちらをクリックすると、写真のようなボックスが出てくるかと思いますのでその中の「CSSクラス」というチェックボックスにチェックを入れてください。
カスタムリンクを作成する
カスタムリンクを作成すると、
- URL
- ナビゲーションラベル
- CSS class
- 説明
と４つの項目が表示されます。この項目それぞれに
- URL・・・#gbmenu
- ナビゲーションラベル・・・好きなラベル
- CSS class・・・gb_menu
- 説明・・・好きなJIN独自アイコン
「URL」と「CSS class」には上記をそのままコピペして書き入れ、「ナビゲーションラベル」と「説明」には好きなラベルとアイコンを入れてください。
設定できたらメニューを保存
設定できれば「メニューを保存」のボタンをクリックして、スマホで確認してください。
うまく設定できれば、以下のような形でタップしたらグローバルメニューが表示されるようになります。
独自のメニューを表示させる
スマホ時も含めて、メニューそのものに項目を掲載していない方も多くいらっしゃるかと思います。
「ハンバーガーメニューにはそんなに項目はない・・・。」
「どうせなら独自のメニューを表示させたい！」
という方にはこちらをお勧めします。
WordPressの管理画面から「外観」→「メニュー」へ
WordPressの管理画面から「外観」→「メニュー」と飛び、編集するメニューを「スマホフッターメニュー」に設定してください。
もしまだ、スマホフッターメニューを作成していない方はJIN公式の「スマホフッターメニューの設定方法」から作成しておいてください。
表示オプションから「CSSクラス」にチェックを入れる
メニューの右上あたりに「表示オプション」というボタンがありますので、そちらをクリックすると、写真のようなボックスが出てくるかと思いますのでその中の「CSSクラス」というチェックボックスにチェックを入れてください。
カスタムリンクを作成する
カスタムリンクを作成すると、
- URL
- ナビゲーションラベル
- CSS class
- 説明
と４つの項目が表示されます。この項目それぞれに
- URL・・・#menu
- ナビゲーションラベル・・・好きなラベル
- CSS class・・・menu
- 説明・・・好きなJIN独自アイコン
「URL」と「CSS class」には上記をそのままコピペして書き入れ、「ナビゲーションラベル」と「説明」には好きなラベルとアイコンを入れてください。
カスタムリンクに副項目のメニューを追加する
カスタムリンクを作成できたら、MENUをタップして表示させるメニューを作成していきます。
上記にように、あなたのブログで表示させたいメニューをそれぞれ作成し、それを「MENUの副項目」に設定します。
ドラッグアンドドロップで簡単にできますので、試してみてください。
設定できたらメニューを保存する
設定できれば「メニューを保存」のボタンをクリックして、スマホで確認してください。
うまく設定できれば、以下のような形でタップしたら独自のメニューが表示されるようになります。
「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。
WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。
「自分のブログが好き」
そんな人が1人でも増えてくれたらと心から願っています。
