当サイトのテーマ『STORK19』はこちら

【STORK19】ハンバーガーメニューにカテゴリー毎の固定ページを並べる方法を解説

ハンバーガーメニューに好きなカテゴリ毎にページリンクを並べたい!と思ったことはありませんか?

この記事では画像のようにハンバーガーメニューに

見出し+固定ページの一覧

を並べる方法を解説していきます。ウィジェットの機能を使うだけなので、難しい知識などは必要なく誰でも出来ます。

同じように並べたい方は、是非参考にしてみて下さい。

今回ご紹介するやり方は、wordpressの有料テーマの1つである『STORK19 』でのやり方になります。

ハンバーガーメニューに固定ページを設定

完成イメージは画像のようになります。

私のブログは株式投資の銘柄を業種別に並べたかったので、業種別(カテゴリー)+銘柄(固定ページ)が縦に並ぶようにしています。

使っているテーマはSTORK19



今回ご紹介するやり方は、wordpressの有料テーマの1つである『STORK19 』でのやり方です。

私は以前『JIN』を使っていましたが、ブログ初心者なこともあり、自分の思うようなハンバーガーメニューを作れませんでした。

株式投資の対象銘柄を業種別に並べたかったのですが、さっぱり分からず…

ところがSTORK19にテーマを変更したら簡単に並べることができたので、同じようにしたい方は思い切ってテーマを変えてみるのがおすすめです。

WEBサイトの作成をしてくれる業者に頼もうか迷ったりしましたが、STORK19の価格(11,000円)よりもかなり費用がかかるみたいなので、今はテーマを買って良かったと思っています。

それでは具体的なやり方を次から解説していきます!

並べたいページを固定ページで作成する

まずは並べたいページを「固定ページ」(上記にある完成イメージ画像のNTT、KDDIなどの部分)で作ります。(記事ではありません)

これは後述しますが、ハンバーガーメニューに設定できる「固定ページ一覧」を使って表示するからです。

最終的にこれを使って作ります

若しくは既に書いた記事があって、それを載せたいと思っていた方は、記事を固定ページにコピペしていきましょう。

コピーする方法は、既に作成している記事内で「コードエディター」にしてから、全てのコードをコピーすると楽です。

あとは新たに作成した固定ページに、コードを貼り付けるだけで簡単に作ることができます。

見出しの下部に並べたいものを全て固定ページで作る必要があります。

私のブログ例で言うと、見出し「通信・情報」の下部に表示したい固定ページを4つ(NTT、KDDI、ソフトバンク、沖縄セルラー)作成します。

ハンバーガーメニューの編集

並べたい固定ページを作成し終わったら、次はハンバーガーメニューを作っていきます。管理画面からの行き方は、以下を参考にして下さい。

ハンバーガーメニューへの行き方

①管理画面で、「外観」→「ウィジェット」

②右上にある「ライブプレビューで管理」

③下の画面へ行けます

①「ウィジェットを追加」 ➡︎ 「固定ページ」を選択する

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

私のブログで言うと「通信・情報」などに表示させている部分です。

②除外ページを入れていく

①の手順だけだと、これまで作った全ての固定ページが並んでしまいます

なので編集画面にある「除外ページ」の項目に、不要な固定ページのIDを全て入れていきます。

(見出し数を増やす程、入れるIDの数も増えて大変ですが、頑張りましょう!)

固定ページのIDの確認方法

●スマホでの確認方法(PCも同様です)

固定ページ編集画面のURLから確認できます

③完成

除外ページのIDを入れ終わったら完成です。IDの確認と入力は大変ですが、やり方はシンプルですね。

ちなみに私の編集画面はこんな感じになってます。固定ページをたくさん並べたかったので、除外ページが見切れていますが、すごいことになっています…

私の編集画面(通信・情報部分)

複数のカテゴリに分けて並べたい場合

私のブログのように複数のカテゴリに分けてページを並べたい場合は、これまでの作業を繰り返す必要があります。

具体的には下の画像のようにカテゴリ毎に「固定ページ」を作って、それぞれに1つずつ除外IDを入れていく必要があります。

私の編集画面

固定ページを作成する度に全ての箇所の設定をし直す必要があります。何度も確認しながらやってみて下さい。

Stork19でハンバーガーメニューに固定ページ一覧を作る方法まとめ

以上がスマホハンバーガーメニューにカテゴリ分けした固定ページを並べる方法でした。

STORK19 』ではスマホ用に特化したテーマだけあって、ハンバーガーメニューの編集も簡単にカスタマイズできました!

他のテーマを使っていて、中々うまくいかないなと思っている方は、是非テーマの変更を検討してみて下さい。



https://go-fire-3.com/archives/11170

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA