wp_list_categories, Adicionar classe a todos os itens da lista com filhos

2

Estou usando wp_list_categories(); para mostrar uma lista de todos os termos em uma taxonomia personalizada, mas preciso definir estilos para listar itens que tenham filhos de forma diferente daqueles que não têm.

Existe uma maneira, PHP ou jQuery, que eu possa dar a todos os elementos pai uma classe especial?

    
por Dean Elliott 27.03.2013 / 21:49

2 respostas

5

solução jQuery:

Você poderia tentar isso se quiser usar o jQuery:

<script>
jQuery(document).ready(function($) {
    $('li.cat-item:has(ul.children)').addClass('i-have-kids');
}); 
</script>

para adicionar a classe i-have-kids a todos os li pais que incluem os itens ul.children , dentro do HTML gerado a partir de wp_list_categories() .

Solução de walker de categoria:

Você pode dar uma olhada na Walker_Category classe em /wp-includes/category-template.php e estendê-la com uma parte extra como:

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

Se ignorarmos a imagem de feed e partes de feed , o walker estendido poderia ter esta aparência:

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";
                }
        }
    }

Você ainda pode retirar as partes que você não precisa.

Exemplo de uso:

<?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>

Exemplo de saída:

Aqui está um exemplo de lista, usando o Walker_Category_Find_Parents walker:

comaseguinteestruturaHTML:

<ulclass="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>

Acabei de remover os atributos title para torná-lo mais legível.

Mas você pode ver onde a classe i-have-kids é adicionada às tags li com crianças.

Quando visito a categoria / Animals / Birds / , a estrutura HTML se torna:

<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>
    
por birgire 28.03.2013 / 00:14
4

Você pode conectar-se ao filtro que é implementado para este fim exato da seguinte maneira. Meu exemplo adicionará uma classe "has_children" ao elemento pai.

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);
    
por sauv0168 18.04.2017 / 15:38