ナビゲーションメニューに求められる機能の一つとして
“表示中ページまたは表示中ページの親ページを明示する”
というものがあります。
デフォルトのWordpressにはこの機能はありません。
CMSのようなデータベース型WEB構築システムで、この機能を後付けするのはかなり難しいでしょう。
そこで、以前にも紹介した弊サイトイチオシのナビゲーションプラグイン、NAVTの出番です。
このプラグインのデフォルトのCSSクラスを利用させていただきます。
まず、管理画面のNAVT用管理画面を開き、設定したいナビゲーショングループのギアアイコンをクリックし、グループのオプション画面を開きます。
オプション画面の『CSS』タブをクリックしてCSSクラスの設定画面を開き、『NAVTのCSSクラスを使用』にチェックして保存します。
NAVTのデフォルトCSSは、表示中ページ・表示中ページの親ページのリンクの li タグにそれぞれ、以下のクラスを割り当てています。
- current_page_item：表示中ページ
- current_item_parent：表示中ページの親ページ
このクラスにCSSでデザインを割り当ててやればOKです。
※注記
この方法を使った場合、トップなどに特定カテゴリの記事一覧を表示する等のカスタマイズに query_posts タグを使っている場合、『表示中ページ』がカスタム表示した特定カテゴリになってしまう事があります。
その場合は、query_posts ではなく get_posts を使うようにすればOKです。
NAVTのデフォルトCSSは他にも便利なクラスがたくさんあるので、テンプレートに合わせてNAVTをカスタマイズするのではなく、NAVTに合わせてCSSをコーディングしておくと便利です。
以下に使えそうなNAVTのCSSクラスをかいつまんでご紹介します。
ULタグに適用
- menu
- （設定画面で自ら設定したグループ名）
- msie / firefox / safari / opera ：（閲覧ブラウザ）
※Google Chromeでは safari になります。
LIタグに適用
- erow/orow ：（奇数/偶数）
- （スラッグ）-cat/page ：（カテゴリー/ページ）
- current_page_item ：（表示中ページ）
- current_item_parent ：（表示中ページの親ページ）
Aタグに適用
- navt-plink/navt-clink/navt-ilink ：（NAVTの取り扱い種別）
- current_item ：（表示中ページ）
※表示中ページの親ページにはクラス無し