home iconホーム / wordpress / wp_nav_menu（）、<li>クラスを変更する方法は？

wp_nav_menu（）、<li>クラスを変更する方法は？

    • vote up icon 17 vote down icon
    • translation icon
    • view icon70949 calendar icon2011-12-26

    自分のウェブサイトのメニューを作成しています.スタティックは次のようになります:

     <nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

    自動<ul>タグを削除するために、<div>タグをカスタマイズする方法を理解できました.しかし今、私は<li>タグをカスタマイズして、CSSを介して特定の動作を制御するために異なるclass名を割り当てることができるようにしたいと思います. wp_nav_menu()を使用すると、出力は次のようになります.

         <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

    <li>タグの<li>を削除し、ページの名前を反映するようにclassを変更したいリンクしたいです.基本的に、この投稿の最初のコードスニペットと同じものを出力したいと思います.

    これを行う理由は、プレーンテキストではなくCSSによって制御されるカスタム画像を使用しているためです.

    これは可能ですか?この問題を克服するためにどのような戦略を使用する必要がありますか?

    theme-development menus navigation
    • ここで、ul> li> aに異なるクラスを追加できます https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

4  回答

  • 投票
    • accept answer icon
    • translation icon
    • calendar icon 2011-12-26

    カスタムウォーカーを使用して、不要なものをすべて削除し、クラスを追加します.クリーンなマークアップのリストを取得するために使用するウォーカーは次のとおりです: T5_Nav_Menu_Walker_Simple .

    'nav_menu_css_class'または'wp_nav_menu_items'をフィルタリングすることもできます.しかし、私の意見では、ウォーカークラスの方が理解しやすく、管理しやすいです.

    • Toschoのおかげで、新しいバージョンのWordpress(3.3)では、問題を解決するために、各メニュー項目にカスタムクラスを追加できることがわかりました.私はあなたが私に提案したスクリプト(T5_Nav_Menu_Walker_Simple)を試しましたが、これは `
    • `からすべてを取り除きますが、どの要素を保持するかをどのように制御できますか?
  • @Christian必要に応じてウォーカーを変更できます.これは、非常に基本的な例です.利用可能な情報を確認するには、各 `li`に`print_r($item、TRUE) `を追加します.次に、それをどうするかを決定します.:)
  • これは私を正しい方向に向けました.必要なのは** wp_nav_menu **でしたが、**しかし**特定のユースケースで機能するように 'container_class'パラメーターを変更する必要がありました.別のメニューですが、クラスがcssで一貫している必要がありました.
    • translation icon
    • calendar icon 2012-09-22

    外観に移動>メニュー-必要なメニューを選択します-右上の[画面オプション]に移動し、[cssクラス]を選択します-各メニュー項目にクラスを追加します.

    • translation icon
    • calendar icon 2019-04-22

    ブートストラップ4.3で必要なため、<li>クラスをnav-linkに設定します.

     function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

    その配列のid属性の設定を解除することもできます.

    • translation icon
    • calendar icon 2013-06-13

    最後に述べたように、画面オプションでCSSクラスにチェックマークを付けて、外観>メニューから独自のクラスを追加できます.ウォーカーでは、次の方法で入力内容にアクセスできます.

     $item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

    これを使用して、メニューに名前の付いた画像を追加しました.少し薄っぺらですが、機能します.

     <img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">