WordPress教程

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

阿里云

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

函数参数

  1. $items:(字符串) 菜单项目的 HTML 列表内容。
  2. $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 中可添加任意的代码,所以通过文章中第一段代码可以向菜单列表中添加任意可行的功能。

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

已有 288 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!