web-dev-qa-db-de.com

wp_list_categories, Klasse zu allen Listenelementen mit untergeordneten Elementen hinzufügen

Ich verwende wp_list_categories();, um eine Liste aller Begriffe in einer benutzerdefinierten Taxonomie anzuzeigen, aber ich muss Listenelemente mit untergeordneten Elementen anders formatieren als solche, die dies nicht tun.

Gibt es eine Möglichkeit, PHP oder jQuery, dass ich allen übergeordneten Elementen eine spezielle Klasse zuweisen kann?

2
Dean Elliott

jQuery-Lösung:

Sie können dies versuchen, wenn Sie jQuery verwenden möchten:

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

hinzufügen der Klasse i-have-kids zu allen li übergeordneten Elementen, die die Elemente ul.children enthalten, innerhalb des aus wp_list_categories() generierten HTML.

Category-Walker-Lösung:

Sie könnten einen Blick auf die Klasse Walker_Category in /wp-includes/category-template.php werfen und sie mit einem zusätzlichen Teil wie folgendem erweitern:

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

Wenn wir das Vorschubbild und Vorschubteile überspringen, könnte der erweiterte Gehwagen so aussehen:

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

Sie können auch die Teile herausnehmen, die Sie nicht benötigen.

Anwendungsbeispiel:

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

Ausgabebeispiel:

Hier ist ein Listenbeispiel mit dem Walker_Category_Find_Parents walker:

List example

mit folgender HTML-Struktur:

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

Ich habe gerade die title-Attribute entfernt, um die Lesbarkeit zu verbessern.

Sie können jedoch sehen, wo die Klasse i-have-kids zu den Tags li mit untergeordneten Elementen hinzugefügt wird.

Wenn ich die Kategorie / Animals / Birds / besuche, wird die HTML-Struktur wie folgt:

<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

Sie können den für diesen Zweck implementierten Filter wie folgt einbinden. In meinem Beispiel wird dem übergeordneten Element eine Klasse "has_children" hinzugefügt.

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