Я использую wp_nav_menu($args)
, и я хочу добавить my_own_class
имя класса CSS в элемент <li>
для получения следующего результата:
<li class='my_own_class'><a href=''>Link</a>
Как это сделать?
Я использую wp_nav_menu($args)
, и я хочу добавить my_own_class
имя класса CSS в элемент <li>
для получения следующего результата:
<li class='my_own_class'><a href=''>Link</a>
Как это сделать?
Вы не можете добавить класс непосредственно в LI очень легко, но есть ли какая-либо причина не нацеливать их на несколько иной, но одинаково определенный способ (по их родительскому ul)?
Вы можете установить класс или идентификатор меню с параметрами menu_class и menu_id (прикрепленные к родительскому элементу UL от LI), а затем нацеливать li через CSS таким образом:
<?php wp_nav_menu('menu_id=mymenu'); ?>
И для CSS:
ul#mymenu li {
/* your styles here */
}
Изменить: на момент написания в 2013 году это был самый простой способ добавить его, но обновления с тех пор добавили эту функцию для добавления классов CSS непосредственно в редактор навигации администратора. Подробнее см. Последние ответы.
ЗДЕСЬ 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)
поле в каждой ссылке меню. Вы можете добавить фильтр для действия nav_menu_css_class
в вашем файле functions.php.
Пример:
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/
Нет необходимости создавать пользовательские ходунки. Просто используйте дополнительный аргумент и установите фильтр для 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($args->add_li_class) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
используйте этот фильтр 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";
}
Добавление класса в <li>
без редактирования файла functions.php
:
Menu Items
Ни один из этих ответов действительно не отвечает на вопрос. Здесь что-то похожее на то, что я использую на моем сайте, путем таргетинга на пункт меню по его названию/имени:
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);
Как насчет использования 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
)
)
);
?>
Жестко это быстрое решение для одноуровневых меню или меню, которое вы хотите добавить Classes ко всем элементам <li>
, и не рекомендуется для более сложных меню
<?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
)
)
);
?>
Правильным для меня является решение Zuan. Помните, что нужно добавить isset в $args->add_li_class
, однако вы получили Notice: Undefined property: stdClass::$add_li_class
если вы не установили свойство во всех wp_nav_menu()
функциях 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);
Без walker menu
его невозможно напрямую добавить. Однако вы можете добавить его javascript.
$('#menu > li').addClass('class_name');