【WordPress】subメニューの表示

技術ブログ

【WordPress】subメニューの表示

2021.10.08

WP PHP

subメニューにカテゴリー一覧や月別一覧を表示する方法について書いていきたいと思います。

subメニューの設定はテンプレート「sidebar.php」にコード記述します。
テンプレートに設定後、subメニューを表示させたい各テンプレート（archive.php,category.phpなど）に「sidebar.php」を読み込めばsubメニュー表示することができます。
設定方法を以下に紹介していきます。

subメニュー表示

記述


<?php get_sidebar( $name ); ?>

<?php get_sidebar( $name ); ?>

名前 ($name) を指定すると、対応するサイドバー sidebar-{name}.php を読み込みます。
指定しないとsidebar.php を読み込みます。

以下でも読み込めますが、「必要な処理」を無視して直接ファイルを読みに行くだけです。
「必要な処理」とはアクションフックの実行と、優先テンプレートの決定です。
require get_stylesheet_directory() . ‘/sidebar.php’;

アクションフック

アクションフック名は’get_sidebar’で実装されている。
登録アクションはグローバル変数$wp_filter[‘get_sidebar’]で確認可能です。
デフォルトでは特に何も処理は登録されていないようです。

分岐

テンプレート別の分岐


if ( is_front_page() && is_home() ) {
} else if ( is_page() ) {
} else if ( is_single() ) {
} else if ( is_category() ) {
} else if ( is_post_type_archive() ) {
	if ( is_month() ) {
	} else {
	}
} else if ( is_tax() ) {
} else if ( is_month() ) {
} else if ( is_404() ) {
} else {
}

if ( is_front_page() && is_home() ) {

} else if ( is_page() ) {

} else if ( is_single() ) {

} else if ( is_category() ) {

} else if ( is_post_type_archive() ) {

if ( is_month() ) {

} else {

}

} else if ( is_tax() ) {

} else if ( is_month() ) {

} else if ( is_404() ) {

} else {

}

カテゴリー一覧設定「wp_list_categories」

まずはカテゴリー一覧設定方法を紹介します。sidebar.phpに記述していきます。

カテゴリー一覧を表示させるにはテンプレートタグwp_list_categoriesを使うのが便利です。
このタグ一つで、カテゴリーをリスト（li）で出力してくれます。
パラメーターを設定すればカスタマイズも可能です。

sidebar.php


<?php
//最上位カテゴリーを非表示にする場合は以下を最上カテゴリーのIDに変更する
	$my_root_category_name = 'blog'; //最上位カテゴリーのスラッグ 適宜変更してください
	$my_root_category = get_category_by_slug($my_root_category_name);
	$my_root_category_ID = $my_root_category->cat_ID;

//パラメーター
  $args = array(
	  'orderby'            => 'name',
	  'order'              => 'ASC',
	  'style'              => 'list',
	  'show_count'         => 1, //投稿数を表示するかどうか。1(true)表示 , 0(false)非表示(初期値)
	  'hide_empty'         => 1, //投稿のないカテゴリーを非表示にするかどうか。1(true)空カテゴリーを隠す（初期値）, 0(false)全て表示
	  'use_desc_for_title' => 1,
	  'child_of'           => $my_root_category_ID, //指定したカテゴリーID の子カテゴリーのみ表示。初期値なし。
	  'hierarchical'       => 1,
	  'number'             => null,
	  'pad_counts'         => 0,
	  'taxonomy'           => 'blog_category', //カテゴリーを取得するタクソノミーの名前。
  );
?>
  <ul class="catList"><?php wp_list_categories($args); ?></ul>

<?php

//最上位カテゴリーを非表示にする場合は以下を最上カテゴリーのIDに変更する

$my_root_category_name = 'blog'; //最上位カテゴリーのスラッグ適宜変更してください

$my_root_category = get_category_by_slug($my_root_category_name);

$my_root_category_ID = $my_root_category->cat_ID;

//パラメーター

$args = array(

'orderby' => 'name',

'order' => 'ASC',

'style' => 'list',

'show_count' => 1, //投稿数を表示するかどうか。1(true)表示 , 0(false)非表示(初期値)

'hide_empty' => 1, //投稿のないカテゴリーを非表示にするかどうか。1(true)空カテゴリーを隠す（初期値）, 0(false)全て表示

'use_desc_for_title' => 1,

'child_of' => $my_root_category_ID, //指定したカテゴリーID の子カテゴリーのみ表示。初期値なし。

'hierarchical' => 1,

'number' => null,

'pad_counts' => 0,

'taxonomy' => 'blog_category', //カテゴリーを取得するタクソノミーの名前。

);

パラメーターについて詳しく知りたい場合はCodex/テンプレートタグ/wp_list_categoriesをご覧ください。
上記コードを記述することで自動で以下のコード出力されます。

出力結果


