Cómo agregar un atributo data a un elemento del menú de WordPress

Question

Cómo agregar un atributo data a un elemento del menú de WordPress

4 nov 2013, 08:02:43

Vistas: 61.2K

Votos: 21

Estoy usando Twitter Bootstrap y necesito agregar el atributo data-toggle="modal" a la etiqueta a de un enlace del menú. Al buscar, la mayoría de los resultados hacen referencia a walkers para menús desplegables de Twitter Bootstrap, sin embargo este menú no tiene desplegables y solo necesito agregar ese atributo en particular.

Luego encontré esto: Agregar atributos personalizados a elementos del menú sin plugin que es muy útil ya que parece que en WordPress 3.6+ ya no tenemos que hacer walkers complejos y en su lugar podemos usar esto: http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

Sin embargo, actualmente esa referencia de la API está bastante vacía y no ofrece ejemplos, y como es tan nueva hay muy pocas referencias en Google.

Primero intenté esto:

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

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspeccionar $item, luego ...
    $atts['data-toggle'] = 'modal';
    return $atts;
}

y eso funciona, pero como era de esperar agrega el atributo a todas las etiquetas a del menú. Así que estoy tratando de averiguar cómo dirigirme a un elemento del menú con #menu-item-7857 a o similar.

¿Alguien sabe dónde encontrar un ejemplo de cómo apuntar a un elemento del menú específico o puede determinar cómo hacerlo basándose en la información que está en la referencia de la API enlazada arriba?

Para señalar, encontré el siguiente ejemplo pero solo se dirige a elementos que tienen hijos, lo cual no ayuda pero puede estar en la dirección correcta:

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

ACTUALIZACIÓN - La única respuesta de abajo parece estar en algo pero no pude determinar cómo encontrar el número para apuntar a mi enlace específico y dónde/cómo agregar esa condicional en un ejemplo funcional. Agregué un comentario pero no obtuve respuesta. Han pasado unos 18 días y pensé que una recompensa podría ayudar.

Cuando miro el código del enlace al que quiero apuntar:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

Veo el número 7858 así que pienso que tal vez ese es el número al que debería apuntar.

Pero cuando intento por ejemplo:

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

function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // inspeccionar $item, luego ...
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

Sin embargo, al agregar esa declaración if que sugirió el comentarista, obtengo el siguiente error:

Fatal error: Cannot use object of type WP_Post as array

Asumo que se requiere más código pero estoy perdido. Como recordatorio, sin la declaración if funciona, sin embargo se dirige a todos los enlaces en lugar del único enlace que quiero apuntar.

TechRemarker

393

funciones menús

Comentarios

Quiero insertar <?php the_id();?> en la variable $atts. Algo así como // inspeccionar $item if ($item->ID == $menu_target) { $atts['data-toggle'] = 'modal-<?php the_id();?>'; } return $atts; ¿Podrías ayudarme a insertar the_id en la variable $atts? Gracias

nadzhq

15 feb 2014 08:42:56

Todas las respuestas a la pregunta

Comentarios

¡Después de cambiar algunos de mis propios valores funcionó! ¡Gracias! Lo marqué como correcto, pero dice que necesito esperar 23 horas más antes de poder otorgar la recompensa.

TechRemarker

22 nov 2013 17:50:18

¡Feliz de ayudar! :D

Jen

22 nov 2013 17:51:12

Puse un recordatorio en Fantastical para no olvidarme de otorgar la recompensa mañana.

TechRemarker

22 nov 2013 18:07:00

¿Qué pasa si tienes varios elementos de menú como objetivo?

Eric Mitjans

20 nov 2015 14:23:29

simplemente usa múltiples declaraciones if si el valor de data-toggle es diferente. O puedes guardar el id como clave de array (considerando que son únicos) y el nombre del modal como valor del array. Luego verifica la declaración if con array_key_exists()

Sisir

17 abr 2016 16:32:33

El segundo argumento $item, que se pone a disposición de tu función de filtro, contiene un objeto de elemento de menú. Si lo imprimes, se verá algo así:

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Inicio
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Personalizado
        [title] => Inicio
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

Para apuntar a un elemento de menú específico, necesitas formular tu condición y verificarla contra los datos disponibles en el objeto, por ejemplo if ( 2220 == $item['ID'] )

Rarst

100K

4 nov 2013 11:20:03

Comentarios

¡Gracias por esto! No estoy del todo seguro de cómo obtener el ID del $item para mi elemento de menú en particular. En tu ejemplo, el 2220 también es el mismo que tu URL "http://dev.rarst.net/?p=2220". El enlace al que quiero agregar el atributo de datos no va a otra URL de WordPress, sino que tiene un href="#ContactForm". Basándome en tu ejemplo, busqué más en Google e intenté ejecutar echo var_export($GLOBALS['post'], TRUE); pero cuando miro cerca del elemento de menú individual, no veo ningún ID único. ¿Puedes aclararlo? O en "if ( 2220 == $item['ID'] )" ¡Gracias de antemano!

TechRemarker

4 nov 2013 16:07:44

El error que estás viendo se debe a que $item es un objeto, no un array; cambia $item['ID'] por $item->ID.

Jen

22 nov 2013 17:36:49

¿Por qué no abordas este problema desde un ángulo diferente? En lugar de intentar apuntar al elemento del menú con id == ?? lo cual podría cambiar en algún momento (el elemento del menú, no el id), utiliza el área de Administración de WP para agregar una clase personalizada al elemento del menú que deseas apuntar. Luego usa esa clase en tu Javascript para activar la información que necesitas:

$('.my-class').click(function(e){
  // hacer otras cosas
  e.preventDefault;
});

Mi javascript no está garantizado. Si no estás usando jQuery, podrías probar esto.

Jen

2.92K

22 nov 2013 17:31:19

Quería agregar data-letters al menú personalizado que había creado en WordPress.

Los pasos que seguí fueron:

Encontré el número de ID de mi menú.
Añadí esas líneas de código de @guiniveretoo
Escribí sentencias if para cada elemento del menú (ya que quería inyectar diferentes valores de atributos).
¡Funcionó!

Aquí está mi código.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROYECTOS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'CURRÍCULUM';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'OBRAS DE ARTE';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = '¡HOLA!';
  }
  return $atts;
}

Espero que esto te ayude.

Anoop Anson

11

1 may 2018 09:56:15

Jen 2.92K · Accepted Answer · 2013-11-22T17:41:52Z

Editando específicamente el código que proporcionaste en la pregunta original:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // El ID del elemento del menú objetivo
  $menu_target = 123;

  // inspeccionar $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

Jen

2.92K

22 nov 2013 17:41:52