ZWH ZONE

WordPress 學習筆記： wp_list_categories add class

zhiwei. huang -

分類列表 在 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（）產出的架構不會換阿

Facebook 功能：