[英]How to add link_after and lin_before class in Wordpress wp_nav_menu?
[英]How to add class to link in wp_nav_menu?
我正在嘗試制作一個沒有 ul 和 li 的 wp 菜單,並將 class 添加到元素中。
我試過在我的 function.php 中添加這個
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');
在我的模板中,我有:
<?php
$menuParameters = array(
'menu' => 'Videos',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
但是 output 僅將 class 應用於第一項,而不是預期的所有<a>
。
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a href="#">Second item</a>
</div>
我正在努力實現這一目標,基本上是將 class 應用於我的所有物品(不確定為什么它只應用於一個物品)-請不要 jQuery。
<div class="list-group">
<a class="list-group-item" href="#">First item</a>
<a class="list-group-item" href="#">Second item</a>
</div>
從我發現的這個答案中得到一個提示,這是關於將類添加到菜單列表項的最簡潔的方法,我使用了nav_menu_link_attributes過濾器,它在添加類時效果很好。
在您的functions.php 中,添加:
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
或者,您可能希望添加選項以將類添加到列表項:
function add_menu_list_item_class($classes, $item, $args) {
if (property_exists($args, 'list_item_class')) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);
現在,在您的模板中,要構建菜單,您只需添加兩個新參數,例如:
wp_nav_menu([
'theme_location'=> 'primary_navigation',
'menu_class' => 'navbar-nav ml-auto flex-nowrap',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link m-2 menu-item nav-active'
]);
適用於具有不同外觀的多個菜單的主題。
感謝Sergiu Paraschiv 的評論,問題在於限制為 1。
因此它應該在function.php中:
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
更新
實際上有一種更好的方法可以給我們更多的控制權,並且這段代碼由 Jeff Starr 在這篇文章中提供
注意:這不是添加當前類
在 wp 上創建菜單,然后記得在菜單編輯器中單擊該位置,然后在您的函數中單擊:
// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu name
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<nav>' ."\n";
$menu_list .= "\t\t\t\t". '<ul>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
}
$menu_list .= "\t\t\t\t". '</ul>' ."\n";
$menu_list .= "\t\t\t". '</nav>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
最后我們可以調用我們的菜單:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
上面的代碼取自上面鏈接的帖子,我想包含這個答案,因為這個問題似乎有很多訪問量。
更新 2
另一種解決方案是(可能是最好的):
頭文件.php:
<?php
wp_nav_menu( array(
'theme_location' => 'topnav',
'menu' =>'topnav',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
'depth' => 0
) );
?>
函數.php:
// register the nav
function register_my_menu() {
register_nav_menu('topnav',__( 'topnav' ));
}
add_action( 'init', 'register_my_menu' );
// let's add "*active*" as a class to the li
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
// let's add our custom class to the actual link tag
function atg_menu_classes($classes, $item, $args) {
if($args->theme_location == 'topnav') {
$classes[] = 'nav-link';
}
return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
我想向 li 添加 'item' 類應該編寫以下代碼:
add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
$classes[] = 'item';
return $classes;
}
我有將類添加到錨標記的解決方案。
1:步驟:在functions.php中添加這個
function add_additional_class_on_a($classes, $item, $args)
{
if (isset($args->add_a_class)) {
$classes['class'] = $args->add_a_class;
}
return $classes;
}
add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);
2:然后在你的主題中像這樣使用它
<?php
// Show Menu here
wp_nav_menu(array(
'theme_location' => 'my-footer-menu',
'container_id' => '',
'menu_class' => 'footer-top list-unstyled',
'menu_id' => '',
'add_a_class' => 'box-link text-dark',
));
?>
一個帶有 Java 腳本的 mroe 解決方案:
const allLIItems = document.querySelectorAll(".menu-item");
for (let i = 0; i < allLIItems.length; i++) {
allLIItems[i].classList.add("nav-item");
var aHref = allLIItems[i].innerHTML.split(" ");
const newAHref = `${aHref[0]} class="nav-link" ${aHref[1]}`;
allLIItems[i].innerHTML = newAHref;
}
@stol 的回答幫助了我! 太感謝了!
例如(這是我的情況):
函數.php
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
header.php
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'fallback_cb' => false,
'link_class' => 'nav-header hidden'
)
);
?>
我的解決方案很簡單,使用我們的朋友 jquery
在菜單中注入自定義 menu_id
<?php
wp_nav_menu(array(
'theme_location'=>'primary',
'container'=>false,
'menu_class'=>'navbar-nav mr-auto',
'menu_id'=>'customAclassInWp_nav_menu'
)
);
?>
然后使用 jquery 注入缺失的類。
$( "#customAclassInWp_nav_menu li a" ).addClass( "nav-link" );
tadammmm :)
請享用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.