我离开wordpress有一段时间了,从来没有练习过那么多。我有一些问题,即使我在网上寻找答案。。。关于wp\\U nav\\U菜单行为。
希望你们能帮助并理解我的英语。
问题如下:简短版本:我正在尝试重写<li>
将在HTML中从PHP输出。现在,这是Wordpress输出导航的默认方式。有一个nav -> ul -> li -> a
. 我正在尝试用过滤器对li进行返工<li><a href="#\' . $url . \'"><span>\' . $title . \'</span><i class="fa \' . $list_ico_class . \'"/></a></li>
您可以在筛选器末尾看到最后一行:)
长版本:我有一个主导航,显示自定义帖子类型“项目”的类别(制作我的公文包的新版本)。我可能有3个类别:设计、前端、应用程序。然后,菜单项将是这3个类别+一个博客链接。
我正试图根据项目的标题为每个列表项目添加一个自定义类。在浏览完互联网后,解决方案似乎是创建一个过滤内容的功能。
我根据不同的来源写了以下内容:
add_filter( \'wp_nav_menu_items\', \'my_custom_menu_item\', 10, 2 );
function my_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == \'primary\') {
foreach ( (array) $menu_items as $key => $menu_item ) {
$title = $menu_item->title;
$url = $menu_item->url;
if ($title == \'Design\') {
$list_ico_class = \'fa-pencil\';
}
else if ($title == \'Frontend\') {
$list_ico_class = \'fa-desktop\';
}
else if ($title == \'Applications\') {
$list_ico_class = \'fa-code\';
}
else if ($title == \'Blog\') {
$list_ico_class = \'fa-user\';
}
else {
$list_ico_class = \'fa-question\';
}
$menu_list .= \'<li><a href="#\' . $url . \'"><span>\' . $title . \'</span><i class="fa \' . $list_ico_class . \'"/></a></li>\';
}
}
return $menu_items;
}
然后,在我的标题中。php模板,我以“常规”的方式制作菜单,因为我不知道如何继续。。
<nav class="site-navigation main-navigation">
<span class="nav-info">Smoothly go to<i class="fa fa-long-arrow-right"></i></span>
<?php
$main_nav_values = array(
\'theme_location\' => \'primary\',
\'menu\' => \'\',
\'container\' => \'false\',
\'container_class\' => \'\',
\'container_id\' => \'\',
\'menu_class\' => \'main-navigation\', \'site-navigation\',
\'menu_id\' => \'primary-menu\',
\'echo\' => true,
\'fallback_cb\' => \'wp_page_menu\',
\'before\' => \'\',
\'after\' => \'\',
\'link_before\' => \'\',
\'link_after\' => \'\',
\'items_wrap\' => \'<ul id="%1$s">%3$s</ul>\',
\'depth\' => 0,
\'walker\' => \'\'
);
wp_nav_menu($main_nav_values);
?>
</nav> <!-- .site-navigation .main-navigation -->
很遗憾,当过滤器功能存在时,菜单不再显示。。。没有触发任何错误,可能只是一个空对象?
我尝试了以下建议:http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_css_class 还有那里Get menu item slug
所需输出如下:
<nav class="site-navigation main-navigation">
<span class="nav-info">Smoothly go to<i class="fa fa-long-arrow-right"></i></span>
<ul>
<li><a href=""><span>Design</span><i class="fa fa-pencil"></i></a></li>
<li><a href=""><span>Frontend development</span><i class="fa fa-desktop"></i></a></li>
<li><a href=""><span>Application & Games</span><i class="fa fa-code"></i></a></li>
<li><a href=""><span>Blog</span><i class="fa fa-user"></i></a></li>
</ul>
</nav> <!-- .site-navigation .main-navigation -->
你知道我会犯什么错误吗?提前感谢,请随时询问是否需要更多详细信息!
最合适的回答,由SO网友:JetXS 整理而成
找到了答案。
这可能不是最好的方法,但目前正在发挥作用。
我正在考虑使用过滤器,而解决方案似乎是使用自定义助行器。
class edited_menu_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';
$class_names = $value = \'\';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
$class_names = \' class="\'. esc_attr( $class_names ) . \'"\';
$output .= $indent . \'<li id="menu-item-\'. $item->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 ) .\'"\' : \'\';
//Store the span in a variable
$prepend = \'<span>\';
//Check the title of the item, deduct the class name needed for FontAwesome
if ($item->title == \'Design\') {
$theIcoName = \'fa-pencil\';
} else if ($item->title == \'Frontend\') {
$theIcoName = \'fa-desktop\';
} else if ($item->title == \'Applications\') {
$theIcoName = \'fa-code\';
} else if ($item->title == \'Blog\') {
$theIcoName = \'fa-user\';
} else {
$theIcoName = \'fa-question\';
}
//Create the FontAwesome ready <i> element
$ico = \'<i class="fa \'.$theIcoName.\'"></i>\';
//Close the span and add the calculated icon
$append = \'</span>\'.$ico;
if($depth != 0) {
$ico = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
$item_output .= $args->link_before .$prepend.apply_filters( \'the_title\', $item->title, $item->ID ).$append; //add prepend to open the span storing the title, append to close this span and add the FontAwesome icon in an <i> element
$item_output .= $args->link_after;
$item_output .= \'</a>\';
$item_output .= $args->after;
$output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
}
}
您必须在函数中添加此代码。php文件。
代码的前半部分是“原始wordpress walker”。在下半场,代码有点注释,我做了一些“烹饪”。
为了存储菜单项的文本(项目标题),我创建了一个变量“$prepend”,打开span元素。
之后,我编写了一些条件,这些条件将根据项目的标题确定用于显示FontAwesome图标的“”元素的类。
如果在列表中找不到标题,默认情况下将显示一个带有“fa QUEST”类的问号。这是我的“安全网”,我注意到我的模板中出现了一些问题,我必须修改我的代码,最终生成一个新的图标/菜单项。
进行此扣减后,我们将创建“$append”变量,该变量将关闭“”,但也会在其后面添加正确类fa旁边的+。
最后,我们在末尾构造输出,在“”之间使用“$item\\u output=”。
我希望这足够清楚。。如果有人有更好的解决方案,欢迎分享。