wp_nav_menu_items 修改导航菜单项目的 HTML 内容

wordpress 的菜单都是通过后台菜单来添加设置,很多时候需要添加一些功能到菜单,比如搜索,或者购物车,这时我们就可以使用 wp_nav_menu_items 函数向菜单列表中添加一些内容来实现。

函数参数

  1. $items:(字符串) 菜单项目的 HTML 列表内容。
  2. 
    
  3. $args:(stdClass) 包含 wp_nav_menu() 的对象。

使用示例

假如,我们需要添加一个「登录/我的账户链接」到导航菜单,因为我们要根据用户登录状态判断显示的菜单链接,直接在后台菜单管理页面中添加肯定是无法实现的。通过本文介绍的 Filter,我们可以通过下面的代码实现此功能。

  1. add_filter('wp_nav_menu_items', function ($items, $args)
  2. {
  3.     if (is_user_logged_in()) {
  4.         $items .= '<li><a href="' . home_url('account') . '">My Account</a></li>';
  5.     } else {
  6.         $items .= '<li><a href="' . home_url('login') . '">Login</a></li>';
  7.     }
  8. 
    
  9.     return $items;
  10. }, 10, 2);

除了添加菜单项目,我们还可以根据需要,修改菜单项目的 HTML,来输出我们需要的菜单内容。

实用案例

比如主题设计之初没有把搜索添加进去,如果后期需要在默认的导航菜单中再把搜索功能添加进去,通过以下代码可以在导航菜单列表末尾添加一个搜索图标,鼠标经过或点击再显示搜索表单。添加以下代码到主题的 functions.php 中:

  1.     function add_search_to_wp_menu ( $items, $args ) {
  2.         if( 'header-menu' === $args -> theme_location ) {
  3.             $items .= '<li class="menu-item menu-item-search">';
  4.             $items .= '<a class="search_trigger" href="#"><i class="icon-search-1"></i></a>
  5.             <section class="salong_search searchHidden"><form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><input class="text_input" type="text" placeholder="'.__("输入关键字…",'salong').'" name="s" id="s" /><input type="submit" class="search_btn" id="searchsubmit" value="'.__("搜索",'salong').'" /></form></section>';
  6.             $items .= '</li>';
  7.         }
  8.         return $items;
  9.     }
  10.     add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

header-menu 为导航菜单的名称,比如注册菜单的代码为:

  1. register_nav_menu( 'header-menu', __( '导航菜单', 'salong' ) );

所以不要添加“导航菜单”,$items 中可添加任意的代码,所以通过文章中第一段代码可以向菜单列表中添加任意可行的功能。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/80425

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买