使用していて、 CSSクラス名を要素wp_nav_menu($args)に追加したいと思います。my_own_class<li>
次の結果を取得したいと思います。
<li class='my_own_class'><a href=''>Link</a>
どうやってするか？
157966 次
16 に答える
137
カスタムウォーカーを作成する必要はありません。追加の引数を使用して、nav_menu_css_classのフィルターを設定するだけです。
例えば：
$args = array(
'container' => '',
'theme_location'=> 'your-theme-loc',
'depth' => 1,
'fallback_cb' => false,
'add_li_class' => 'your-class-name1 your-class-name-2'
);
wp_nav_menu($args);
新しい'add_li_class'引数に注意してください。
そして、functions.phpにフィルターを設定します
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
于 2018-08-03T04:34:47.017 に答える
74
関数のフィルターをfunctions.phpファイルに追加できnav_menu_css_classます。
例：
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'secondary') {
$classes[] = 'list-inline-item';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
ドキュメント：https ：//developer.wordpress.org/reference/hooks/nav_menu_css_class/
于 2016-09-07T13:25:41.820 に答える
68
ここでWordPressはwp_nav_menuリンクにカスタムクラスを追加します
<li class='my_own_class'><a href=''>Link</a></li> または、管理パネルからクラスを追加できます 。
に移動
YOURSITEURL/wp-admin/nav-menus.php開いた
SCREEN OPTIONS- チェック
CSS CLASSESを入れるとCSS Classes (optional)、各メニューリンクにフィールドが表示されます。
于 2013-06-19T11:42:16.690 に答える
16
ファイル<li>を編集せずにタグにクラスを追加する：functions.php
- [外観]->[メニュー]->[画面オプション]->[CSSクラス]に移動します
Menu ItemsウィンドウでCSSクラスオプションが有効になります
于 2018-04-13T04:03:07.687 に答える
15
nav_menu_css_class以下に示すように、このフィルターを使用します
function add_classes_on_li($classes, $item, $args) {
$classes[] = 'nav-item';
return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
アップデート
このフィルターを特定のメニューで使用するには
if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
$classes[] = "nav-item";
}
于 2018-07-06T11:51:45.247 に答える
4
str_replace「クラスの追加」だけを行う場合は、関数を使用するだけではどうでしょうか。
<?php
echo str_replace( '<li class="', '<li class="myclass ',
wp_nav_menu(
array(
'theme_location' => 'main_menu',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 1,
'echo' => false
)
)
);
?>
1レベルのメニュー、またはすべての要素にクラスを追加するメニューのクイックフィックスであり<li>、より複雑なメニューにはお勧めしません。
于 2018-02-17T13:25:20.213 に答える
3
これらの回答はどれも実際には質問に答えていないようです。これは、タイトル/名前でメニュー項目をターゲットにすることにより、私のサイトで利用しているものに似ています。
function add_class_to_menu_item($sorted_menu_objects, $args) {
$theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location
$target_menu_title = 'Link'; // Name/Title of the menu item you want to target
$class_to_add = 'my_own_class'; // Class you want to add
if ($args->theme_location == $theme_location) {
foreach ($sorted_menu_objects as $key => $menu_object) {
if ($menu_object->title == $target_menu_title) {
$menu_object->classes[] = $class_to_add;
break; // Optional. Leave if you're only targeting one specific menu item
}
}
}
return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
于 2018-01-04T20:14:56.140 に答える
2
メニュー引数を簡単に実装するためのクラスを追加しました。したがって、次のようにカスタマイズして関数に含めることができます。
include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php";
<?php $menu = (new Menu('your-theme-location'))
->setMenuClass('your-menu')
->setMenuID('your-menu-id')
->setListClass('your-menu-class')
->setLinkClass('your-menu-link anchor') ?>
// Print your menu
<?php $menu->showMenu() ?>
<?php
class Menu
{
private $args = [
'theme_location' => '',
'container' => '',
'menu_id' => '',
'menu_class' => '',
'add_li_class' => '',
'link_class' => ''
];
public function __construct($themeLocation)
{
add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3);
add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 );
$this->args['theme_location'] = $themeLocation;
}
public function wrapWithTag($tagName){
$this->args['container'] = $tagName;
return $this;
}
public function setMenuID($id)
{
$this->args['menu_id'] = $id;
return $this;
}
public function setMenuClass($class)
{
$this->args['menu_class'] = $class;
return $this;
}
public function setListClass($class)
{
$this->args['add_li_class'] = $class;
return $this;
}
public function setLinkClass($class)
{
$this->args['link_class'] = $class;
return $this;
}
public function showMenu()
{
return wp_nav_menu($this->args);
}
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
}
于 2020-12-17T12:31:26.913 に答える
1
<?php
echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
wp_nav_menu(
array(
'menu' => $nav_menu,
'container' => false,
'container_class' => false,
'menu_class' => false,
'items_wrap' => '%3$s',
'depth' => 1,
'echo' => false
)
)
);
?>
于 2018-02-21T12:37:14.590 に答える
0
私にとって正しいのはZuanソリューションです。issetをに追加することに注意してください$args->add_li_class。ただしNotice: Undefined property: stdClass::$add_li_class、すべての関数でプロパティを設定していない場合は、このようになりwp_nav_menu()ます。
これは私のために働いた機能です：
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
于 2019-06-13T13:35:45.510 に答える
0
//メインメニューから翻訳を削除します
function wpdocs_channel_nav_class($classes, $item, $args){
{
if ('primary' === $args->theme_location) {
$classes[] = "notranslate";
}
return $classes;
}
add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4);
これは、メニューラップの既存のクラス配列に新しいクラスを簡単に追加する方法です。
于 2021-06-07T06:10:44.820 に答える
0
これが、WordPressのMainMenuとクラスをliに追加した方法です。
<?php
$defaults = array( 'menu' => 'mainmenu',
'container' => false,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>',
'add_li_class' => 'nav-item',
'theme_location' => 'mainmenu' );
wp_nav_menu( $defaults ); ?>
このコードをfunctions.phpで使用します
function li_new_class($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_li_class', 'li_new_class', 1, 3);
于 2021-12-08T17:18:04.557 に答える
0
これは、「li」 calsと「anyclass」を簡単に置き換える非常に簡単な方法です。指示に従ってください。
ナビゲーション領域でこのコードを使用します。
<?php
$consult_menu = wp_nav_menu(array(
'theme_location' => 'topmenu',
'menu_id' => 'menu',
'menu_class' => 'navbar-nav m-auto',
'echo' => false
)
);
$consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
echo $consult_menu;
?>
次に、ブラウザでコードを調べます。wp default classを見つけて、"str_replace（" default_class_here "、" new_li_class_here "、$ consult_menu）;を置き換えます。 |注：ここでの $ consult_menuは私のテーマ名であり、ここでは任意の名前を使用できます。
于 2022-02-21T17:05:03.767 に答える
-1
于 2021-05-19T09:35:13.147 に答える
-3
それがなければwalker menu、直接追加することはできません。ただし、javascriptで追加することはできます。
$('#menu > li').addClass('class_name');
于 2014-06-24T21:54:35.810 に答える
-24
LIにクラスを直接追加するのは簡単ではありませんが、（親ulによって）わずかに異なるが同じように特定の方法でそれらをターゲットにしない理由はありますか？
menu_classおよびmenu_idパラメーター（LIのUL親に付加されている）を使用してメニューのクラスまたはIDを設定し、CSSを介して次のようにliをターゲットにすることができます。
<?php wp_nav_menu('menu_id=mymenu'); ?>
そしてCSSの場合：
ul#mymenu li {
/* your styles here */
}
編集：2013年の執筆時点では、これが最も簡単な追加方法でしたが、それ以降の更新により、管理ナビゲーションエディターでCSSクラスを直接追加する機能が追加されました。詳細については、最近の回答を参照してください。
于 2013-01-22T20:41:47.377 に答える