it-swarm.com.de

Wie füge ich die Attribute data-toggle = "modal" data-target = "# myModal" zu a hinzu? WP Navigationsleiste?

Ich bin neu in Wordpress, bitte haben Sie etwas Geduld! Ich habe eine Vorlage in html5/ccs3 erstellt und bin gerade dabei, eine WordPress-Vorlage daraus zu machen.

In meinem Navigationsmenü (in HTML) habe ich ein soziales Menü, das 3 verschiedene Modalitäten öffnet:

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

Ich habe die Menüstruktur in WP erstellt und alle CSS-Klassen zugewiesen, aber ich kann nicht herausfinden, wie die anderen Attribute, insbesondere die Datenumschalt- und Datenzielattribute, hinzugefügt werden.

Ich habe Erklärungen gesehen, die ähnlich klingen, aber nichts, was ich zur Arbeit bringen kann, und das meiste, was ich gefunden habe, ist jetzt mehrere Jahre alt.

Wenn mich jemand aufklären könnte, wäre ich sehr dankbar! Danke im Voraus

3
Benn Moffat

PHP-Methode: Fügen Sie Ihrer functions.php-Datei Folgendes hinzu. Filter 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;
}

jQuery Weg:

<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