msgbartop
世界上没有老实人,所谓的老实人是用来欺骗像我这样老实的人!
msgbarbottom

19 9月 11 WordPress导航菜单中英文显示【小标题】

2011年9月19日发表于Int.Ru | 共有:3 人评论

午夜客最近要做个双语中英文的企业站。

当然,午夜客也是用的万能的Wordpress啦。

WordPress默认的导航栏只显示导航标签,而不显示标题属性

WordPress导航菜单中英文显示【小标题】

WordPress导航菜单中英文显示【小标题】

 

标题属性大家都知道是用来显示鼠标移到链接上后的提示性文字,而午夜客希望他直接显示在导航标签的下方。

 

如果想让下拉菜单也显示中英文小标题,可以查看文章-WordPress下拉菜单中英文显示小标题

 

所以标题属性是用来做中英文显示的关键所在。

 

wordpress导航栏显示小标题-午夜客

wordpress导航栏显示小标题-午夜客

 

 

改造方法如下:

打开你主题文件中的function.php文件,并添加如下代码:

 

class description_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;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = 'font-family: Consolas, Courier, monospace !important; color: rgb(51, 153, 51); ">. esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

        $prepend = '<strong>';
        $append = '</strong>';
        $description  = ! empty( $item->attr_title ) ? '<span>' . esc_attr( $item->attr_title ) . '</span>' : '';

        if($depth != 0) {
            $description = $append = $prepend = "";
            $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 .= $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 );
    }
}

 

这个类在WordPress默认的walker代码(位于wp-includes/nav-menu-template.php)基础上添加了几行代码。现在这个walker会检测是否是顶级菜单,如果是就会输出带有描述的菜单结构。【用户不用了解这行的意思】

现在我们创建了一个自定义的walker类,我们还要做的就是告诉WordPress去使用我们的walker替代默认的。这步非常简单,只要为 wp_nav_menu() 添加walker参数即可:

 

<?php wp_nav_menu( array('walker' => new description_walker())); ?>

 

把上面的代码添加在你想显示导航栏的地方即可。一般添加于 header.php 文件中。

例如午夜客的导航标签代码如下:

 

<?php
					$primary = '';
					$primary = wp_nav_menu( array( 'walker' => new description_walker(),'theme_location' => 'primary-menu', 'fallback_cb' => '', 'container_class' => 'menu', 'menu_class' => 'sf-menu', 'echo' => false, 'link_after' => '<span style="display:block;">&nbsp;</span>' ) );
					$primary = preg_replace('/(<a[^>]+>)([^\/]+)\/\/\/([^<]+)<span style="display:block;">&nbsp;<\/span>(<\/a>)/', '$1$2<span style="display:block;">$3&nbsp;</span>$4', $primary);
					if($primary <> "") :
						echo($primary);
					else : ?>

					<div class="menu">
						<ul class="sf-menu">
							<li><a href="<?php bloginfo("home"); ?>" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home">
									网站首页 <span style="display:block;">The homepage</span>
							</a></li>

 

 

好了,最后为你的菜单添加CSS样式即可了。

午夜客用Wordpress做的双语英文站就这样诞生了!

方法原文转载自:http://c7sky.com/improve-your-wordpress-navigation-menu-output.html

Reader's Comments

  1.    

    您好,我是从网上找到这里来的,也想添加中文小标题,网站是英文的,但按照您的办法,添加代码到function.php,但我发现我的主题里有两个类似页面,一个是core_functions.php,另一个是custom_functions.php,我都试过添加代码进去,但是只会造成控制台乱码。还请您多赐教,谢谢

    Reply to this comment

Pingbacks/Trackbacks

  1. Wordpress下拉菜单中英文显示小标题 » 午夜客

您的留言

*