WooCommerce列出所有产品分类(2021)

最后更新于 2022 年 2 月 26 日

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

列出所有产品分类的代码

class Sola_All_Category_List{

	private static $instance;

	public static function get_instance(){
        if ( null === self::$instance ) {
            self::$instance = new self();
        }

        return self::$instance;
    }

	public function __construct(){
		add_shortcode( 'sola-all-category-list', [$this, 'list_all_categories'] );
	}

	function list_all_categories( $atts ){

		$args = shortcode_atts( array(
			'taxonomy'     => 'category',
			'hide_empty'   => 0
		), $atts );

		$args['hide_empty'] = $args['hide_empty'] ? true : false;
		$all_categories     = $this->get_all_categories( $args );
		ob_start();
		?>
		<div class="sola-clist">
			<?php foreach ( $all_categories as $cat ) : ?>

				<?php if( $cat->category_parent == 0 ) :
					$parent_category_link = get_term_link( $cat, $args['taxonomy'] );
					$sub_cats             = $this->get_sub_categories( $cat->term_id, $args );

					?>
					<div class="sola-clist__item_wrapper">
						<a class="sola-clist__item toplevel" href="<?php echo $parent_category_link;?>"><?php echo $cat->name;?></a>
						<?php if( $sub_cats ) { ?>
							<div class="sola-clist__sub_level">
								<?php foreach( $sub_cats as $sub_category ) {
									$sub_category_link = get_term_link( $sub_category, $args['taxonomy'] );
								?>
									<a class="sub-level sola-clist__item" href="<?php echo $sub_category_link;?>"><?php echo $sub_category->name;?></a>
								<?php } ?> 
							</div><!-- .sola-clist__sub_level -->
						<?php } ?>
					</div><!-- .sola-clist__item_wrapper -->

				<?php endif; ?>      
			<?php endforeach; ?>
		</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 ){
		$args['parent'] = 0;
		return get_categories( $args );
	}

	function get_sub_categories( $parent_category_id, $args ){

		$args['parent'] = $parent_category_id;
		$sub_cats       = get_categories( $args );

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

Sola_All_Category_List::get_instance();

简单说明一下代码：

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