web-dev-qa-db-ja.com

Data-toggle = "modal" data-target = "＃myModal"属性を追加する方法 WP ナビゲーションバー？

私はWordpressが初めてなので辛抱してください！私はhtml5/ccs3でテンプレートを作成し、それからワードプレスのテンプレートを作成しようとしています。

ナビゲーションメニュー（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"/></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>

WPでメニュー構造を作成し、すべてのcssクラスを割り当てましたが、他の属性、特にdata-toggle属性とdata-target属性を追加する方法はわかりません。

説明は似ているように思えますが、私が仕事に就くことができるものは何もありません。そして私が見つけたもののほとんどは数年前のものです。

誰かが私を啓発することができれば私はとても素晴らしいことでしょう！前もって感謝します

menustwitter-bootstrapmedia-modal
3
Benn Moffat

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 )
{
  // 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の方法：

<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