Cum adaug atributele data-toggle="modal" data-target="#myModal" într-o bară de navigare WordPress?

Question

Cum adaug atributele data-toggle="modal" data-target="#myModal" într-o bară de navigare WordPress?

30 nov. 2015, 20:39:31

Vizualizări: 23.9K

Voturi: 3

Sunt nou în WordPress, așa că vă rog să fiți răbdători! Am creat un șablon în HTML5/CSS3 și sunt în proces de a-l transforma într-un șablon WordPress.

În meniul meu de navigare (în HTML) am un meniu social care deschide 3 modale diferite:

<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="Pictogramă 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> <!-- navigare -->
</social-icons>

Am creat structura meniului în WordPress și am alocat toate clasele CSS, dar nu-mi dau seama cum să adaug celelalte atribute, în special atributele data-toggle și data-target.

Am văzut explicații care sună similar, dar nimic ce aș putea face să funcționeze, și majoritatea lucrurilor pe care le-am găsit sunt vechi de câțiva ani.

Dacă cineva m-ar putea lămuri, i-aș fi foarte recunoscător! Mulțumesc anticipat

Benn Moffat

53

meniuri twitter bootstrap media modal

Toate răspunsurile la întrebare

Comentarii

Minunat, mulțumesc, voi încerca asta și voi vedea cum merge, dar am o întrebare rapidă, acolo unde specific id-ul elementului de meniu, pot adăuga mai multe elemente de meniu sau trebuie să adaug întregul filtru de mai multe ori?

Benn Moffat

2 dec. 2015 00:42:03

Din păcate @ShuvoHabib, nu reușesc să fac niciuna dintre variante să funcționeze! În primul fragment de cod primesc o eroare 500 (am schimbat corect #myModal și numărul elementului de meniu), ciudat este că dacă ștergeam oricare dintre liniile $atts, pagina se încărca (fără eroare 500), dar modalul nu funcționa, iar cu ambele linii în cod, doar eroarea 500 apare.

Ai vreo idee unde greșesc?

Benn Moffat

2 dec. 2015 22:23:04

Poate ar fi trebuit să menționez că rulez asta pe un server local MAMP în acest moment, dar nu cred că ar trebui să facă vreo diferență!

Benn Moffat

2 dec. 2015 22:27:09

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

Modalitate PHP: Adaugă următoarele în fișierul tău functions.php. Filtrează nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', 'my_menu_atts', 10, 3 );
function my_menu_atts( $atts, $item, $args )
{
  // Furnizează ID-ul elementului de meniu țintă
  $menu_target = 123;

  // inspectează $item

  if ($item->ID == $menu_target) {
    // postarea originală folosea o virgulă după 'modal', dar aceasta a provocat o eroare 500, așa cum este menționat în răspunsul OP
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

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