¿Cómo añadir los atributos data-toggle="modal" data-target="#myModal" a una barra de navegación de WordPress?

Question

¿Cómo añadir los atributos data-toggle="modal" data-target="#myModal" a una barra de navegación de WordPress?

30 nov 2015, 20:39:31

Vistas: 23.9K

Votos: 3

¡Soy nuevo en WordPress así que por favor sean pacientes! He creado una plantilla en HTML5/CSS3 y estoy en el proceso de intentar convertirla en una plantilla de WordPress.

En mi menú de navegación (en HTML) tengo un menú social que abre 3 modales diferentes:

<social-icons>
  <div class="navbar-collapse collapse">
    <div class="btn-group nav navbar-nav navbar-right" role="group">
      <button type="button" class="btn btn-success navbar-btn facebook"><i class="fa fa-facebook-official btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn twitter"><i class="fa fa-twitter-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn instagram"><i class="fa fa-instagram btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn google"><i class="fa fa-google-plus-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn vine" data-toggle="modal" data-target="#vineModal"><i class="fa fa-vine btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn snapchat" data-toggle="modal" data-target="#snapchatModal"><i class="fa fa-snapchat btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn periscope" data-toggle="modal" data-target="#periscopeModal"><img src="assets/img/periscope.png" class="periscope-img"/></button>
      <button type="button" class="btn btn-success navbar-btn email"><i class="fa fa-envelope btn-icon"></i></button>
    </div>
  </div> <!-- navegación -->
</social-icons>

He creado la estructura del menú en WordPress y asignado todas las clases CSS, pero no puedo encontrar la manera de añadir los otros atributos, específicamente los atributos data-toggle y data-target.

He visto explicaciones que suenan similares pero nada que pueda hacer funcionar, y la mayoría de lo que he encontrado tiene varios años de antigüedad.

¡Si alguien pudiera iluminarme estaría muy agradecido! Gracias de antemano

Benn Moffat

53

menús twitter bootstrap modal de medios

Todas las respuestas a la pregunta

Comentarios

Fantástico, gracias. Lo probaré y veré cómo me va. Una pregunta rápida: donde proporciono el ID del elemento del menú, ¿puedo agregar múltiples elementos del menú o debo agregar el filtro completo varias veces?

Benn Moffat

2 dic 2015 00:42:03

Desafortunadamente @ShuvoHabib, ¡no puedo hacer que ninguno de los dos funcione! En el primer fragmento de código obtengo un error 500 (cambié correctamente #myModal y el número del elemento del menú). Curiosamente, si eliminaba cualquiera de las líneas $atts la página cargaba (sin error 500) pero el modal no funcionaba, pero con ambas líneas solo aparece el error 500.

¿Tienes alguna idea de dónde me estoy equivocando?

Benn Moffat

2 dic 2015 22:23:04

Quizás debería haber mencionado que estoy ejecutando esto en un servidor localhost MAMP en este momento, ¡no creo que eso deba marcar diferencia!

Benn Moffat

2 dic 2015 22:27:09

Shuvo Habib 201 · Answer 1 · 2015-12-01T07:15:46Z

Forma con PHP: Agrega lo siguiente a tu archivo functions.php. Filtro nav_menu_link_attributes:

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

  // inspecciona $item

  if ($item->ID == $menu_target) {
    // el post original usaba una coma después de 'modal' pero esto causaba un error 500 como se menciona en la respuesta del OP
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

Forma con jQuery:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function() {
        jQuery('#menu-item-365').find('a').attr('data-toggle', 'modal');
        jQuery('#menu-item-365').find('a').attr('data-target', '#myModal');
    });
</script>