WordPress分类归档页如何单独显示顶级父分类与子分类便于CSS样式设置

实现方案 #

你可以通过获取当前分类的父级ID单独调取父分类信息，即可实现父子分类分别加自定义样式类的需求，完整代码如下：

<?php
// 获取当前分类对象
$current_cat = get_queried_object();
// 仅当存在父分类时输出父分类内容
if ( $current_cat->parent != 0 ) :
    $parent_cat = get_category( $current_cat->parent );
?>
<span class="parent-cat"><?php echo esc_html( $parent_cat->name ); ?>:</span>
<?php endif; ?>
<span class="child-cat"><?php printf( esc_html__( '%s', 'myTheme' ), single_cat_title( '', false ) ); ?></span>

代码说明 #

• 这段代码会自动判断当前分类是否为子分类：如果是顶级分类没有父级，不会输出多余的父分类标签；如果是子分类则会先输出带parent-cat类的父分类名称，后面拼接冒号，再输出带child-cat类的当前子分类名称，最终显示效果和你之前的Portfolio: Weddings完全一致。
• 后续你可以直接通过.parent-cat和.child-cat两个选择器分别设置样式，比如移动端想要父分类和子分类分行显示，只需要加CSS：

@media (max-width: 768px) {
    .parent-cat, .child-cat {
        display: block;
    }
}

如果你站点的分类层级超过2级，需要输出最顶级的父分类，可以将获取父分类的逻辑替换为：

$parent_id = $current_cat->parent;
while ( $parent_id != 0 ) {
    $parent_cat = get_category( $parent_id );
    $parent_id = $parent_cat->parent;
}

循环拿到最顶级的分类对象再输出即可。

内容的提问来源于stack exchange，提问作者Fauline