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

WordPress 添加菜单项目描述

萨龙龙萨龙龙WordPress7年前001.52W
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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1422.43M457.21W4.42W
加载中…
分享:
使用 wp_add_inline_script 函数向 WordPress 站点输出脚本
使用 wp_add_inline_script 函数向 WordPress 站点输出脚本上一篇
让 WordPress 菜单图像描述支持 HTML 标签下一篇
让 WordPress 菜单图像描述支持 HTML 标签
相关文章
总数:115

WordPress添加 span 标签到分类目录和文章归档文章数量上

WordPress 默认提供了分类目录,文章归档等小工具,在前台开发中,由于分类目录和文章归档显示的文章数量没有添加标签,导致写样式比较麻烦,如…
萨龙龙萨龙龙WordPress6年前001.51W0

WordPress+Nuxt.js+Vue.js开发的前端node项目被停止的处理方案

Slhao Pro主题前端上线后每天能收到宝塔的提示,说项目已经停止,找了很久没有发现问题。在查看node项目网站日志中的响应日志和错误日志时,…
萨龙龙萨龙龙Nuxt.js, Vue.js, WordPress2年前111.20W0

WordPress禁用古腾堡(Gutenberg)使用经典的编辑器

很多人在使用 WordPress 最新的 Gutenberg 编辑器时都觉得并不适应,很难上手,毕竟新的事物要是需要时间才能熟悉。如果不想用还是…
萨龙龙萨龙龙WordPress7年前001.05W0

WordPress 一键数据库初始化重置插件:WordPress Reset

在开发 WordPress 主题中,需要 N 多次测试,这样就需要多次重装测试网站,这样相当的麻烦。今天了解到一款数据库初始化插件:WordPr…
萨龙龙萨龙龙WordPress7年前002.01W0

WordPress 文章查询类 WP_Query 如何获取序列化数组中的文章

还是在开发导航类主题 Slhao 的时候遇到的问题,主题使用 Codestar Framework 专业版选项框架,文章的 Metabox 选项…
萨龙龙萨龙龙WordPress7年前001.31W0

如何把WordPress数据迁移至WordPress MU

前面我们介绍了如果安装WordPress MU,安装完成后我们就需要把每个独立站点的数据转移到MU中,在MU中最原始的站点数据是不需要改动,只需…
萨龙龙萨龙龙WordPress11年前001.50W0

WordPress获取优酷视频缩略图

很多网站的视频都是来自在线视频网站,这样即节省网站空间也带来更高的访问速度,优酷视频是使用较多的。在添加视频文章时我们都想直接获取视频中的缩略图…
萨龙龙萨龙龙WordPress10年前001.34W0

WordPress附件函数wp_get_attachment_metadata简码获取照片EXIF信息

自动获取照片的EXIF信息,很多大型的摄影论坛都有这个功能,对于摄影爱好者来说是一个很实用的功能。萨龙龙开发的Deephoto主题和Neatim…
萨龙龙萨龙龙WordPress10年前001.44W0

WordPress 使用 wp_set_password 重置用户密码

当 WordPress 管理员忘记密码或需要重置用户密码时,可以使用 wp_set_password 函数来实现。该函数将为指定用户设置新密码,…
萨龙龙萨龙龙WordPress3年前112.79W0

AMH面板安装配置redis加速WordPress站点

Redis是一个开源、支持网络、基于内存的key-value存储系统,类似memcached,性能极高,支持超过100K+ 每秒的读写频率,一些…
萨龙龙萨龙龙WordPress, 软件系统10年前002.70W0

龙霄主题加盟推广:前端追踪归因、多语言支持,从流量到收益的全链路闭环

前言在数字化商业生态中,联盟营销(Affiliate Marketing)已成为品牌方拓展销售渠道、降低获客成本的核心手段。一套完整的加…
萨龙龙萨龙龙Nuxt.js, Vue.js, WordPress2个月前008150

Nuxt 3 项目中集成 AI API 实现智能内容生成与多语言翻译

随着大语言模型(LLM)技术的飞速发展,越来越多的 Web 应用开始集成 AI 能力——从智能客服、内容摘要到自动翻译,AI 正在重塑前端开发的…
萨龙龙萨龙龙WordPress1个月前001.74K0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容