php图片详情描述,wordpress3.0菜单的图像描述

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

1df821ef75cb4ab29952a08fd73418d5.png

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

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

7e0142cde4ae17a58e08fac85a6b613b.png

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

4fa5643b6b3233b33151321920086924.png

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

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

首先在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 . ‘

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 .= ‘’;

$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;//这里是导航的文字输出

$item_output .= ‘’ . $item->description . ‘’;//这里输出图像、描述的信息,着重修改这个地方,才能方便的输出

$item_output .= ‘’;

$item_output .= $args->after;

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

}

}

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

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

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

$item_output .= ‘%E2%80%99description .'”‘.’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 wp_nav_menu( array( ‘theme_location’ => ‘header-menu’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>

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

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

e369c8dbf3b391f82e348de6339f05bf.png

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值