ハンバーガーメニューに好きなカテゴリ毎にページリンクを並べたい!と思ったことはありませんか?
この記事では画像のようにハンバーガーメニューに
を並べる方法を解説していきます。ウィジェットの機能を使うだけなので、難しい知識などは必要なく誰でも出来ます。
同じように並べたい方は、是非参考にしてみて下さい。
今回ご紹介するやり方は、wordpressの有料テーマの1つである『STORK19 』でのやり方になります。
ハンバーガーメニューに固定ページを設定

完成イメージは画像のようになります。
私のブログは株式投資の銘柄を業種別に並べたかったので、業種別(カテゴリー)+銘柄(固定ページ)が縦に並ぶようにしています。
使っているテーマはSTORK19
今回ご紹介するやり方は、wordpressの有料テーマの1つである『STORK19 』でのやり方です。
私は以前『JIN』を使っていましたが、ブログ初心者なこともあり、自分の思うようなハンバーガーメニューを作れませんでした。
株式投資の対象銘柄を業種別に並べたかったのですが、さっぱり分からず…
ところがSTORK19にテーマを変更したら簡単に並べることができたので、同じようにしたい方は思い切ってテーマを変えてみるのがおすすめです。
WEBサイトの作成をしてくれる業者に頼もうか迷ったりしましたが、STORK19の価格(11,000円)よりもかなり費用がかかるみたいなので、今はテーマを買って良かったと思っています。
それでは具体的なやり方を次から解説していきます!
並べたいページを固定ページで作成する
まずは並べたいページを「固定ページ」(上記にある完成イメージ画像のNTT、KDDIなどの部分)で作ります。(記事ではありません)
これは後述しますが、ハンバーガーメニューに設定できる「固定ページ一覧」を使って表示するからです。

若しくは既に書いた記事があって、それを載せたいと思っていた方は、記事を固定ページにコピペしていきましょう。
コピーする方法は、既に作成している記事内で「コードエディター」にしてから、全てのコードをコピーすると楽です。
あとは新たに作成した固定ページに、コードを貼り付けるだけで簡単に作ることができます。
見出しの下部に並べたいものを全て固定ページで作る必要があります。
私のブログ例で言うと、見出し「通信・情報」の下部に表示したい固定ページを4つ(NTT、KDDI、ソフトバンク、沖縄セルラー)作成します。

ハンバーガーメニューの編集
並べたい固定ページを作成し終わったら、次はハンバーガーメニューを作っていきます。管理画面からの行き方は、以下を参考にして下さい。
①管理画面で、「外観」→「ウィジェット」
②右上にある「ライブプレビューで管理」
③下の画面へ行けます

①「ウィジェットを追加」 ➡︎ 「固定ページ」を選択する
まずは「ウィジェットを追加」を押してから、「固定ページ」を選択します。これを選択すると、下の画像のページが出てくるのでタイトルを入れます。

私のブログで言うと「通信・情報」などに表示させている部分です。
②除外ページを入れていく
①の手順だけだと、これまで作った全ての固定ページが並んでしまいます。
なので編集画面にある「除外ページ」の項目に、不要な固定ページのIDを全て入れていきます。
(見出し数を増やす程、入れるIDの数も増えて大変ですが、頑張りましょう!)

●スマホでの確認方法(PCも同様です)
固定ページ編集画面のURLから確認できます


③完成
除外ページのIDを入れ終わったら完成です。IDの確認と入力は大変ですが、やり方はシンプルですね。
ちなみに私の編集画面はこんな感じになってます。固定ページをたくさん並べたかったので、除外ページが見切れていますが、すごいことになっています…

複数のカテゴリに分けて並べたい場合
私のブログのように複数のカテゴリに分けてページを並べたい場合は、これまでの作業を繰り返す必要があります。
具体的には下の画像のようにカテゴリ毎に「固定ページ」を作って、それぞれに1つずつ除外IDを入れていく必要があります。

固定ページを作成する度に全ての箇所の設定をし直す必要があります。何度も確認しながらやってみて下さい。
Stork19でハンバーガーメニューに固定ページ一覧を作る方法まとめ
以上がスマホハンバーガーメニューにカテゴリ分けした固定ページを並べる方法でした。
『STORK19 』ではスマホ用に特化したテーマだけあって、ハンバーガーメニューの編集も簡単にカスタマイズできました!
他のテーマを使っていて、中々うまくいかないなと思っている方は、是非テーマの変更を検討してみて下さい。
見出し+固定ページの一覧