web-dev-qa-db-ja.com

WordpressナビゲーションバーのHTML編集

ワードプレスページのナビゲーションバーのHTMLを変更する方法はありますか？ （私はメディアクエリで制御されるいくつかのdivを追加したいと思います。）

読んでくれてありがとう！

navigationhtml
1
Rogare

はい、これにはwalkerクラスを実装する必要があります。

これは簡単な例です。

$defaults = array(
    'theme_location' => 'primary',
    'container'      => 'ul',
    'menu_class'     => 'nav navbar-nav main-nav',
    'walker'         => new Primary_Walker_Nav_Menu()
);

wp_nav_menu( $defaults );

上記のコードブロックでは、wp_nav_menu()関数は引数として$defaultsを取ります。配列$defaultsでは、最後のキーは walker です。 walkerキーの値はクラスPrimary_Walker_Nav_Menuのオブジェクトです。

functions.phpファイルに次のコードを実装します。

class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        if (array_search('menu-item-has-children', $item->classes)) {
            $output .= sprintf("\n<li class='dropdown %s'><a href='%s' class=\"dropdown-toggle\" data-toggle=\"dropdown\" >%s</a>\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url, $item->title
            );
        } else {
            $output .= sprintf("\n<li %s><a href='%s'>%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? ' class="active"' : '', $item->url, $item->title
            );
        }
    }

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
    }
}

start_el()メソッドは、単一のツリー項目（<li>、<span>、<a>など）の開始HTMLタグを$outputに追加するために使用されます。

start_lvl()メソッドは、walkerがツリー構造内の新しい "branch"の始まりに到達したときに実行されます。

一般に、このメソッドはコンテナのHTML要素の開始タグ（<ol>、<ul>、<div>など）を$outputに追加するために使用されます。

上記の実装の出力は以下のHTMLになります。

<ul id="menu-main-navigation" class="nav navbar-nav main-nav">
   <li class="dropdown ">
      <a href="http://karunshakya.com.np/services/" class="dropdown-toggle">Services</a>
      <ul class="dropdown-menu" role="menu">
         <li><a href="http://karunshakya.com.np/services/selection-et-recrutement/">Sélection et recrutement</a></li>
         <li><a href="http://karunshakya.com.np/services/mise-disposition-de-personnel/">Mise disposition de personnel</a></li>
         <li><a href="http://karunshakya.com.np/services/gestion-de-salaire/">Gestion de salaire</a></li>
      </ul>
   </li>
   <li><a href="http://karunshakya.com.np/news/">News</a></li>
   <li><a href="http://karunshakya.com.np/medias/">Medias</a></li>
   <li class="last-child"><a href="http://karunshakya.com.np/contactez-nous/">Contactez-nous</a></li>
</ul>

ウォーカークラスの使い方：
http://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

2
Karun

outer 要素（li自体ではない）を変更するだけの場合は、wp_nav_menu()に'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'引数を渡して必要に応じて編集できます。例えば、これはnav要素でリストをラップする方法を示しています。そしてdiv要素：

'items_wrap' => '<div><nav><ul id="%1$s" class="%2$s">%3$s</ul></nav></div>',。

<li>を使って<a>と'before' => '', 'after' => '', 'link_before' => '', 'link_after' => ''の内容を編集するために他の要素を渡すこともできます。

それでも解決しない場合は、必要な final HTML出力を表示してください。

2
Amit