如何显示双语菜单和标题?

时间:2019-04-27 作者:Rose Thorn

供参考:https://www.hpa.org.nz/about/our-role

请注意,在每个英文菜单项和英文标题上方的较小文本中有双语菜单“Te Reo Māori”。

我看过的所有多语言插件都允许语言切换,但我只想在菜单和标题上同时显示两种语言。

当前使用的主题是217,我可以通过一些快速而脏的css(::在伪元素之前)来实现这一点

e、 g。

.menu-item::before {
  content: "Menu item";
}

h2::before {
  content: "Header item";
  font-family: "Libre Franklin";
  font-weight: normal;
  font-size: 0.65em;
  display: block;
}
但这需要我为每一个菜单项、标题和任何我想使用双语的地方添加相关的css。

那么有没有一种方法可以让一个多语言插件加上一个PHP(或者Javascript?)之前将作为::引入其他语言的代码段?

1 个回复
SO网友:Antti Koskinen

一个选项可以是使用菜单描述(在菜单屏幕选项中找到的选项,如果尚未启用)和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.

相关推荐

无法成功执行AJAX脚本以调用函数.php特定的函数。使用XAMPP本地主机进行测试

在过去的12个小时里,我一直在努力掌握AJAX,但我正在慢慢失去它。如何通过表单或任何其他方式传递两个基本输入日期,而不是刷新页面,并让它执行包含JS脚本的PHP函数?在我将值传递给脚本之前,我只想回显我传递的数据数组,看看是否。。。ajax正在发挥作用。表单按钮只会刷新页面,所以我认为AJAX根本没有发挥作用。我正在试穿https://localhost 对于xampp。我不知道停止刷新并在按钮上插入ajax脚本缺少了什么。欣赏任何见解。功能。php<?php add_action(\'w