WooCommerce列出所有产品分类(2021)
优质
小牛编辑
159浏览
2023-12-01
宜家的分类列表很好看,想模仿一下,于是就有了今天这篇文章——写一个能列出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();
简单说明一下代码:
- 代码定义了一个shortcode [ sola-all-category-list ],function all_categories()是输出shortocde html的函数。
- 在all_categories()函数内置了样式,你可以删掉这部分,把样式写进自己的主题。
- 代码先获取所有顶级分类,然后循环显示第二级分类,注意本代码只能显示到第二级分类。
- 代码默认显示空分类,不想显示的话给shortcode传递阐述hide_empty=0。
- 本代码可以显示任何具有父子关系的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