WordPress分类与文章模板:获取分类ID及实现层级侧边菜单
WordPress分类层级处理:获取分类ID + 动态侧边菜单方案
嘿,针对你提到的两个需求,我整理了一套实用的实现方案,直接就能嵌入到你的category.php和single.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.php或single.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




