You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WordPress分类与文章模板:获取分类ID及实现层级侧边菜单

WordPress分类层级处理:获取分类ID + 动态侧边菜单方案

嘿,针对你提到的两个需求,我整理了一套实用的实现方案,直接就能嵌入到你的category.phpsingle.php里:

一、先搞定当前分类ID与顶级父分类ID的获取

不管是在分类模板还是文章模板里,我们都能通过WordPress自带的函数轻松拿到这两个关键ID:

1. 分类模板(category.php)里的写法

直接获取当前查询的分类对象,再提取ID,递归拿到顶级父ID:

// 获取当前分类对象
$current_category = get_queried_object();
$current_cat_id = $current_category->term_id;

// 递归获取顶级父分类ID的函数
function get_top_parent_cat_id($cat_id) {
    $parent = get_term($cat_id, 'category')->parent;
    return $parent == 0 ? $cat_id : get_top_parent_cat_id($parent);
}
$top_parent_cat_id = get_top_parent_cat_id($current_cat_id);

2. 文章模板(single.php)里的写法

先拿到当前文章关联的分类,再做同样的处理:

$post_categories = get_the_category();
if (!empty($post_categories)) {
    $current_category = $post_categories[0]; // 取第一个分类,多分类可按需调整
    $current_cat_id = $current_category->term_id;
    
    // 复用上面的顶级父分类函数
    function get_top_parent_cat_id($cat_id) {
        $parent = get_term($cat_id, 'category')->parent;
        return $parent == 0 ? $cat_id : get_top_parent_cat_id($parent);
    }
    $top_parent_cat_id = get_top_parent_cat_id($current_cat_id);
}

二、动态侧边菜单:展示完整分类层级+当前项高亮

接下来实现核心功能:不管你访问的是Dog > Boxer > Brindle里的哪一层,侧边都能展示完整的Dog分类树,当前分类自动加上active类。

1. 编写菜单生成函数

你可以把这个函数放到主题的functions.php里,或者直接写到模板文件里:

function display_category_hierarchy_menu($top_cat_id) {
    // 获取顶级分类下的所有子分类(包含多级)
    $args = array(
        'taxonomy' => 'category',
        'child_of' => $top_cat_id,
        'hierarchical' => true,
        'hide_empty' => false, // 要隐藏空分类就改成true
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    
    // 先添加顶级分类本身
    $top_cat = get_term($top_cat_id, 'category');
    $menu_html = '<ul class="category-hierarchy-menu">';
    $active_class = get_queried_object_id() == $top_cat_id ? 'active' : '';
    $menu_html .= '<li class="' . $active_class . '">';
    $menu_html .= '<a href="' . get_category_link($top_cat_id) . '">' . $top_cat->name . '</a>';
    
    // 递归生成子分类的函数
    function generate_child_cats($parent_id, $current_cat_id) {
        $child_args = array(
            'parent' => $parent_id,
            'taxonomy' => 'category',
            'hide_empty' => false,
            'orderby' => 'name',
            'order' => 'ASC'
        );
        $child_cats = get_categories($child_args);
        
        if (empty($child_cats)) return '';
        
        $html = '<ul>';
        foreach ($child_cats as $child_cat) {
            $active = get_queried_object_id() == $child_cat->term_id ? 'active' : '';
            $html .= '<li class="' . $active . '">';
            $html .= '<a href="' . get_category_link($child_cat->term_id) . '">' . $child_cat->name . '</a>';
            // 递归处理子分类的子分类
            $html .= generate_child_cats($child_cat->term_id, $current_cat_id);
            $html .= '</li>';
        }
        $html .= '</ul>';
        return $html;
    }
    
    // 追加顶级分类的子分类菜单
    $menu_html .= generate_child_cats($top_cat_id, get_queried_object_id());
    $menu_html .= '</li></ul>';
    
    echo $menu_html;
}

2. 在模板里调用菜单

category.phpsingle.php的侧边栏位置,加入这段代码:

// 确保已经拿到顶级父分类ID(参考第一部分的代码)
if (isset($top_parent_cat_id)) {
    display_category_hierarchy_menu($top_parent_cat_id);
}

3. 简单美化一下(可选CSS)

给菜单加个样式,让active项更显眼:

.category-hierarchy-menu {
    list-style: none;
    padding-left: 0;
}
.category-hierarchy-menu ul {
    padding-left: 1.2rem;
    margin-top: 0.5rem;
}
.category-hierarchy-menu li.active > a {
    color: #e63946;
    font-weight: 600;
}
.category-hierarchy-menu a {
    text-decoration: none;
    color: #1d3557;
    line-height: 1.8;
}

额外补充:页面顶部的分类面包屑

看你提到“页面顶部……”,推测你可能需要面包屑导航,这里也给你加个实现:

function display_category_breadcrumb() {
    $current_cat = get_queried_object();
    if (!($current_cat instanceof WP_Term)) return;
    
    $breadcrumbs = array();
    // 递归收集所有父分类
    function collect_parent_cats($cat_id, &$crumbs) {
        $cat = get_term($cat_id, 'category');
        array_unshift($crumbs, $cat);
        if ($cat->parent != 0) collect_parent_cats($cat->parent, $crumbs);
    }
    collect_parent_cats($current_cat->term_id, $breadcrumbs);
    
    // 输出面包屑
    echo '<div class="category-breadcrumb">';
    foreach ($breadcrumbs as $idx => $crumb) {
        if ($idx != count($breadcrumbs)-1) {
            echo '<a href="' . get_category_link($crumb->term_id) . '">' . $crumb->name . '</a> / ';
        } else {
            echo '<span class="current-crumb">' . $crumb->name . '</span>';
        }
    }
    echo '</div>';
}

在模板顶部调用display_category_breadcrumb();就能显示当前分类的完整层级路径啦。


内容的提问来源于stack exchange,提问作者TechRemarker

火山引擎 最新活动