您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

WordPress 添加菜单项目描述

萨龙龙萨龙龙WordPress7年前001.47W
WordPress 能够在自定义菜单中存储每个菜单项的描述,默认情况下,这些描述不会显示在前端菜单中,需要为相应的菜单增加显示描述的功能。

一、显示菜单图像描述选项

默认情况下,WordPress 隐藏描述输入字段,在后台外观——菜单页面上,单击屏幕右上角『显示选项』选项卡,在『显示高级菜单属性』中确保勾选『图像描述』复选框。 WordPress 添加菜单项目描述 现在,对于菜单编辑器中的每个菜单项,都有一个图像描述的输入框。

二、显示描述

网上有很多教程解释如何使用自定义walker类来遍历菜单并自定义输出。但是,我真的希望不必重新创建整个类,只需要为每个菜单项添加描述。
function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( $args->link_after . '', '' . $item->description . '' . $args->link_after . '', $item_output );
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );
我们将函数添加到walker_nav_menu_start_el过滤器中,此过滤器将四个参数传递给我们的函数。
  • $item_output :string——菜单项的开始输出HTML标签
  • $item:object——菜单项数据对象
  • $depth:int——菜单项的深度,用于填充
  • $args:array——wp_nav_menu() 数组的参数
首先,我们检查当前菜单项是否存在描述,如果有,我们使用str_replace()函数将描述插入到链接中,将描述放在主链接文本之后。 更改描述放置 现在假设我们要将描述放在主链接文本之前而不是之后。为此,我们需要修改对str_replace()函数的调用。之前,这是我们要修改的字符串:
$args->link_after . ''
我们使用str_replace()来替换这个文本字符串:
'' . $item->description . '' . $args->link_after . ''
要将描述放在主链接文本之前,我们需要替换字符串的这一部分:
'">' . $args->link_before . $item->title
我们要用以下内容替换它的内容:
$args->link_before . '' . $item->description . '' . $item->title
所以我们的新函数代码如下(只有$item_output行已更改):
function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '' . $item->description . '' . $item->title, $item_output );
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );
原文地址:https://themefoundation.com/menu-item-descriptions/
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/wordpress-menu-item-descriptions.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1412.36M457.17W4.42W
加载中…
分享:
使用 wp_add_inline_script 函数向 WordPress 站点输出脚本
使用 wp_add_inline_script 函数向 WordPress 站点输出脚本上一篇
让 WordPress 菜单图像描述支持 HTML 标签下一篇
让 WordPress 菜单图像描述支持 HTML 标签
相关文章
总数:114

Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化

萨龙网络Purity主题是集成了Woocommerce+Buddypress+Bbpress商城社区论坛,因为www.gravatar.com头…
萨龙龙萨龙龙Bbpress, Buddypress, WooCommerce, WordPress10年前002.05W0

移除 WooCommerce 商城插件中我的帐户相关页面

WooCommerce 插件默认为我的帐户页面提供了:仪表盘、订单、下载、地址、帐户详情几个页面,以及一个退出登录的按钮,如果出售的是实物或者没…
萨龙龙萨龙龙WooCommerce8年前001.51W0

WordPress 功能函数—— addslashes_gpc(添加斜杠以转义字符串)

描述 添加斜杠以转义字符串。 如果设置了magic_quotes_gpc,将首先删除斜杠。 用法 …
萨龙龙萨龙龙WordPress Functions7年前009.04K0

WordPress 主题获得评论深度的2种方法

一、通过使用全局变量获取评论深度 我相信您应该知道wp_list_comments()函数,它可以将评论打印在网站页面上。 为什么这个功…
萨龙龙萨龙龙WordPress4年前002.37W0

WordPress 主题选项框架 Codestar Framework Pro 2.0专业版使用

萨龙网络在2018年9月份就写了一篇《WordPress 简约实用的主题选项框架 Codestar Framework》文章来介绍 Codest…
萨龙龙萨龙龙WordPress7年前003.03W0

CSS3 background-attachment:fixed实现滚动视差效果

一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直…
萨龙龙萨龙龙WordPress10年前001.56W0

WordPress 从不需要的页面禁用 WooCommerce 样式和脚本

WooCommerce 在每个页面上加载三个核心CSS样式表,并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…
萨龙龙萨龙龙WooCommerce7年前001.84W0

WordPress MU多站点从子域名转子目录

使用WordPress MU多站点来管理所有的站点确实很方便,可以省去很多重复的工作,节省资源。萨龙网络使用MU多站点已经很久,已经爱不释手,也…
萨龙龙萨龙龙WordPress10年前002.52W0

修改Buddypress中管理员的显示名与用户名区别开提高账户安全

Buddypress社区中有很多地方会直接显示用户登录名,比如用户个人主题中的名称和链接中,所有来访的用户都知道了管理员的用户名,对于小人知道了…
萨龙龙萨龙龙Buddypress, WordPress11年前001.71W0

WordPress网站维护状态插件maintenance mode

Wordpress的强大就是什么样的扩展都有,最近浏览用户网站时发现用的“不是我的主题”,查看源代码才发现是使用了网站维护插件maintenan…
萨龙龙萨龙龙WordPress10年前002.69W0

WooCommerce 商城插件的条件式标签

可以在模板文件中使用WooCommerce和WordPress的条件式标签,以根据匹配页面的条件来显示的特定内容。例如,您可能想要在商店页面上方…
萨龙龙萨龙龙WooCommerce8年前001.36W0

解决网站嵌入优酷视频堆叠顺序的问题

很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响,在视频页面有滚动、…
萨龙龙萨龙龙WordPress10年前001.36W0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容