Come aggiungere gli attributi data-toggle="modal" data-target="#myModal" ad una barra di navigazione WordPress?

Question

Come aggiungere gli attributi data-toggle="modal" data-target="#myModal" ad una barra di navigazione WordPress?

30 nov 2015, 20:39:31

Visualizzazioni: 23.9K

Voti: 3

Sono nuovo su Wordpress quindi vi chiedo pazienza! Ho creato un template in HTML5/CSS3 e sto cercando di convertirlo in un template WordPress.

Nel mio menu di navigazione (in HTML) ho un menu social che apre 3 diversi modal:

<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" alt="Icona Periscope" title="Periscope"/></button>
      <button type="button" class="btn btn-success navbar-btn email"><i class="fa fa-envelope btn-icon"></i></button>
    </div>
  </div> <!-- nav -->
</social-icons>

Ho creato la struttura del menu in WordPress e ho assegnato tutte le classi CSS, ma non riesco a capire come aggiungere gli altri attributi, in particolare gli attributi data-toggle e data-target.

Ho visto spiegazioni che sembrano simili ma niente che sono riuscito a far funzionare, e la maggior parte di quello che ho trovato risale a diversi anni fa.

Se qualcuno potesse illuminarmi ne sarei molto grato! Grazie in anticipo

Benn Moffat

53

menu twitter bootstrap media modal

Tutte le risposte alla domanda

Commenti

Fantastico grazie, proverò e vedrò come va, ma una domanda veloce: dove indico l'ID della voce di menu, posso aggiungere più voci di menu oppure devo ripetere l'intero filtro più volte?

Benn Moffat

2 dic 2015 00:42:03

Sfortunatamente @ShuvoHabib non riesco a far funzionare nessuno dei due! Nel primo pezzo di codice ottengo un errore 500 (ho modificato correttamente #myModal e il numero della voce di menu), stranamente se cancello una delle righe $atts la pagina si carica (nessun errore 500) ma il modal non funziona, mentre con entrambe le righe presenti ottengo solo l'errore 500.

Hai idea di dove sto sbagliando?

Benn Moffat

2 dic 2015 22:23:04

Forse avrei dovuto specificare che al momento lo sto eseguendo su un server MAMP in localhost, non credo che questo dovrebbe fare differenza però!

Benn Moffat

2 dic 2015 22:27:09

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

Metodo PHP: Aggiungi il seguente codice al tuo file 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 )
{
  // Fornisci l'ID della voce di menu target
  $menu_target = 123;

  // ispeziona $item

  if ($item->ID == $menu_target) {
    // il post originale usava una virgola dopo 'modal' ma questo causava un errore 500 come menzionato nella risposta dell'OP
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

Metodo 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>