グローバルメニューでカテゴリーの階層化をポップアップ表示

ヘッダー下のメニューバー(グローバルナビ/ヘッダーメニュー)に、カテゴリを配置して、カーソルで触れた時に下にそのカテゴリの階層(子カテゴリ)がドロップダウン表示(下に向かってダーーーっとアコーディオンみたいにポップアップ表示)されるようにしました。

ただ、この状態だと、親カテゴリをクリックすると、親カテゴリ全部を見られる状態のページに行けてしまいます。通常はこれでいいと思いますが、「親カテゴリに移動してほしくない!」「その下の階層から選んでピンポイントで移動してほしい!」場合もあるので、親カテゴリをクリックできない状態にする方法も試してみました。

※WordPressのSimplicityで行った作業ですが、グローバルナビゲーションの場合、WordPressなら大体同じ感じでカスタマイズできるようです。他のテーマでも出来ました。

メニューバーを階層化表示させる一番簡単な方法

※この方法は、wordpressの「外観」→「メニュー」からカスタマイズする方法です。

あらかじめ、新規メニュー(ヘッダーナビにチェックを入れて)を作成している状態で始めます。

簡単です。

ただ、好きなものを好きな場所にドラッグ&ドロップするだけ。

該当の項目の下に右に少しずらして設置するだけで、階層化表示されるようになります。

副項目の下にも設置できるので、こんな感じで階層を組むことができます。

その結果、メニューバーではこんな風に階層化表示されました。

ただし、このままだと、メニューバーの項目をクリックすると、その項目に属しているすべての記事がならんでいるページに移動します。

通常はこれでいいと思うのですが、より細分化した副項目からの方が探しやすい場合もあるので、その場合はメニューバーの項目をクリックできないようにすることが出来ます。

メニューバーで親カテゴリをクリック出来ないようにする方法

※この方法は、WordPressの超有名テーマ「Simplicity」のフォーラム内トピックを参考にさせてもらいました。「親メニューをクリックした時に何もさせない方法を教えてください」で検索すると出てきます。リンクを貼っていいか分からないので、この場でお礼申し上げます。質問者さん、回答者さん、管理者さん、有難うございます。

メニューにカスタムリンクを追加する

メニューのカスタム画面の「カスタムリンク」を使います。
URLのところには「#」を入力し、リンク文字列は任意の文字を入れます。(あとで編集できますのでご心配なく)

追加したら、階層化したい項目をずらして追加していきます。

URLを削除します。

以上で、カーソルで触れても変化は起きず、クリックしてもどこかに飛んで行ったりしません。

まとめ

今回はカテゴリを階層化表示しましたが、カテゴリじゃなくても、なんでも自由に追加できるので便利ですね。初心者にも出来ました!

スポンサーリンク
スポンサーリンク