技術ブログ
【WordPress】subメニューの表示
subメニューにカテゴリー一覧や月別一覧を表示する方法について書いていきたいと思います。
subメニューの設定はテンプレート「sidebar.php」にコード記述します。
テンプレートに設定後、subメニューを表示させたい各テンプレート(archive.php,category.phpなど)に「sidebar.php」を読み込めばsubメニュー表示することができます。
設定方法を以下に紹介していきます。
subメニュー表示
記述
名前 ($name) を指定すると、対応するサイドバー sidebar-{name}.php を読み込みます。
指定しないとsidebar.php を読み込みます。
以下でも読み込めますが、「必要な処理」を無視して直接ファイルを読みに行くだけです。
「必要な処理」とはアクションフックの実行と、優先テンプレートの決定です。
require get_stylesheet_directory() . ‘/sidebar.php’;
アクションフック
アクションフック名は’get_sidebar’で実装されている。
登録アクションはグローバル変数$wp_filter[‘get_sidebar’]で確認可能です。
デフォルトでは特に何も処理は登録されていないようです。
分岐
テンプレート別の分岐
カテゴリー一覧設定 「wp_list_categories」
まずはカテゴリー一覧設定方法を紹介します。sidebar.phpに記述していきます。
カテゴリー一覧を表示させるにはテンプレートタグwp_list_categoriesを使うのが便利です。
このタグ一つで、カテゴリーをリスト(li
)で出力してくれます。
パラメーターを設定すればカスタマイズも可能です。
sidebar.php
パラメーターについて詳しく知りたい場合はCodex/テンプレートタグ/wp_list_categoriesをご覧ください。
上記コードを記述することで自動で以下のコード出力されます。
出力結果
カテゴリーページにいる時、該当カテゴリーのclassに「current-cat」が付与されます。
自動的に作られるのでとても便利ですね!
問題点
しかしデザイン上このコードだとcssコーディングがやりにくい…という事もあると思います。
個人的に気になったのは以下2点。
- 投稿数がaタグの外になっているのを中に入れたい
- 各カテゴリーのliにスラッグ名つきのclassを付与したい
解決方法
- function.phpにコードを追記する
- wp_list_categoriesは使用せず、get_categoriesを使って自前でコードを記述する
どちらの方法もまた別記事で紹介したいと思います。
特に気になる点がなければwp_list_categoriesの使用が便利です!
月別一覧設定 「wp_get_archives」
月別一覧を表示させるにはテンプレートタグwp_get_archivesを使うのが便利です。
このタグ一つで月別一覧をリスト(li
)で出力してくれます。
こちらもパラメーターを設定すればカスタマイズも可能です。
sidebar.php
パラメーターについて詳しく知りたい場合はCodex/テンプレートタグ/wp get archivesをご覧ください。
上記コードを記述することで自動で以下のコード出力されます。
出力結果
問題点
カテゴリー同様、こちらも気になる点が出てくると思います。
個人的にきなったのは以下2点です。
- こちらも投稿数がaタグの外になっているのを中に入れたい
- 運営を続けていくと月別メニューが増えて見辛くなりそう
例えば2年間毎月記事を投稿していくと、メニュー数が24に増えてしまいます。
メニューが増えると長すぎて見栄えもあまり良くないですし、該当の月を探しづらいです。
解決方法
問題点1
まず問題点1番の解決方法はカテゴリー一覧同様で以下の2点があります。
- function.phpにコードを追記する
- 自前でコードを記述する
こちらも詳しい方法はまた別記事で紹介したいと思います。
問題点2
問題点2番の解決方法は以下の2点考えました。
- プルダウンメニューで表示する
- 年毎に折りたたんでアコーディオンにする
一番はwp_get_archivesのパラメーター「format」を変更することで簡単にできます。
見た目はすっきりしますが、メニュー数が多くなると選択する時にやはり見づらくなります。
2番のアコーディオンは、wp_get_archivesを使わずに、問題点1の解決方法同様自前でコードを記述することになります。
詳しい方法は別記事で紹介できたらと思います。