WordPress-Menü – Klasse zu Ankern hinzufügen

Lesezeit: 4 Minuten

Der Versuch, die Standard-Bootstrap-Klasse “nav-link” zu den vom WordPress-Menü gerenderten Ankern hinzuzufügen. Bis jetzt …

1/ Ich kann Variablen an wp_nav_menu() übergeben

<?php wp_nav_menu(array(
                            'theme_location' => 'header-menu',
                            'menu_class' => 'navbar-nav',
                            'container' => 'false'
        ) );
        ?>

und wenden Sie auf diese Weise eine Klasse auf das Menü an und entfernen Sie das enthaltende div.

2/ Ich verwende dann die WordPress Appearances > Menu UI, um die Klasse „nav-item“ auf li-Tags anzuwenden.

F. Wie wende ich eine Klasse auf die WordPress-Menüanker an?

  • Um das Hinzufügen von Klassen in der Menü-UI zu vermeiden, können Sie die ‘nav_menu_css_class’ verwenden. Ich werde dies zu meiner Antwort hinzufügen …

    – csknk

    24. März 2017 um 10:09 Uhr

Benutzer-Avatar
csknk

Sie können mit dem WP machen, was Sie brauchen nav_menu_link_attributes Haken:

add_filter( 'nav_menu_link_attributes', function($atts) {
        $atts['class'] = "nav-link";
        return $atts;
}, 100, 1 );

…oder wenn Sie keine Verschlüsse mögen:

function add_link_atts($atts) {
  $atts['class'] = "nav-link";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Elemente der Menüliste filtern

Um die Verwendung der WordPress-Menü-Benutzeroberfläche zum Hinzufügen von Klassen zu den Menülistenelementen zu vermeiden, können Sie den Filter „nav_menu_css_class“ nutzen:

add_filter( 'nav_menu_css_class', function($classes) {
    $classes[] = 'nav-item';
    return $classes;
}, 10, 1 );

  • Diese Filter erscheinen nicht in der Filter-Hook-Referenz von WordPress: codex.wordpress.org/Plugin_API/Filter_Reference. Sicher, dass es sie gibt?

    – Rubén Marrero

    24. März 2017 um 11:17 Uhr

  • nav_menu_link_attributes hat funktioniert, ich habe nav_menu_css_class noch nicht ausprobiert

    – TimotheusAURA

    24. März 2017 um 11:21 Uhr

  • @127.0.0.1 Ja, es gibt sie! Kasse wp-includes/class-walker-nav-menu.php Zeilen 136 und 179

    – csknk

    24. März 2017 um 11:46 Uhr

  • Ich bin froh, dass es funktioniert hat @TimothyAURA, bitte erwägen Sie, die Antwort richtig zu markieren.

    – csknk

    24. März 2017 um 11:47 Uhr

  • Ok danke, ich kümmere mich um die Arbeit. Wenn sie mit meiner positiven Bewertung zählen. Es ist schön, solche Dinge zu haben, obwohl sie nicht immer dokumentiert sind 🙁 –EDIT: Ok, ich nehme TimothyAURAs Wort.

    – Rubén Marrero

    24. März 2017 um 11:48 Uhr


Wenn Sie mehrere Menüs auf Ihrer Website haben oder einfach nur flexibel sein möchten. Sie können die verlängern wp_nav_menu eingebaute Funktion:

Einfach hinzufügen add_a_class zu deinem wp_nav_menu Funktion:

wp_nav_menu(
    array(
        'theme_location'  => 'primary',
        'depth'           => 2,
        'container'       => 'div',
        'add_a_class'     => 'class1 class2',
        'fallback_cb'     => false,
    )
);

Fügen Sie den folgenden Code in Ihre ein functions.php:

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

Benutzer-Avatar
Verschmelzung

Auf diese Weise können Sie Klassen hinzufügen NUR zu Ankern von SPEZIFISCHES MENÜ. Fügen Sie einfach Ihre Klassen hinzu $menuClassMap Werte unten.

    function mytheme__menu_anchors_add_css( $atts, $item, $args ) {

        $menuClassMap = [
            'navbar-menu' => 'my-footer-menu-link-class',
            'footer-menu' => 'my-footer-menu-link-class',
        ];

        $additionalClassName = $menuClassMap[$args->menu->slug] ?? '';

        if($additionalClassName){
            if(!array_key_exists('class', $atts)){
                $atts['class'] = '';
            }
            $classList = explode (' ' , $atts['class']);
            $classList[] = $additionalClassName;
            $atts['class'] = implode (' ' , $classList);
        }
        return $atts;

    }

    add_filter( 'nav_menu_link_attributes', 'mytheme__menu_anchors_add_css', 10, 3 );

Wenn Sie eine Klasse im Anker-Tag für ein bestimmtes Menü hinzufügen möchten, können Sie die folgenden Schritte ausführen

Schritt-1: Fügen Sie dies in der functions.php hinzu

function add_class_on_a_tag($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
return $classes;
}

add_filter('nav_menu_link_attributes', 'add_class_on_a_tag', 1, 3);

Schritt-2:- Verwenden Sie es so in Ihrem Thema

<?php
    // Show Menu here
    wp_nav_menu(array(
        'theme_location' => 'my-menu',
        'menu_class'      => 'footer-top',
        'add_a_class'     => 'nav-link',
    ));
?>

die Parameter von wp_nav_menu() erlaubt Ihnen nicht, Ihren Links eine Klasse mit der Standardfunktionalität hinzuzufügen. Es würde Ihnen erlauben, Ihre einzuschließen <a href="#"></a> in jedem html wie <span class="wrapped-anchor"><a href="#"></a></span> wenn du benutzt :

<?php 
   $parameters = TimothyAURA->set_specific_parameters_you_want(); // i mean, realy fullfill the array with the options you want based on the docs.
   $parameters['before'] = '<span class="wrapped-anchor">';
   $parameters['after'] = '</span>';
   wp_nav_menu($parameters);

Falls Sie wirklich brauchen Um eine Klasse für Ihre Anker festzulegen, müssten Sie ein Walker-Objekt übergeben. Sie müssten lesen und verstehen diese spezifischen Dokumente aber darüber.

  • keine gute Lösung. Ich habe hier eine viel bessere Lösung. stackoverflow.com/a/67859550/9207553

    – Mohammad Ayoub Khan

    6. Juni 2021 um 13:38 Uhr


  • keine gute Lösung. Ich habe hier eine viel bessere Lösung. stackoverflow.com/a/67859550/9207553

    – Mohammad Ayoub Khan

    6. Juni 2021 um 13:38 Uhr


1016490cookie-checkWordPress-Menü – Klasse zu Ankern hinzufügen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy