Как добавить атрибуты data-toggle="modal" data-target="#myModal" в навигационное меню WordPress?

Question

Как добавить атрибуты data-toggle="modal" data-target="#myModal" в навигационное меню WordPress?

30 нояб. 2015 г., 20:39:31

Просмотры: 23.9K

Голосов: 3

Я новичок в WordPress, поэтому прошу быть терпеливыми! Я создал шаблон на html5/css3 и сейчас пытаюсь сделать из него шаблон WordPress.

В моем навигационном меню (в html) есть социальное меню, которое открывает 3 разных модальных окна:

<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="Иконка 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> <!-- навигация -->
</social-icons>

Я создал структуру меню в WordPress и назначил все классы CSS, но я не могу понять, как добавить другие атрибуты, в частности атрибуты data-toggle и data-target.

Я видел объяснения, которые звучат похоже, но ничего из того, что я пробовал, не работает, и большинство из того, что я нашел, уже несколько лет устарело.

Если кто-нибудь может просветить меня, я буду очень благодарен! Заранее спасибо

Benn Moffat

53

меню twitter bootstrap медиа модальное окно

Все ответы на вопрос

Комментарии

Отлично, спасибо! Я попробую это сделать и посмотрю, как получится. Быстрый вопрос: там, где я указываю ID пункта меню, можно ли добавить несколько пунктов меню или нужно добавлять весь фильтр несколько раз?

Benn Moffat

2 дек. 2015 г. 00:42:03

К сожалению, @ShuvoHabib, у меня не работает ни тот, ни другой вариант! В первом фрагменте кода я получаю ошибку 500 (я правильно изменил #myModal и номер пункта меню). Странно, но если я удаляю любую из строк $atts, страница загружается (без ошибки 500), но модальное окно не работает, а с обеими строками - только ошибка 500.

Есть идеи, где я ошибаюсь?

Benn Moffat

2 дек. 2015 г. 22:23:04

Возможно, мне следовало упомянуть, что я запускаю это на локальном сервере MAMP в данный момент, хотя вряд ли это должно иметь значение!

Benn Moffat

2 дек. 2015 г. 22:27:09

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

PHP способ: Добавьте следующий код в файл functions.php. Фильтр nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', 'my_menu_atts', 10, 3 );
function my_menu_atts( $atts, $item, $args )
{
  // Укажите ID целевого пункта меню
  $menu_target = 123;

  // проверка $item

  if ($item->ID == $menu_target) {
    // оригинальный пост использовал запятую после 'modal', но это вызывало ошибку 500, как упомянуто в ответе OP
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

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>