wordpress3.0菜单的图像描述

2013/07/17 9074 0

WordPress技术博客 wp应用技术 新闻资讯

下图的菜单是不是很漂亮呢，我们通常使用wordpress的菜单功能都是直接输出文字，其实wordpress的菜单功能还能够输出图片、描述等等很多的信息，也就是下图菜单的效果，使用图片作为导航，更加漂亮，更加美观。

wordpress默认的图像描述是关闭的，如果你需要使用这个功能，那么就需要一些代码来将这个功能打开：

我们了解下什么是wordpress的图像描述功能，打开你的wordpress后台，找到菜单右上角的显示选项勾选图像描述：

这样在菜单的设置中就会多出一个选项，可以帮助我们输出新的信息，如图片链接、文字等：

现在，我在这个选项中输入了一个图片的链接，他会直接替换掉之前的文字，而只显示图片。

现在我们要修改一些代码输出这一段信息：

首先在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 = ”;

$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 .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;//这里是导航的文字输出
$item_output .= ‘<br /><span>’ . $item->description . ‘</span>’;//这里输出图像、描述的信息，着重修改这个地方，才能方便的输出
$item_output .= ‘</a>’;
$item_output .= $args->after;

$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}

————————————————————————————————————————————————-

上面的代码我写了两行注释，主要是这两个地方能够输出你想要的东西，如果是图片，可以将导航文字输出删掉，把下面的输出图像和描述信息的description 改为图像的效果即为下面的代码：

————————————————————————————————————————————————-

$item_output .= ‘<img src=’ .'”‘ . $item->description .'”‘.’alt=”‘. apply_filters( ‘the_title’, $item->title, $item->ID ) . ‘”/>’;

————————————————————————————————————————————————-

$item->description 就是你在后台菜单中输出的信息;

apply_filters( ‘the_title’, $item->title, $item->ID 是导航的文字，我们把它放在img的alt中作为替代文字,

现在我之前输入的图片链接起作用了，但是前台却没有变化，那么我们需要用一段代码来替换掉默认的导航输出代码，从而将我们所输出的信息和修改的内容加上去，找到wp_nav_menu 也就是默认输出导航的代码将这段标签替换为下：

————————————————————————————————————————————————-

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>

————————————————————————————————————————————————-

这样，我们就能够得到我们想要的效果了，之前的效果是A标签中输出的文字，也就是我们在菜单设置的文字，而现在文字不见了，替代它的是一张图片，怎么样，很棒把，你还可以不替换图片，而是使用中英文双语导航，或者只添加一个小图标在文字前面，总之有各种方法来制作更多有创意漂亮的导航了，添加完成之后，用css，js创造出更多更炫的效果！你还在局限于文字导航吗？赶快去折腾把~