自定义导航菜单walker类显示菜单描述

编程之家收集整理的这篇文章主要介绍了自定义导航菜单walker类显示菜单描述编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有时在我们制作wordpress主题的时候,可能对导航菜单会有一些特殊要求,比如下图中的下拉菜单显示菜单的描述:

要实现这个效果我们就需要自定义导航菜单的walker类来实现,其实这个在网上已经有相关的代码,但是直接使用你会发现会有错误提示,针对这个问题,我们做了相关的调整,确保了代码的正常使用以及不会报错。

首先,您需要将下面这个导航的自定义Walker类放到您的主题functions.PHP中,

/**

* 添加输出菜单描述的 Walker 类

* https://www.wp-diary.com/2040.html

*/

class description_walker extends Walker_Nav_Menu

{

function start_el(&$output,$item,$depth = 0,$args = NULL,$id = 0)

{

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="'%20%20%20.%20esc_attr(%20$item->url%20%20%20%20%20%20%20%20)%20.'"' : '';

$description = ! empty( $item->description ) ? '</br><p>'.esc_attr( $item->description ).'</p>' : '';

$item_output = $args->before;

$item_output .= '<a class=custom_hover_color'. $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,$depth,$args );

}

}然后,需要在外观-菜单页面-右上角显示选项中,勾选内容描述

然后就是在您需要显示菜单描述的菜单内容描述中填写上对应的内容即可。

最后就是在你调用菜单的时候增加一个walker指定的一个参数

<?PHP wp_nav_menu(array("theme_location"=>"main-nav","container_class"=>"mainmenuBox","menu_class"=>"mainnav",'depth'=> 2,'walker' => new description_walker()));?>

总结

以上是编程之家为你收集整理的自定义导航菜单walker类显示菜单描述全部内容。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给好友。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

wordpress相关文章

开发主题时使用了wordpress的缓存函数,如下所示代码,但是在打印缓存时,怎么显示的都是false,经过查找才了解到。默认情况下,对象缓存是非持久的。这意味着存储在缓存中的数据仅在请求期间驻留在内存中。除非您安装持久缓存插件,否则缓存数据不会在页面加载时持久存储。就这个意思,想持久就需要找个插件装上。function get_term_post($term_id){if($term_id &l
在 WordPress 主题和插件开发中,条件判断标签(Conditional Tags)是非常重要的,通过条件判断标签,我们可以判断各种情况,从而使用对应的代码等。例如在顶部导航条中有一个“首页”选项,在首页的时候需要设置成高亮,我们可以在头部导航模板文件(header.php)中使用条件判断标签 is_home() 来判断当前页面是不是首页,然后再输出高亮的 class。这类的条件判断标签一般
新版的 wordpress6.1 已经将小工具也改成古腾堡的吧,若是以后站长或者开发者还想使用wordpress那么必须向这方面靠拢啦,尽管你不情愿,不过一段时间内我们还是可以先禁用的,下面是禁用的方法。直接用代码禁用将下方代码放到function.php中,即可屏蔽掉小工具的区块模式add_action('after_setup_theme', function(){remove_theme_s
做 WordPress 开发时,需要通过后台设置的某个自定义分类法 ID 获取该分类的链接,传递 ID 的变量给 get_term_link()函数时,却无法获取该分类的链接。通过查找资料获悉是由于 get_term_link()函数和其它常用的 wordpress 函数不同,该函数不能自行转换变量类型,解决方法是先把字符类变量转换成整数变量才可以正常获取链接。$id = intval($getI
WordPress临时APIset_transient(), get_transient(), delete_transient()这个函数类似于用于存储检索选项数据库表单的get_options()以及update_options()函数。 他们的主要区别在于,你可以给这个临时API函数传递一个时间参数,作为数据库输入的过期日。当参数显示的时间到达之后,输入会被移除。如果你需要缓存数据或查询某个
WordPress能让你自定义URL结构。为您的链接提高美感、可用性和前向兼容性。 优化SEO ,提高收录,这是非常必要的一个环节
WordPress阅读设置 ,这是一个基本的设置详细描述 标签1 :设置网站首页是显显最新文章列表,还是一个静态页面
写文章时,所上传的媒体文件都会存储到媒体库。 而在媒体库里上传的媒体文件也是可以在写文章时,随时插到文章中的。