Question

宜家的分类列表很好看，想模仿一下，于是就有了今天这篇文章——写一个能列出WooCommerce所有产品分类的shortcode，做一个所有分类页面，最终效果如下图所示。

列出所有产品分类的代码

class Sola_All_Category_List{

	private $args;

	public function __construct(){

		add_shortcode( 'sola-all-category-list', [$this, 'all_categories'] );

	}

	function get_args(){
		return $this->args;
	}

	function get_default_args(){

		return $args = array(
			'taxonomy'     => 'category',
			'meta_key'     => 'order',
  			'orderby'      => 'meta_value_num',
			'hide_empty'   => 0
		);
	}

	function all_categories( $atts ){

		$args = shortcode_atts( $this->get_default_args(), $atts );

		$args['empty'] = $args['empty'] ? true : false;
		
		$this->args = $args;

		$all_categories = $this->get_all_categories();

		$taxonomy = $this->args['taxonomy'];

		ob_start();

		echo '<div>';

		foreach ( $all_categories as $cat ) {

			if( $cat->category_parent == 0 ) {

				$parent_category_id = $cat->term_id;  

				echo '<div>
				<a 
				href="'. get_term_link( $cat->slug, $taxonomy ) .'">'. $cat->name .'</a>';

				$sub_cats = $this->get_sub_categories( $parent_category_id );

				if( $sub_cats ) {

					echo '<div>';

					foreach( $sub_cats as $sub_category ) {
						
						echo '<a 
						href="'. get_term_link( $sub_category->slug, $taxonomy ) .'">' .  $sub_category->name . '</a>' ;
					}  

					echo '</div><!-- .sola-clist__sub_level -->';
				}
				echo '</div><!-- .sola-clist__item_wrapper -->';
			}       
		}

		echo '</div><!-- .sola-clist -->';
		?>
<style>
	.sola-clist{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.sola-clist__item_wrapper{
		width: calc(50% - 12px);
		min-height: 100px;
	}
	.sola-clist__item.toplevel{
		font-weight: bold;
		font-size: 20px;
		display: block;
		border-bottom: 1px solid currentColor;
	}
	.sola-clist__item.sub-level{
		display: inline-block;
		width: 50%;
		padding: 1rem;
	}
	.sola-clist__item{
		text-decoration: none !important;
	}
	@media (max-width: 768px){
		.sola-clist__item_wrapper{
			width: 100%;
		}
	}
</style>
		<?php

		return ob_get_clean();
	}


	function get_all_categories(){

		$args           = $this->get_args();
		$args['parent'] = 0;

		return get_categories( $args );
	}

	function get_sub_categories( $parent_category_id ){

		$args           = $this->get_args();
		$args['parent'] = $parent_category_id;
		$sub_cats       = get_categories( $args );

		if( is_array($sub_cats) && sizeof($sub_cats ) ){
			return $sub_cats;
		}

		return false;
	}
}
new Sola_All_Category_List();

简单说明一下代码：

1. 代码定义了一个shortcode [ sola-all-category-list ]，function all_categories()是输出shortocde html的函数。
2. 在all_categories()函数内置了样式，你可以删掉这部分，把样式写进自己的主题。
3. 代码先获取所有顶级分类，然后循环显示第二级分类，注意本代码只能显示到第二级分类。
4. 代码默认显示空分类，不想显示的话给shortcode传递阐述hide_empty=0。
5. 本代码可以显示任何具有父子关系的taxonomy，例如默认的taxonomy是category，想显示WooCommerce的分类就传product_cat进去。

如何使用

在WordPress编辑器里输入以下shortcode即可。

[sola-all-category-list taxonomy="product_cat" hide_empty=0]

参考资料：

get_terms()的参数列表
Get WooCommerce product categories from WordPress