web-dev-qa-db-ja.com

WordPressメニューウィジェットにカスタムクラスを追加する方法

カスタムメニューウィジェットを作成しました。これは、実際には、WordPressのコアファイルによって提供されるデフォルトウィジェットのレプリカです。

しかし、私はいくつかの課題に直面しています。それは私のカスタムメニュー、クラスに対応することができません。

ページをブラウザにチェックインしたところ、このようなHTMLがレンダリングされています→

私は自分の問題を解決しようとしているいくつかの答えを受け取りました。つまり、要するに私は以前よりも少し教育を受けています。問題はこれです。→これを使用するのであれば'menu_class' => 'footer-menu'それから<ul></ul>タグに新しいクラスを注入していますが、それは望まれていません。クラスをdivタグにインジェクトしたいのですが。

現在、この構造は来ています→<div class="menu-menu-1-container"><ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul></div>

でもこんな感じ→

<nav class="footer-menu"> <ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"> <a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul> </nav>

だからどういうわけかコンテナパラメータにnew classをインジェクトすることができれば+ divからnavにその構造を変更することができればすべてが修正されたようです。

ライブWPリンク

menuswidgets
1
The WP Novice

（以下のコメントに基づいて更新しました。）

<div class="menu-menu-1-container">はWPのデフォルトメニューコンテナから来ています。どのタグを使用するか（div、ulなど）をカスタマイズしたり、WPにコンテナをまったく使用しないように指示したり、IDやクラスを設定したりできます（menu-menu-1-container）。 container_classを呼び出すときに、container、container_id、およびwp_nav_menu引数を使用する.

<ul id="menu-menu-4" class="menu"> - メニューを呼び出すときに、 "Front End display"ブロックの終わりに向かってmenu_classとmenu_idを含めることで、このクラスとIDを簡単に変更できます。

$nav_menu_args = array(
    'fallback_cb' => '',
    'container' => 'ul',
    'container_class' => 'my_custom_container_class',
    'container_id' => 'my_custom_container_id',
    'menu' => $nav_menu,
    'menu_class' => 'my_custom_css_class',
    'menu_id' => 'my_custom_css_id'
);

クラスとIDを好きなもの、変数、その他に変更します。単一のURLに複数のメニューを表示する場合は、IDを動的変数に設定して、同じIDを持つ複数のメニューが表示されないようにします。

あなたがさらに何かをカスタマイズする必要があるならば、 WPのwp_nav_menuのコードリファレンス あなたが微調整できるすべてをリストします。それでも十分でない場合は、カスタムウォーカーを検討することを検討してください。

2
WebElaine