web-dev-qa-db-fra.com

Comment ajouter les attributs data-toggle = "modal" data-target = "# myModal" à un WP Barre de navigation?

Je suis nouveau sur Wordpress alors soyez patient! J'ai créé un modèle en html5/ccs3 et je suis en train d'essayer d'en faire un modèle wordpress.

Dans mon menu de navigation (en html), j'ai un menu social qui ouvre 3 modaux différents:

<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> <!-- nav -->
</social-icons>

J'ai créé la structure de menus dans WP et alloué toutes les classes css, mais je ne peux pas trouver le moyen d'ajouter d'autres attributs, en particulier les attributs data-toggle et data-target.

J'ai vu des explications similaires, mais rien qui me permette de travailler, et la plupart de ce que j'ai trouvé date de plusieurs années maintenant.

Si quelqu'un pouvait m'éclairer, je serais très reconnaissant! Merci d'avance

menustwitter-bootstrapmedia-modal
3
Benn Moffat

Manière PHP: Ajoutez ce qui suit dans votre fichier functions.php. Filtre nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', 'my_menu_atts', 10, 3 );
function my_menu_atts( $atts, $item, $args )
{
  // Provide the id of the targeted menu item
  $menu_target = 123;

  // inspect $item

  if ($item->ID == $menu_target) {
    // original post used a comma after 'modal' but this caused a 500 error as is mentioned in the OP's reply
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

façon 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>
8
Shuvo Habib