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

11

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

A continuación, encontré esto: Añadir atributos personalizados a los elementos del menú sin el complemento , lo cual es muy útil, ya que aparece en WordPress 3.6+, ya no tenemos que hacer caminatas largas y complejas, sino que podemos usar esto: enlace

Sin embargo, a partir de este momento, la referencia de la API es bastante simple y no ofrece ejemplos, y como es tan nueva, hay muy pocas referencias a ella en Google.

Probé esto primero:

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

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

y, sin embargo, funciona como se espera agrega el atributo a todas las etiquetas en el menú. Así que estoy tratando de averiguar cómo apuntar a un elemento del menú con # menu-item-7857 o similar.

¿Alguien sabe dónde encontrar un ejemplo de orientación a un elemento del menú o puede determinar cómo basarse en la información que se encuentra en la referencia de la API vinculada anteriormente?

A tener en cuenta, encontré el siguiente ejemplo, pero solo se enfoca en elementos que tienen hijos, lo que 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 a continuación suena como si se tratara de algo, pero no pudo determinar cómo encontrar el número para dirigir mi enlace específico y dónde / cómo agregar ese condicional en un ejemplo funcional. Agregué un comentario pero no recibí respuesta. Desde hace unos 18 días pensé en ver si una recompensa ayudaría.

Cuando miro el código del enlace que quiero orientar:

<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, por lo que creo que quizás ese sea el número al que debería apuntar.

Pero cuando lo 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'] ) {
        // inspect $item, then …
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

Sin embargo, agregando que si la declaración del comentarista me sugirió, recibo el siguiente error:

Fatal error: Cannot use object of type WP_Post as array

Supongo que se requiere más código, pero en caso de pérdida. Como recordatorio, sin la instrucción if, funciona, sin embargo, se dirige a todos los enlaces en lugar de al enlace que quiero orientar.

    
pregunta cchiera 04.11.2013 - 07:02

4 respuestas

30

Edición específica del código que proporcionó en la pregunta original:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}
    
respondido por el guiniveretoo 22.11.2013 - 16:41
7

El segundo argumento $item , que está disponible para su función de filtro, contiene un objeto de elemento de menú. Si se vierte se ve algo como esto:

[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] => Home
        [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] => Custom
        [title] => Home
        [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 dirigirse a un elemento de menú específico, necesita formular su condición y compararla con los datos disponibles en el objeto, por ejemplo, if ( 2220 == $item['ID'] )

    
respondido por el Rarst 04.11.2013 - 10:20
1

Quería agregar letras de datos al menú personalizado que había creado en WordPress.

Los pasos que elegí fueron:

  1. Encontré el número de identificación de mi menú.
  2. agregó esas líneas de código de @guiniveretoo
  3. escribió declaraciones if para cada elemento del menú (ya que quería que se inyectaran diferentes valores de atributo).
  4. 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'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

Espero que esto te ayude.

    
respondido por el Anoop Anson 01.05.2018 - 08:56
0

¿Por qué no abordas este problema desde una dirección diferente? En lugar de intentar apuntar al elemento del menú con id == ?? que podría cambiar en algún momento (el elemento del menú, no el ID), use el área de administración de WP para agregar un custom class para el elemento de menú que desea orientar. Luego use esa clase en su Javascript para activar la información que necesita:

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

Mi javascript no está garantizado. Si no está utilizando jQuery, puede probar esto .

    
respondido por el guiniveretoo 22.11.2013 - 16:31

Lea otras preguntas en las etiquetas