一个选项可以是使用菜单描述(在菜单屏幕选项中找到的选项,如果尚未启用)和custom menu walker 以与您提到的参考网站中类似的方式在菜单项之前/之后显示额外文本。这样,您可以将翻译后的字符串添加到菜单描述字段。
WPBeginner 发布了一个如何使用自定义walker显示菜单描述的示例。以下代码供将来参考。我修改了示例,使描述位于菜单项文本之前。
// This goes into your child theme functions.php
class Menu_With_Description 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 ) .\'"\' : \'\';
$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
$item_output .= \'<span class="sub">\' . $item->description . \'</span><br>\';
$item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
$item_output .= \'</a>\';
$item_output .= $args->after;
$output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
}
}
因为你用的是217,所以你需要复制
components/navigation/navigation-top.php
文件到子主题中的类似路径。
然后将自定义walker添加到菜单中。就像这样,
<?php
/**
* Displays top navigation with custom walker
*/
?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( \'Top Menu\', \'twentyseventeen\' ); ?>">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php echo twentyseventeen_get_svg( array( \'icon\' => \'bars\' ) ); echo twentyseventeen_get_svg( array( \'icon\' => \'close\' ) ); _e( \'Menu\', \'twentyseventeen\' ); ?></button>
<?php
$walker = new Menu_With_Description;
wp_nav_menu( array(
\'theme_location\' => \'top\',
\'menu_id\' => \'top-menu\',
\'walker\' => $walker, // Add custom walker to the menu
) ); ?>
<?php if ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) : ?>
<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( \'icon\' => \'next\' ) ); ?><span class="screen-reader-text"><?php _e( \'Scroll Down\', \'twentyseventeen\' ); ?></span></a>
<?php endif; ?>
</nav><!-- #site-navigation -->
然后为您的孩子主题添加必要的样式
styles.css
.