web-dev-qa-db-fra.com

wp_list_categories, Ajouter une classe à tous les éléments de la liste avec des enfants

J'utilise wp_list_categories(); pour afficher une liste de tous les termes d'une taxonomie personnalisée, mais je dois styliser les éléments de la liste qui ont des enfants différemment de ceux qui n'en ont pas.

Existe-t-il un moyen, PHP ou jQuery, de pouvoir attribuer une classe spéciale à tous les éléments parents?

categoriesfunctionstaxonomy
2
Dean Elliott

solution jQuery:

Vous pouvez essayer ceci si vous voulez utiliser jQuery:

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

d'ajouter la classe i-have-kids à tous les parents li qui incluent les éléments ul.children, dans le code HTML généré à partir de wp_list_categories().

Solution de catégorie marcheur:

Vous pouvez jeter un oeil à la classe Walker_Category dans /wp-includes/category-template.php et l'étendre avec une partie supplémentaire comme:

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

Si nous sautons l'image feed image et feed parts , le marcheur étendu pourrait ressembler à ceci:

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

Vous pouvez également extraire les parties dont vous n’avez pas besoin.

Exemple d'utilisation:

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

Exemple de sortie:

Voici un exemple de liste, en utilisant le Walker_Category_Find_Parents walker:

List example

avec la structure HTML suivante:

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

Je viens de supprimer les attributs title pour le rendre plus lisible.

Mais vous pouvez voir où la classe i-have-kids est ajoutée aux balises li avec des enfants.

Lorsque je visite la catégorie / Animals / Birds /, la structure HTML devient:

<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>
5
birgire

Vous pouvez vous connecter au filtre mis en œuvre à cette fin, comme suit. Mon exemple ajoutera une classe "has_children" à l'élément parent.

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);
4
sauv0168