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

17

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

Luego encontré esto: agregue atributos personalizados a los elementos de menú sin complemento, lo cual es muy útil, ya que aparece en WordPress 3.6+ ya no tenemos que hacer caminatas largas y complejas y en su lugar podemos usar esto: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Sin embargo, a partir de esta ejecución, la referencia de la API es bastante simple y no ofrece ejemplos, y dado que es tan nueva, hay muy pocas referencias a ella en Google.

Intenté 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 eso funciona, sin embargo, como se esperaba, agrega el atributo a todas las etiquetas a en el menú. Así que estoy tratando de descubrir cómo apuntar a un elemento de menú con # menu-item-7857 ao 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?

Para tener en cuenta, encontré el siguiente ejemplo, pero solo apunta a 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 parece que está en algo, pero no fue capaz de determinar cómo encontrar realmente el número para apuntar a mi enlace específico y dónde / cómo agregar ese condicional en un ejemplo de trabajo. Agregué un comentario pero no recibí respuesta. Desde hace unos 18 días pensé que vería si una recompensa ayudaría.

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

<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 tal vez 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 sugirió que obtengo el siguiente error:

Fatal error: Cannot use object of type WP_Post as array

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

cchiera
fuente
Quiero insertar <? Php the_id ();?> En la variable $ atts. Algo así // inspeccionar $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } return $ atts; ¿Pueden ayudarme? ¿Cómo puedo insertar the_id en la variable $ atts? Gracias
nadzhq

Respuestas:

36

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;
}
Jen
fuente
¡Después de intercambiar algunos de mis propios valores que lo hicieron! ¡Gracias! Lo marcó como correcto, pero dice que necesito esperar 23 horas más antes de poder otorgar la recompensa.
cchiera
¡Feliz de ayudar! : D
Jen
Puse un recordatorio en Fantastical para que no me olvide de otorgar la recompensa mañana.
cchiera
¿Qué pasa si tiene varios elementos de menú como objetivo?
Eric Mitjans
simplemente use la declaración if múltiple si el valor de alternar datos es diferente. O puede guardar la identificación en la clave de la matriz (considerando que son únicas) y el nombre modal como valor de la matriz. Luego verifique la declaración if conarray_key_exists()
Sisir
8

El segundo $itemargumento, que se pone a disposición de su función de filtro, contiene un objeto de elemento de menú. Si se tira, se parece a 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 orientar un elemento de menú específico, debe formular su condición y compararla con los datos disponibles en el objeto, por ejemplo if ( 2220 == $item['ID'] )

Rarst
fuente
¡Gracias por esto! Sin embargo, no estoy seguro de entender cómo obtener la ID de $ item para mi artículo de menú en particular. En su ejemplo, el 2220 también es el mismo que su url " dev.rarst.net/?p=2220 ". Mi enlace al que quiero agregar el atributo de datos no va a otra url de wordpress, sino que es href = "# ContactForm". Según su ejemplo anterior, busqué en Google más e intenté ejecutar echo var_export ($ GLOBALS ['post'], TRUE); pero cuando miro cerca del elemento de menú invidual no veo ninguna identificación única. ¿Puedes aclarar? O en "if (2220 == $ item ['ID'])" ¡Gracias de antemano!
cchiera el
2
El error que está viendo es porque $itemes un objeto, no una matriz; cambia el $item['ID']a $item->ID.
Jen
1

¿Por qué no abordas este problema desde una dirección diferente? En lugar de intentar orientar el elemento del menú con id == ?? que podría cambiar en algún momento (el elemento del menú, no la identificación), use el área de administración de WP para agregar una clase personalizada al elemento del menú al que desea apuntar. 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ás usando jQuery, puedes probar esto .

Jen
fuente
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. ¡trabajó!

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.

Anoop Anson
fuente