ハンバーガーメニューの作り方
wp-jintest
ハンバーガーメニューの作成方法(かんたん編)
ハンバーガーメニューというのは、3本線で開閉できるメニューのことですね。
これです↓

まずは初心者向けの「ハンバーガーメニュー」の作り方を解説していきます。
メニュー設定を開く
WordPressの黒いバーから「カスタマイズ」を開いて

メニュー設定へと進みます

そうするとメニュー作成画面があるので「メニューを新規追加」を押しましょう。

メニュー名を「ハンバーガーメニュー」として、チェックを入れて「次」に進みます。

あとは、メニューの中に好きな投稿などを入れていけば、完成です。

「 項目を追加」のボタンを押すと、右側から記事を選んでメニューを追加できるようになります。
内容が整ったら「公開」ボタンを押して保存しましょう。
応用編|ブロックでハンバーガーメニューを組む
JIN:Rでは、ハンバーガーメニューをブロックで組み上げられるようにしました。
ブロックで組んだ方が、圧倒的に自由度の高くてリッチな表示になるようにしていますので、ぜひ試してみてください。
ハンバーガーウィジェットを開く
WordPress管理画面から「外観」>「ウィジェット」へと進みましょう。するとハンバーガーメニューの項目が見つかります。

さて、あとはこの中をブロックで組み立てていくだけです。
ちなみにマニュアルの場合だと、こんな感じで「カラム」の中に「ナビゲーションメニュー」を入れて整理しています。

※ 申し訳ないですが、プレビューはどうしても狂います。実際の画面と照らし合わせながら作成を進めてください。
PCでもハンバーガーメニューを表示させるには?
JIN:Rでは、PCでもハンバーガーメニューが表示できるようになっています。
「カスタマイズ」 > 「サイトデザイン設定」に進むと、ヘッダーの項目に「PCでもハンバーガーメニューを表示」のボタンがあります。

これをONにしてもらうと、PCでハンバーガーを表示できます!
ABOUT ME