web-dev-qa-db-ja.com

wp_nav_menu（）、<li>クラスを変更するにはどうすればいいですか？

私は自分のウェブサイト用のメニューを作っています。静的は次のようになります。

<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>タグ内のidを取り除き、リンクしたいページの名前を反映するようにclassを変更します。基本的に私はこの記事のコードの最初の断片と同じものを出力したいと思います。

私がこれをしているのは、私のCSSがプレーンテキストを挿入したもので制御されているカスタムイメージを使っているからです。

これは可能ですか？この問題を解決するためにどのような戦略を使うべきですか？

theme-developmentmenusnavigation
15
Christian

カスタムウォーカー を使用して、不要なものはすべて削除し、クラスを追加します。これは私がきれいなマークアップでリストを得るために使うウォーカーです： T5_Nav_Menu_Walker_Simple 。

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

12
fuxia

外観>メニューに行きます - あなたが望むメニューを選択してください - 右上の "スクリーンオプション"に行き、 "CSSクラス"を選択してください - 各メニュー項目にクラスを追加してください..

10
Q Studio

最後のポスターで述べたように、画面オプションでチェックされているCSSクラスを使用して、 appearance> menu を使用して独自のクラスを追加できます。ウォーカーでは、そこから入力した内容にアクセスできます。

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

メニューに名前の付いた画像を追加するためにこれを使ったこともあります - ちょっとした欠点ですが、うまくいきます。

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

ブートストラップ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属性を設定解除することもできます。

0
cweiske