【WordPress】カテゴリーリストをBootstrap5のアコーディオンにする

2022年7月29日

その他

code

ベース

・Accordion(アコーディオン) · Bootstrap v5.0
・テンプレートタグ/wp list categories – WordPress Codex 日本語版

wp_list_categoriesのオプションのWalkerを指定することで実現します。Walker_Category クラスでリストのレンダリングを変更することができます。

参考：
・Walker_Category | Class | WordPress Developer Resources

設置例

実装（ソースコード）

walker

<?php
/**
 * accordion-category.php
*/
namespace walkerex;

class AccordionCategory extends \Walker_Category {

/**
 * Starts the element output.
 */
public function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
 
  $header = '';
  $body = '';
  $link = '';
  $container_id = 'site-category-ex';
  $item_id = 'cat-' . $category->slug;
  $collapse_id = 'collapse-' . $category->slug;
   
  $cat_name = apply_filters(
    'list_cats',
    esc_attr( $category->name ),
    $category
  );
 
  //子カテゴリ
  $child_categories = get_term_children($category->term_id, 'category');
 
  $child_categories_count = count($child_categories);
 
  // 親カテゴリー
  if($depth === 0) {
    // 子カテゴリーがある
    if ($child_categories_count > 0) {
      $header .= '<div class="accordion-item">';
      $header .= '<h3 class="accordion-header" id="' . $item_id . '">';
      $header .= '<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#' . $collapse_id . '" aria-expanded="false" aria-controls="' . $collapse_id . '">';
      $header .= $cat_name . '</button></h3>';
       
      $body .= '<div id="' . $collapse_id . '" class="accordion-collapse collapse" aria-labelledby="' . $item_id . '" data-bs-parent="#' . $container_id . '">';
      $body .= '<div class="accordion-body">';
    } else {
      // 子カテゴリーがない
      $header .= '';
      $header .= '<div class="px-1">';
      $header .= '<a class="btn btn-light p-2 d-block text-start bg-white" ';
      $header .= 'href="' . esc_url( get_term_link( $category ) ) . '">';
      $header .= $cat_name;
      $header .= '</a>';
    }
 
  } else {
    // 子カテゴリー
    $link .= '<a class="d-inline-flex align-items-center rounded py-3" ';
    $link .= 'href="' . esc_url( get_term_link( $category ) ) . '">';
    $link .= $cat_name;
    $link .= '</a>';
    $body .= '<li>' . $link . '</li>';
  }
 
  $output .= $header;
  $output .= $body;
}

/**
   * Ends the element output, if needed.
   */
  public function end_el( &$output, $category, $depth = 0, $args = array() ) {

  //子カテゴリ
  $child_categories = get_term_children($category->term_id, 'category');
  $child_categories_count = count($child_categories);
 

  // カテゴリールート
  if($depth === 0){
	if( $child_categories_count === 0) {
    	$output .= "</div><!-- 0 -->"."\n";
  	}else{
    	$output .= "</div></div></div><!-- 0 -->"."\n";
  	}
  }else{
	$output .= "<!-- {$depth} -->"."\n";
  }
}

/**
   * Starts the list before the elements are added.
   */
  public function start_lvl( &$output, $depth = 0, $args = array() ) {
  $indent = str_repeat("\t", $depth);
      $output .= "$indent<ul class='list-unstyled fw-normal m-0 p-0 small'>\n";
}

/**
   * Ends the list of after the elements are added.
   */
  public function end_lvl( &$output, $depth = 0, $args = array() ) {
  $output .= '</ul>';
}

}

functions.php

require_once get_theme_file_path('/accordion-category.php' );

テーマのfunctions.phpで、accordion-category.phpを読み込んでください。

カテゴリリスト表示

<div class="accordion" id="site-category-ex">
<?php
wp_list_categories( array('title_li' => null, 'depth'  => 2, 'walker' => new walkerex\AccordionCategory ) ); 
?>
</div>

walkerで、accordion-category.phpの「walkerex\AccordionCategory 」クラスを指定して使います。