WP_LIST_CATEGORIES,将类添加到具有子项的所有列表项

时间:2013-03-27 作者:Dean Elliott

我正在使用wp_list_categories(); 要显示自定义分类法中所有术语的列表,但我需要为具有子级的列表项设置与不具有子级的列表项不同的样式。

有没有一种方法,PHP或jQuery,我可以给所有父元素一个特殊的类?

2 个回复
最合适的回答,由SO网友:birgire 整理而成

jQuery解决方案:

如果要使用jQuery,可以尝试以下方法:

<script>
jQuery(document).ready(function($) {
    $(\'li.cat-item:has(ul.children)\').addClass(\'i-have-kids\');
}); 
</script>
添加类的步骤i-have-kids 致所有li 包含项目的父级ul.children, 在从生成的HTML中wp_list_categories().

Category walker解决方案:

您可以查看Walker_Category 中的类/wp-includes/category-template.php 并用一个额外的部分进行扩展,如:

$termchildren = get_term_children( $category->term_id, $category->taxonomy );
if(count($termchildren)>0){
    $class .=  \' i-have-kids\';
}
如果跳过馈送图像和馈送部分,扩展的walker可能会如下所示:

class Walker_Category_Find_Parents extends Walker_Category {
    function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        extract($args);

        $cat_name = esc_attr( $category->name );
        $cat_name = apply_filters( \'list_cats\', $cat_name, $category );
        $link = \'<a href="\' . esc_url( get_term_link($category) ) . \'" \';
        if ( $use_desc_for_title == 0 || empty($category->description) )
            $link .= \'title="\' . esc_attr( sprintf(__( \'View all posts filed under %s\' ), $cat_name) ) . \'"\';
        else
            $link .= \'title="\' . esc_attr( strip_tags( apply_filters( \'category_description\', $category->description, $category ) ) ) . \'"\';
            $link .= \'>\';
            $link .= $cat_name . \'</a>\';

        if ( !empty($show_count) )
            $link .= \' (\' . intval($category->count) . \')\';

                if ( \'list\' == $args[\'style\'] ) {
                        $output .= "\\t<li";
                        $class = \'cat-item cat-item-\' . $category->term_id;

                        $termchildren = get_term_children( $category->term_id, $category->taxonomy );
                        if(count($termchildren)>0){
                            $class .=  \' i-have-kids\';
                        }

                        if ( !empty($current_category) ) {
                                $_current_category = get_term( $current_category, $category->taxonomy );
                                if ( $category->term_id == $current_category )
                                        $class .=  \' current-cat\';
                                elseif ( $category->term_id == $_current_category->parent )
                                        $class .=  \' current-cat-parent\';
                        }
                        $output .=  \' class="\' . $class . \'"\';
                        $output .= ">$link\\n";
                } else {
                        $output .= "\\t$link<br />\\n";
                }
        }
    }
您可以进一步取出不需要的部件。

用法示例:

<?php 
$args = array(
  \'taxonomy\'     => \'my_custom_taxonomy_slug\',
  \'orderby\'      => \'name\',
  \'hide_empty\'   => 0,
  \'title_li\'     => \'\',
  \'hierarchical\' => 1,
  \'walker\'       => new Walker_Category_Find_Parents(),
);
?>
<ul class="menu">
   <?php wp_list_categories( $args ); ?>
</ul>
输出示例:下面是一个列表示例,使用Walker_Category_Find_Parents 步行者:

List example

具有以下HTML结构:

<ul class="menu">
    <li class="cat-item cat-item-1">
        <a href="http://example.com/category/plants/">plants</a>
    </li>
    <li class="cat-item cat-item-2 i-have-kids">
        <a href="http://example.com/category/animals/">animals</a>
        <ul class="children">
            <li class="cat-item cat-item-3 i-have-kids">
                <a href="http://example.com/category/animals/birds/">birds</a>
                <ul class="children">
                    <li class="cat-item cat-item-4">
                        <a href="http://example.com/category/animals/birds/falcons/">falcons</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="cat-item cat-item-5">
        <a href="http://example.com/category/stones">stones</a>
    </li>
</ul>
我刚刚删除了title 属性以使其更具可读性。

但你可以看到i-have-kids 类添加到li 带有子项的标记。

当我访问/ Animals / Birds / 类别,HTML结构变为:

<ul class="menu">
    <li class="cat-item cat-item-1">
        <a href="http://example.com/category/plants/">plants</a>
    </li>
    <li class="cat-item cat-item-2 i-have-kids current-cat-parent">
        <a href="http://example.com/category/animals/">animals</a>
        <ul class="children">
            <li class="cat-item cat-item-3 i-have-kids current-cat">
                <a href="http://example.com/category/animals/birds/">birds</a>
                <ul class="children">
                    <li class="cat-item cat-item-4">
                        <a href="http://example.com/category/animals/birds/falcons/">falcons</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="cat-item cat-item-5">
        <a href="http://example.com/category/stones">stones</a>
    </li>
</ul>

SO网友:sauv0168

您可以如下所示连接到为实现此目的而实现的过滤器中。我的示例将向父元素添加一个“has\\u children”类。

function add_category_parent_css($css_classes, $category, $depth, $args){
    if($args[\'has_children\']){
        $css_classes[] = \'has_children\';
    }
    return $css_classes;
}

add_filter( \'category_css_class\', \'add_category_parent_css\', 10, 4);

结束

相关推荐

Custom Taxonomy conditionals

因此,我设置了自定义帖子类型“products”和自定义分类/类别“Defense”law&;“强制执行”和“商业”。我已经使用以下条件为产品设置了一些特定的css和正确的横幅:<?php if (has_term( \'defence\', \'productcat\', $post->ID )) { ?> 如果产品属于一个类别,这将非常有效。这是我的问题-我有多个类别的产品,所以我希望有一个条件,看看它们是如何进入我的产品页面的:我在分类法登录页和产品页的左侧有一个菜