ヘッダー下のメニューバー(グローバルナビ/ヘッダーメニュー)に、カテゴリを配置して、カーソルで触れた時に下にそのカテゴリの階層(子カテゴリ)がドロップダウン表示(下に向かってダーーーっとアコーディオンみたいにポップアップ表示)されるようにしました。
ただ、この状態だと、親カテゴリをクリックすると、親カテゴリ全部を見られる状態のページに行けてしまいます。通常はこれでいいと思いますが、「親カテゴリに移動してほしくない！」「その下の階層から選んでピンポイントで移動してほしい！」場合もあるので、親カテゴリをクリックできない状態にする方法も試してみました。
※WordPressのSimplicityで行った作業ですが、グローバルナビゲーションの場合、WordPressなら大体同じ感じでカスタマイズできるようです。他のテーマでも出来ました。
メニューバーを階層化表示させる一番簡単な方法
※この方法は、wordpressの「外観」→「メニュー」からカスタマイズする方法です。
あらかじめ、新規メニュー(ヘッダーナビにチェックを入れて)を作成している状態で始めます。
簡単です。
ただ、好きなものを好きな場所にドラッグ＆ドロップするだけ。
該当の項目の下に右に少しずらして設置するだけで、階層化表示されるようになります。
副項目の下にも設置できるので、こんな感じで階層を組むことができます。
その結果、メニューバーではこんな風に階層化表示されました。
ただし、このままだと、メニューバーの項目をクリックすると、その項目に属しているすべての記事がならんでいるページに移動します。
通常はこれでいいと思うのですが、より細分化した副項目からの方が探しやすい場合もあるので、その場合はメニューバーの項目をクリックできないようにすることが出来ます。
メニューバーで親カテゴリをクリック出来ないようにする方法
※この方法は、WordPressの超有名テーマ「Simplicity」のフォーラム内トピックを参考にさせてもらいました。「親メニューをクリックした時に何もさせない方法を教えてください」で検索すると出てきます。リンクを貼っていいか分からないので、この場でお礼申し上げます。質問者さん、回答者さん、管理者さん、有難うございます。
メニューにカスタムリンクを追加する
メニューのカスタム画面の「カスタムリンク」を使います。
URLのところには「＃」を入力し、リンク文字列は任意の文字を入れます。(あとで編集できますのでご心配なく)
追加したら、階層化したい項目をずらして追加していきます。
URLを削除します。
以上で、カーソルで触れても変化は起きず、クリックしてもどこかに飛んで行ったりしません。
まとめ
今回はカテゴリを階層化表示しましたが、カテゴリじゃなくても、なんでも自由に追加できるので便利ですね。初心者にも出来ました！
