wordpress 如何在WordPress的“wp_nav_menu”子菜单中的<a>-tag中添加类和元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13161201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add class and element to <a>-tag in sub-menu of "wp_nav_menu" in WordPress?
提问by Cray
i want to add a class to the a-tag of an sub-menu and a b-tag inside the link.
我想在子菜单的 a 标签和链接内的 b 标签中添加一个类。
WordPress gives me this code:
WordPress 给了我这个代码：
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"><a href="#">Link</a><ul class="dropdown-menu">
And i want this:
我想要这个：
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a><ul class="dropdown-menu">
Does anybody know a solution for that?
有人知道解决方案吗？
回答by martinczerwi
Look at this answer, it explains how to add custom HTML to the wordpress menus: https://stackoverflow.com/a/12251157/1627227
看看这个答案，它解释了如何将自定义 HTML 添加到 wordpress 菜单：https: //stackoverflow.com/a/12251157/1627227
EDIT:
编辑：
I've put together an example to fit your question. You can place it into functions.php. Note the comments, they explain where to add your custom code.
我整理了一个例子来满足你的问题。你可以把它放到functions.php 中。请注意注释，它们解释了在何处添加自定义代码。
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
//$output .= "\n$indent<ul class=\"sub-menu\">\n";
// Change sub-menu to dropdown menu
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
// Most of this code is copied from original Walker_Nav_Menu
global $wp_query, $wpdb;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$has_children = $wpdb->get_var("SELECT COUNT(meta_id)
FROM wp_postmeta
WHERE meta_key='_menu_item_menu_item_parent'
AND meta_value='".$item->ID."'");
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
// Check if menu item is in main menu
if ( $depth == 0 && $has_children > 0 ) {
// These lines adds your custom class and attribute
$attributes .= ' class="dropdown-toggle"';
$attributes .= ' data-toggle="dropdown"';
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
// Add the caret if menu level is 0
if ( $depth == 0 && $has_children > 0 ) {
$item_output .= ' <b class="caret"></b>';
}
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
After you have this in place, you have to go to the point where your menu (wp_nav_menu()) is called. In the answer I've linked to, there's the full function call to wp_nav_menu. However you'll have to add this line: 'walker' => new Custom_Walker_Nav_Menuto the arguments array, to use your custom walker object on that specific menu.
完成此操作后，您必须转到wp_nav_menu()调用菜单 ( ) 的位置。在我链接的答案中，有对wp_nav_menu. 但是，您必须将此行添加'walker' => new Custom_Walker_Nav_Menu到参数数组中，以在该特定菜单上使用您的自定义 walker 对象。
Hope you got it ;)
希望你明白了;)
回答by Victor BV
Since Wordpress 3.6.0 you can use the nav_menu_link_attributes filter:
从 Wordpress 3.6.0 开始，您可以使用 nav_menu_link_attributes 过滤器：
add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );
function add_class_to_items_link( $atts, $item, $args ) {
// check if the item has children
$hasChildren = (in_array('menu-item-has-children', $item->classes));
if ($hasChildren) {
// add the desired attributes:
$atts['class'] = 'dropdown-toggle';
$atts['data-toggle'] = 'dropdown';
$atts['data-target'] = '#';
}
return $atts;
}
The tags unfortunately doesn't have a filter that we could use, so we'll need a walker:
不幸的是，标签没有我们可以使用的过滤器，所以我们需要一个步行者：
class MY_Menu_Walker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
}
}
then add the walker option when calling the menu:
然后在调用菜单时添加 walker 选项：
wp_nav_menu( array('walker' => new MY_Menu_Walker));
回答by Urooj Khan
Use This Code In Function.php
在 Function.php 中使用此代码
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
回答by Khairul Anwar
You can use this to check if there's a sub-menu:
您可以使用它来检查是否有子菜单：
$has_children = $wpdb->get_var("SELECT COUNT(meta_id)
FROM wp_postmeta
WHERE meta_key='_menu_item_menu_item_parent'
AND meta_value='".$item->ID."'");
then do simple checks
然后做简单的检查
if ( $has_children > 0 ) {
// These lines adds your custom class and attribute
$attributes .= ' class="dropdown-toggle"';
$attributes .= ' data-toggle="dropdown"';
}
Remember to set $wpdbas global:
请记住将$wpdb设置为全局：
global $wp_query, $wpdb;
Tada~
多田~
回答by Lemon Kazi
You can place it into functions.php.
您可以将其放入functions.php 中。
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
$GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
$GLOBALS['dd_depth'] = (int) $depth;
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
{
global $wp_query, $wpdb;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
//Add class and attribute to LI element that contains a submenu UL.
if ($args->has_children){
$classes[] = 'dropdown';
$li_attributes .= 'data-dropdown="dropdown"';
}
$classes[] = 'menu-item-' . $item->ID;
//If we are on the current page, add the active class to that menu item.
$classes[] = ($item->current) ? 'active' : '';
//Make sure you still add all of the WordPress classes.
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$has_children = $wpdb->get_var(
$wpdb->prepare("
SELECT COUNT(*) FROM $wpdb->postmeta
WHERE meta_key = %s
AND meta_value = %d
", '_menu_item_menu_item_parent', $item->ID)
);
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
//Add attributes to link element.
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
// Check if menu item is in main menu
if ( $depth == 0 && $has_children > 0 ) {
// These lines adds your custom class and attribute
$attributes .= ' class="dropdown-toggle"';
$attributes .= ' data-toggle="dropdown"';
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
// Add the caret if menu level is 0
if ( $depth == 0 && $has_children > 0 ) {
$item_output .= ' <b class="caret"></b>';
}
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Then in your template where you want to display this menu place this code.
然后在您要显示此菜单的模板中放置此代码。
<?php
if ( has_nav_menu( 'primary' ) ) {
$defaults = array(
'theme_location' => 'primary',
//'menu' => '',
'container' => 'ul',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'walker' => new My_Walker_Nav_Menu()
);
wp_nav_menu( $defaults );
}
?>
Using this I solved my problem.
使用这个我解决了我的问题。