<ul class="catList">
  <li class="cat-item cat-item-1 current-cat"><a href="https://××.jp/blog/flow/">制作業務フロー</a> (2)
    <ul class='children'>
      <li class="cat-item cat-item-2"><a href="https://××.jp/blog/flow/coding/">コーディング</a> (2)</li>
    </ul>
  </li>
  <li class="cat-item cat-item-3"><a href="https://××.jp/blog/program/">プログラム</a> (1)</li>
  <li class="cat-item cat-item-4"><a href="https://××.jp/blog/html/">HTML</a> (3)</li>
  <li class="cat-item cat-item-5"><a href="https://××.jp/blog/bash/">css</a> (2)</li>
</ul>

<li class="cat-item cat-item-1 current-cat"><a href="https://××.jp/blog/flow/">制作業務フロー</a> (2)

<li class="cat-item cat-item-2"><a href="https://××.jp/blog/flow/coding/">コーディング</a> (2)</li>

</ul>

</li>

<li class="cat-item cat-item-3"><a href="https://××.jp/blog/program/">プログラム</a> (1)</li>

</ul>

カテゴリーページにいる時、該当カテゴリーのclassに「current-cat」が付与されます。


//「制作業務フロー」にいる場合
  <li class="cat-item cat-item-1 current-cat"><a aria-current="page" href="https://××.jp/blog/flow/">制作業務フロー</a> (2)</li>

//「制作業務フロー」にいる場合

<li class="cat-item cat-item-1 current-cat"><a aria-current="page" href="https://××.jp/blog/flow/">制作業務フロー</a> (2)</li>

自動的に作られるのでとても便利ですね！

問題点

しかしデザイン上このコードだとcssコーディングがやりにくい…という事もあると思います。
個人的に気になったのは以下2点。

投稿数がaタグの外になっているのを中に入れたい
各カテゴリーのliにスラッグ名つきのclassを付与したい

解決方法

function.phpにコードを追記する
wp_list_categoriesは使用せず、get_categoriesを使って自前でコードを記述する

どちらの方法もまた別記事で紹介したいと思います。

特に気になる点がなければwp_list_categoriesの使用が便利です！

月別一覧設定「wp_get_archives」

月別一覧を表示させるにはテンプレートタグwp_get_archivesを使うのが便利です。
このタグ一つで月別一覧をリスト（li）で出力してくれます。
こちらもパラメーターを設定すればカスタマイズも可能です。

sidebar.php


<?php
//パラメーター
  $args = array(
		'type'            => 'monthly', //表示するアーカイブリストの種類 年別の場合はyearly
		'limit'           => '', //取得するアーカイブ数 12ヶ月分なら12
		'format'          => 'html',
		'before'          => '',
		'after'           => '',
		'show_post_count' => 1, //投稿数を表示するかどうか
		'echo'            => 1,
		'order'           => 'DESC',
		'post_type'       => 'blog' //カスタム投稿タイプ slug名'blog' の場合
  );
?>
  <ul class="catList"><?php wp_get_archives($args); ?></ul>

<?php

//パラメーター

$args = array(

'type' => 'monthly', //表示するアーカイブリストの種類年別の場合はyearly

'limit' => '', //取得するアーカイブ数 12ヶ月分なら12

'format' => 'html',

'before' => '',

'after' => '',

'show_post_count' => 1, //投稿数を表示するかどうか

'echo' => 1,

'order' => 'DESC',

'post_type' => 'blog' //カスタム投稿タイプ slug名'blog' の場合

);

パラメーターについて詳しく知りたい場合はCodex/テンプレートタグ/wp get archivesをご覧ください。
上記コードを記述することで自動で以下のコード出力されます。

出力結果


  <ul class="catList">
		<li><a href='https://××.jp/blog/2021/10/'>2021年10月</a> (2)</li>
		<li><a href='https://××.jp/blog/2021/09/'>2021年9月</a> (10)</li>
  </ul>

</ul>

問題点

カテゴリー同様、こちらも気になる点が出てくると思います。
個人的にきなったのは以下2点です。

こちらも投稿数がaタグの外になっているのを中に入れたい
運営を続けていくと月別メニューが増えて見辛くなりそう
例えば2年間毎月記事を投稿していくと、メニュー数が24に増えてしまいます。
メニューが増えると長すぎて見栄えもあまり良くないですし、該当の月を探しづらいです。

解決方法

問題点1

まず問題点1番の解決方法はカテゴリー一覧同様で以下の2点があります。

function.phpにコードを追記する
自前でコードを記述する

こちらも詳しい方法はまた別記事で紹介したいと思います。

問題点2

問題点2番の解決方法は以下の2点考えました。

プルダウンメニューで表示する
年毎に折りたたんでアコーディオンにする

一番はwp_get_archivesのパラメーター「format」を変更することで簡単にできます。
見た目はすっきりしますが、メニュー数が多くなると選択する時にやはり見づらくなります。

2番のアコーディオンは、wp_get_archivesを使わずに、問題点1の解決方法同様自前でコードを記述することになります。
詳しい方法は別記事で紹介できたらと思います。

参考記事

ツイートする
シェアする
URLとタイトルをコピーする

技術ブログ