wordpress3.0菜单的图像描述

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

menudescriptions

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

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

SY

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

C2TIG

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

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

首先在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创造出更多更炫的效果!你还在局限于文字导航吗? 赶快去折腾把~

ssss

(左边是默认的文字输出,右边是输出的图片,也就是我们修改过的效果)

 

友情提示,要折腾这个功能,你需要懂得简单的php知识,css知识和js知识哦~

 

 

上一篇:

下一篇:

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

本文地址:https://www.themepark.com.cn/wordpress30cddtxms.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

    个人中心我的

    联系我们x

    联系我们,从qq在线客服,电话和邮件

    售前客服-1[点击对话]

    购买之前想要了解和咨询

    售前客服-2[点击对话]

    购买之前想要了解和咨询

    售后客服[售后支持]

    购买后输入订单号加好友

    咨询热线:0731-8578 7193

    联系邮箱:
    info@themepark.com.cn

    请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

    客服
    回到顶部 顶部