WordPress 學習筆記： wp_list_categories add class

skyroxas1521

2017年7月9日 • 3 min read

情境：

分類列表 在 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>";
          }
    ?>

結語：

第 2 種方法可以讓我們自訂我們自己想要的架構，方便前端可以進行客製與加入自己想要的 class

也是個人比較推薦的解決發法，畢竟也比較接近使用 WordPress 的原生工具，比較不建議直接使用 jQuery 的方式進行修改

原因如下：

document 載入順序的問題
jQuery 執行速度會在 doucment 載入之後，可能造成今入網頁時會跑板
增加了執行 jQuery code 的效能
增加了要多維護的 code
真的很能保證 WordPress 更新後，wp_list_categories（）產出的架構不會換阿

情境 ：

問題 ：

解決方法 ：

1、 jQuery :

2、 get_categories () :

結語：

情境：

問題：

解決方法：