it-swarm.com.de

Hinzufügen verschiedener Klassen zum Anker im Navigationsmenü

Ist das möglich?

Ich möchte den Ankern verschiedene Klassen hinzufügen, die also nicht bei allen Ankern gleich sind. Wie kann ich das machen?

PS: Ich benutze das:

function add_nav_class($output) {
    $output= preg_replace('/<a/', '<a class="your-class"', $output, 1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

Aber ich möchte den Links verschiedene Klassen hinzufügen ...

Also so:

<li><a class="1></a></li>
<li><a class="2></a></li>

und so weiter...

2
Johan

Ja, es ist möglich.

Sie können dies mit dem wp_nav_menu_objects-Filter erreichen.

function my_wp_nav_menu_objects($objects, $args) {
    foreach($objects as $key => $item) {
        $objects[$key]->classes[] = 'my-class';
    }
    return $objects;
}
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

Das einzige Problem besteht darin, dass diese Klassen zu li -Elementen und nicht zu direkten Verknüpfungen hinzugefügt werden. Aber es ist das Standardverhalten von WordPress und ich denke nicht, dass Sie es ändern sollten.

Wenn Sie es wirklich ändern müssen, ist es dennoch möglich:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    // you can put your if statements in here (use item, depth and args in conditions)
    if ( $depth == 1 ) {
        $item_output = preg_replace('/<a /', '<a class="level-1-menu" ', $item_output, 1);
    } else if ( $depth == 2 )
        $item_output = preg_replace('/<a /', '<a class="level-2-menu" ', $item_output, 1);
    }
    // .. and so on
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);
2

sie können den folgenden Schritten folgen:

Schritt 1: Gehen Sie im wp-admin zu Darstellung -> Menüs, setzen Sie die Klasse auf den Menüpunkt hier "CSS-Klassen (optional)". Wenn Sie die "CSS-Klassen (optional)" im Menüelement nicht sehen können, befindet sich rechts oben im Bildschirm die Option "Bildschirmoption" und unter "Erweiterte Menüeigenschaften anzeigen" die Option "CSS-Klasse".

Schritt 2: Fügen Sie unter Ihrem them Ordner/function.php den folgenden Code hinzu:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    $classes     = implode(' ', $item->classes);
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Hoffe, dass der obige Code für Sie funktioniert, lassen Sie es mich wissen, wenn er immer noch nicht funktioniert.

5
Hardy Mathew