Jul 8, 2017 3 min read jQuery

WordPress 學習筆記： wp_list_categories add class

分類列表 在 Web 中非常的常見，而 WordPress 在針對 分類列表 處理上，提供了一個方法叫做 wp_list_categories（）

這是我在 WordPress 中第一次製作 分類列表 Google 關鍵字 wordpress categories list ，第一筆就找到的，wp_list_categories（）這個方法在使用上十分的容易，也提了許多的屬性（例如：層級、排序、還有分類文章總數…等等）

不過在開發時發現了一下的問題：

情境：

在製作 WordPress Theme 時，個人都是搭配 BootStrap 進行前端的開發，所以時常需要直接針對特定的 Html 元素 加入特定的 Class，一方面也藉由此方法來維持 code 的一致性與整潔性。

可是 wp_list_categories（）並沒有提供這方面的功能，它會直接產生出它已經預設好的 Html 結構

在此並沒有說 wp_list_categories（）不好用，只是單純沒有我想要的功能而已

在經過一番波折之後，我找到了兩個方式來解決上面的問題：

1、 jQuery :

直接透過 addClass() ，等方法直接去針對 wp_list_categories（） 產生後的元素進行操作

Example :

jQuery(document).ready(function($) {
    $('li.cat-item:has(ul.children)').addClass('i-have-kids');
});

2、 get_categories () :

get_categories( ) 是 WordPress 提供的方法，專門回傳查詢後的分類列表的物件

Retrieve list of category objects.

當然 get_categories() 也跟 wp_list_categories() ，有著幾乎相同的屬性與查詢方法，其實你去解析下 wp_list_categories() 的原始碼，你就會發現它裡面也是有使用 get_categories() 的方法的

再來，當我們可以使用 get_categories() 取得到對應的 category objects 時，你可以直接用 PHP 提供的方法 foreach，直接針對物件的操作，來吐出我們需要的架構

Example :

  <?php
          // query category
          $categories = get_categories( array(
            'orderby' => 'name',
            'parent' => 0
          ));
          foreach ( $categories as $category ) {
            echo '<li>';
              echo '<a class ="categories-link" href="' . get_category_link( $category->term_id ) . '" >' . $category->name . '</a>';
              echo '<ul>';
                  // query sub category
                  $sub_categories = get_categories(array(
                    'orderby' => 'name',
                    'parent' => $category->term_id,
                  ));

                  foreach ( $sub_categories as $sub_category ) {
                      echo '<li class ="categories-item">
                              echo '<a class ="categories-link" href ="' . get_category_link( $sub_category->term_id ) . '">' . $sub_category->name . '</a>';
                      echo '</li>';
                    }
              echo "</ul>";
            echo "</li>";
          }
    ?>