我需要添加一个data-icon=""
输入到我的Wordpress自定义菜单输入框中。这样我就可以使用图标字体并键入特定图标的代码,在CSS中使用伪元素将其匹配并显示图标。
我找到了大量教程,介绍了如何扩展Walker_Nav_Menu
类,以便我可以添加属性,但没有一个扩展到在Wordpress自定义菜单屏幕上添加新的输入框(http://cl.ly/Sn0C) 然后将其值显示在HTML中。
我用过this code 在自定义菜单管理屏幕上添加数据图标输入框(http://cl.ly/SmqM) 但我的PHP不够好,无法将其与Walker_Nav_Menu
扩展类以在HTML中显示数据图标值。有人能帮我吗?谢谢:)
我希望这可以在函数中完成。php和/或不使用插件。谢谢
顺便说一句,这是我的Walker_Nav_Menu
扩展类代码:
class data_type_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 ) .\'"\' : \'\';
$attributes .= ! empty( $item->data_icon ) ? \' data-icon="\' . esc_attr( $item->data_icon ) .\'"\' : \'\';
$prepend = \'\';
$append = \'\';
if($depth != 0) {
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\' aria-hidden="true">\';
$item_output .= $args->link_before .$prepend.apply_filters( \'the_title\', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= \'</a>\';
$item_output .= $args->after;
$output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
}
}
编辑:Chittaranjan向我询问了更多信息,下面是:
我打这个新分机(data_type_walker
) 在课堂上Walker_Nav_Menu
在我的标题中。我的导航菜单所在的php文件。如下所示:
<?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'container\' => false, \'menu_class\'=> \'nav-menu\', \'walker\' => new data_type_walker() ) ); ?>
输出应如下所示:
<li class="all the various wordpress menu classes"><a href="url" data-icon="whatever input I choose in the Custom Menu Admin section" aria-hidden="true">navigation text link</a></li>