WooCommerce

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

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

WooCommerce列出所有产品分类

列出所有产品分类的代码

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

留言

您的电子邮箱地址不会被公开。