[WordPress] ワードプレスにブートス トラップのドロップダウンを追加する方法

スポンサーリンク

質問

を使用して web サイトを設計している

フレームワーク、ブートス トラップし、私への挑戦は設計どおりの表示に外務省のドロップ ダウンさせるそれは、ワードプレスのウェブサイトに変換するよ、今。ワードプレスからメニューを動的に取得することができるが css スタイルに従って動的にドロップダウン リストを取得することです

ここでは私の HTML コード

<ul class="nav nav-justified menu_bac">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Products <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation" class="dropdown-submenu"><a>Grandstream</a>

      <ul class="dropdown-menu">
      <li role="presentation" class="dropdown-submenu"><a>IP-Multimedia <br/>Video Telephony</a>
      <ul class="dropdown-menu">
      <li><a href="gxv3275ipmultimedia phone.html">GXV3275 IP <br/>Multimedia phone</a></li>
      <li class="divider"></li>
      <li><a href="gxv3240multimediaipphone.html">GXV3240 IP <br/>Multimedia phone</a></li>


      </ul>
      </li>

ここにメニューを動的に取得するために使用しているコードです

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php wp_nav_menu(array('menu_class' => 'nav nav-justified','container_class' => 'menu_bac')); ?>
</div>
</div>

誰か設計に従って動的にドロップダウンを得るために私を導くことができる場合は大きな助けになるか?

答え

カスタム nav ウォーカーを使用して、メニューを生成します。 https://github.com/twittem/wp-bootstrap-navwalker を好む – それは簡単です、それは私の完璧な作品

答え

この答えをチェック wp_nav_menu サブ] メニューの [クラス名の変更ですか?

な歩行メニューに追加することによって行うことができます、また使用

str_replace

そのいずれかをも確認その質問に別の答えがある。

container

div または nav を設定する必要がありますを使用してメニューのメイン、ul をラップする滑走されますしない場合属性 false.and、

menu_bac

クラスを追加

menu_class

属性その属性の 3 つのクラスがあるでしょうので。

あなたサブメニュー li に属性やクラスを追加する JQuery が簡単になりますだと思います。最善の解決策じゃないかも。しかし、非常に簡単に何かを働かせることができるでしょう

このに役立ちます願っています

答え

さて、ここでは例の答え。このコードはテストしていませんのでご注意ください。このコードを試す前に、あなたのテーマのバックアップをしてください

str_replace

メソッドを使用します

echo str_replace('sub-menu', 'dropdown-menu', wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav nav-justified menu_bac','container' => false,'echo' => false)));

クラスとサブメニュー li に属性を追加する jquery

jQuery(document).ready(function() {
     jQuery('.dropdown-menu li').addClass('dropdown-submenu');
     jQuery('.dropdown-menu li').attr('role', 'presentation');
});

あなた theme_location を定義する必要があります、wp_nav_menu 内部配列プライマリは 1 つ既定。 その 1 つを使用してカスタムの nav メニューを作った場合。 それ以外の場合、メニューは動作しません。

この役立ちますだと思います何か間違っている場合私に知らせて。

http://stackoverflow.com/questions/28164980/how-to-add-bootstrap-dropdown-to-wordpress

スポンサーリンク

Leave a Reply