我怎样才能做到这一点：
我想使用wp_nav_menu（）创建菜单并自定义它的输出html。我想把< i >放在链接< a >里面的菜单的每个< li >项目中。
我知道我可以使用css中的< li >项目的背景图像来完成此任务，但我的目标是在导航中使用字体图标。
我也知道，为了完成这个我们可以在wp_nav_menu()or里面使用walker函数使用wp_get_nav_menu_object()函数，但我根本无法使它正常工作。
你尝试过before或link_before选项吗？
before将在<a>之前输出，link_before将在文本之前输出<a>。
http://codex.wordpress.org/Function_Reference/wp_nav_menu
$settings = array(
'before' => '<i class="icon"></i>',
'link_before' => '<i class="icon"></i>'
);
wp_nav_menu( $settings );
我还试图在菜单中添加图标。
我已经尝试过before和link_before选项，但我找不到在这些args中获取任何项目变量的方法。
我的目标是使用来自Title Attribute的Custom Link中设置的Customize Menus获得以下输出
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30">
<a title="social-facebook" href="http://facebook.com">
<i class="fi-social-facebook"></i>Facebook Page
</a>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30">
<a title="social-google-plus+" href="http://plus.google.com">
<i class="fi-social-google-plus"></i>Google+ Page
</a>
</li>
我也检查了另一个答案，但我不知道如何在Custom Link的Customize Menus中添加缩略图。
使用wp walker函数并在那里插入wp menu description。下面解释更多 -
只需将此代码放入主题的functions.php文件中：
class fluent_themes_custom_walker_nav_menu extends Walker_Nav_Menu {
private $blog_sidebar_pos = "";
// add classes to ul sub-menus
function start_lvl( &$output, $depth = 0, $args = Array() ) {
// depth dependent classes
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
$display_depth = ( $depth + 1); // because it counts the first submenu as 0
$classes = array(
'dropdown-menu',
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),
( $display_depth >=2 ? '' : '' ),
'menu-depth-' . $display_depth
);
$class_names = implode( ' ', $classes );
// build html
$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}
// add main/sub classes to li's and links
function start_el( &$output, $item, $depth = 0, $args = Array(), $id = 0 ) {
global $wp_query, $wpdb;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
// depth dependent classes
$depth_classes = array(
( $depth == 0 ? '' : '' ), //class for the top level menu which got sub-menu
( $depth >=1 ? '' : 'dropdown' ), //class for the level-1 sub-menu which got level-2 sub-menu
( $depth >=2 ? 'sub-sub-menu-item' : '' ), //class for the level-2 sub-menu which got level-3 sub-menu
( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
'menu-item-depth-' . $depth
);
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );
// passed classes
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );
// build html
$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';
// link attributes
$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 ) .'"' : '';
//$attributes .= ' class="' . ( $depth > 0 ? '' : '' ) . '"';
// Check if menu item is in main 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."'");
if ( $depth == 0 && $has_children > 0 ) {
// These lines adds your custom class and attribute
$attributes .= ' class="dropdown-toggle"';
$attributes .= ' data-toggle="dropdown"';
$attributes .= ' data-hover="dropdown"';
$attributes .= ' data-animations="fadeInUp"';
}
$description = ! empty( $item->description ) ? '<i class="fa '.esc_attr( $item->description ).'" aria-hidden="true"></i>' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $description.$args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; //If you want the description to be output after <a>
//$item_output .= $description.$args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; //If you want the description to be output before </a>
// Add the caret if menu level is 0
if ( $depth == 0 && $has_children > 0 ) {
$item_output .= ' <i class="fa fa-caret-down"></i>';
}
$item_output .= '</a>';
$item_output .= $args->after;
// build html
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id );
}
} //End Walker_Nav_Menu
看到这一行：
$description = ! empty( $item->description ) ? '<i class="fa '.esc_attr( $item->description ).'" aria-hidden="true"></i>' : '';
这一行：
$item_output .= $description.$args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
在这里你看到$ item-> description是一个变量。例如：如果将fa-user作为菜单的菜单项描述。上面一行的html输出将是：
菜单的完整html输出将是这样的：
<ul class="top-nav nav-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-animations="fadeInUp">
<i class="fa fa-user" aria-hidden="true"></i>My Profile
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu ">
<li><a href="#"><i class="icon-bargraph"></i> Dashboard</a></li>
<li><a href="#"><i class="icon-gears"></i> Profile Setting</a></li>
<li><a href="#"><i class="icon-heart"></i> Questions</a></li>
<li><a href="#"><i class="icon-lock"></i> Logout</a></li>
</ul>
</li>
</ul>
但是，这是您的header.php文件或任何其他主题文件中的wp nav菜单代码：
wp_nav_menu( array('theme_location' => 'top_bar_login','container' => false,'container_id' => '','conatiner_class' => '','menu_class' => 'top-nav nav-right','echo' => true,'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>','depth' => 10, 'walker' => new fluent_themes_custom_walker_nav_menu) );
如果你不确定wordpress菜单的描述在哪里，或者你想要更多关于截图的细节。你可以阅读这篇文章Adding Different Icons To Different Items Of WP Nav Menu
将代码粘贴到输出导航的页面
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'walker' => new my_nav_walker()
)
);
?>
然后在functions.php中调用walker.php
require get_template_directory().'/inc/walker.php';
从wp-includes文件夹中的class-walker-nav-menu.php中复制类Walker_Nav_Menu将Walker_Nav_Menu类更改为my_nav_walker
然后在my_nav_walker类的函数start_el中创建一个名为$ description的变量：
$description = ! empty( $item->description ) ? '<i class="fa '.esc_attr( $item->description ).'" ></i>' : '';
将此代码粘贴到my_nav_walker类的start_el函数中
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $description.$args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
如果你在后端用户图标的菜单项描述中添加fa-user出现在li里面的href标签之间