Agregar clase a los anclajes en los menús de WordPress

Estoy tratando de agregar el Bootstrap estándar nav-link class a los anclajes representados por el menú de WordPress.

1. Puedo pasar variables al wp_nav_menu() que aplica una clase al menú (y elimina el contenido):

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

2. Luego utilizo Apariencias de WordPress > Interfaz de usuario del menú para aplicar nav-item clase a <li> etiquetas

¿Cómo aplico una clase a las etiquetas de anclaje del menú de WordPress?

Puedes hacer lo que necesites con el WP nav_menu_link_attributes gancho:

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

…o si no te gustan los cierres:

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

Elementos de la lista del menú de filtro

Para evitar el uso de la interfaz de usuario del menú de WordPress para agregar clases a los elementos de la lista del menú, puede aprovechar el filtro ‘nav_menu_css_class’:

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

Si tiene varios menús en su sitio o simplemente quiere ser flexible. Puedes extender el wp_nav_menu función incorporada:

Solo agrega add_a_class para usted wp_nav_menu función:

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

Agregue el siguiente código en su 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);

Esto le permite agregar clases SOLO a las anclas de MENÚ ESPECÍFICO. Simplemente agregue sus clases en $menuClassMap valores a continuación.

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

Parámetros de wp_nav_menu() no le permitirá agregar una clase a sus enlaces con la funcionalidad predeterminada. Le permitiría adjuntar su <a href="#"></a> dentro de cualquier html como <span class="wrapped-anchor"><a href="#"></a></span> si utiliza :

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

en caso de que realmente necesidad para establecer una clase para sus anclas, tendría que pasar un objeto Walker. Necesitas leer y entender estos documentos específicos al respecto, sin embargo.

Si desea agregar una clase en la etiqueta de anclaje para un menú específico, puede usar los siguientes pasos

Paso 1: agregue esto en functions.php

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

Paso 2: úsalo así en tu tema

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