it-swarm.com.de

Ändern Sie einen Li-Klassennamen in einem benutzerdefinierten WordPress-Menüwanderer

Ich baue ein Navigationssystem, dessen Klasse auf die Haupt-LIs und die verschachtelten LIs angewendet wird. Beispiel:

<ul>
<li class="className">Test</li>
<li class="className">Test
    <ul>
        <li class="ADifferentclassName">test</li>
        <li class="ADifferentclassName">test</li>
    </ul>
</li>
</ul>

Ich habe herausgefunden, wie man Klassen für die ULs und alle LIs bekommt, aber ich kann herausfinden, wie man eine andere Klasse für die verschachtelten LIs bekommt.

Hier ist mein Custom Walker:

Dies ändert die Nest-UL-Klasse

 class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"nav-main-sub-list\">\n";
  }

Dies entfernt alle überflüssigen WordPress-Klassen und fügt die Klasse nav-main-item zu allen Li hinzu

    public function start_el( &$output, $item, $depth, $args )
    {

        $attributes  = '';

        ! empty ( $item->attr_title )
            // Avoid redundant titles
            and $item->attr_title !== $item->title
            and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';

        ! empty ( $item->url )
            and $attributes .= ' href="' . esc_attr( $item->url ) .'"';

        $attributes  = trim( $attributes );
        $title       = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = "$args->before<a $attributes>$args->link_before$title</a>"
                        . "$args->link_after$args->after";

        // Since $output is called by reference we don't need to return anything.


        $output .= $indent . '<li class="nav-main-item">';

        $output .= apply_filters(
            'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }   

}

Ich kann einfach nicht herausfinden, wie ich die Klasse in den verschachtelten LIs ändern kann. Nichts, was ich getan habe, hat funktioniert. Irgendwelche Tipps?

1
Steph Gill

Fehlerbehebung

Durch Aktivieren der WP_DEBUG-Konstante in wp-config.php wurden die folgenden Fehler angezeigt:

- Funktionssignaturen

Wenn "Strenge Standards" aktiviert ist, wird ein Fehler mit inkompatiblen Methodensignaturen angezeigt. Obwohl nicht unbedingt notwendig, möchte ich so viele Fehler wie möglich beseitigen. Um dies zu korrigieren, müssen die Deklarationen der Methoden start_el() und start_lvl() der Klasse Walker_Nav_Menumit denen der Klasse Walker_Nav_Menu selbst übereinstimmen, damit die neue Klasse als Ersatz für die Klasse Walker_Nav_Menu fungieren kann, ohne sie auszulösen alle möglichen Fehler in Bezug auf Parameter/Argumente.

Diese:

class Wpse_145991_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth ) {
        //...
    }

    public function start_el( &$output, $item, $depth, $args ) {
        //...
    }
}

sollte dies werden:

class Wpse_145991_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        //...
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        //...
    }
}

- Notice: Undefined variable: indent

Nahe dem Ende der Methode start_el() der neuen Klasse sehen Sie die Zeile

$output .= $indent . '<li class="nav-main-item">';

Aber $indent ist niemals in der Methode definiert. Klassen für Walker neigen dazu, eine $indent-Variable zum Formatieren von HTML-Leerzeichen auf eine Anzahl von $depth-Tabulatorzeichen festzulegen. Es ist nicht funktionsrelevant, aber dies kann korrigiert werden, indem $indent irgendwo vor der oben genannten Zeile definiert wird:

$indent = str_repeat("\t", $depth);

Zu diesem Zeitpunkt sollte die in der Frage angegebene Implementierung ein Menü erstellen, ohne Fehler oder Warnungen auszulösen.


Festlegen verschiedener Klassen für verschiedene Tiefen

Theorie

Wenn ein Walker_Nav_Menuwalk()ing ist, wird sowohl den start_el()- als auch den start_lvl()-Methoden ein $depth-Argument übergeben, das als repräsentativ für die Anzahl von "Ebenen", "Untermenüs" oder <ul>-Elementen zwischen dem aktuellen Element und dem Datenstamm (dh dem <ul> Element der obersten Ebene.

Walker_Nav_Menu $depth Parameter

Implementierung

Durch bedingtes Verzweigen basierend auf diesem $depth können Sie verschiedene Klassen für verschiedene Elemente und Ebenen zuweisen. Wenn Sie beispielsweise eine switch verwenden, können Sie Klassen für jeden Gegenstand und jede Ebene optimieren:

class Wpse_145991_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat( "\t", $depth );

        // Select a CSS class for this `<ul>` based on $depth
        switch( $depth ) {
            case 0:
                // Top-level submenus get the 'nav-main-sub-list' class
                $class = 'nav-main-sub-list';
                break;
            case 1:
            case 2:
            case 3:
                // Submenus nested 1-3 levels deep get the 'nav-other-sub-list' class
                $class = 'nav-other-sub-list';
                break;
            default:
                // All other submenu `<ul>`s receive no class
                break;
        }

        // Only print out the 'class' attribute if a class has been assigned
        if( isset( $class ) )
            $output .= "\n$indent<ul class=\"$class\">\n";
        else
            $output .= "\n$indent<ul>\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = str_repeat("\t", $depth);
        $attributes  = '';

        ! empty ( $item->attr_title )
        // Avoid redundant titles
        and $item->attr_title !== $item->title
        and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';

        ! empty ( $item->url )
        and $attributes .= ' href="' . esc_attr( $item->url ) .'"';

        $attributes  = trim( $attributes );
        $title       = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = "$args->before<a $attributes>$args->link_before$title</a>"
                       . "$args->link_after$args->after";

        // Select a CSS class for this `<li>` based on $depth
        switch( $depth ) {
            case 0:
                // Top-level `<li>`s get the 'nav-main-item' class
                $class = 'nav-main-item';
                break;
            default:
                // All other `<li>`s receive no class
                break;
        }

        // Only print out the 'class' attribute if a class has been assigned
        if( isset( $class ) )
            $output .= $indent . '<li class="'. $class . '">';
        else
            $output .= $indent '<li>';

        $output .= apply_filters(
                'walker_nav_menu_start_el',
                $item_output,
                $item,
                $depth,
                $args
            );
    }
}
0
bosco