WordPress

WordPress函数wp_nav_menu_items向菜单列表中添加搜索内容

萨龙龙萨龙龙 WordPress 8 年前
9.88K 2
LensNews

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

最近在更新Taji主题，设计之初没有把搜索添加进去，一直是使用ubermenu超级菜单来实现搜索功能，现在更新后准备出售，所以在默认的导航菜单中再把搜索功能添加进去，通过以下代码可以在导航菜单列表末尾添加一个搜索图标，鼠标经过或点击再显示搜索表单。

添加以下代码到主题的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中可添加任意的代码，所以通过文章中第一段代码可以向菜单列表中添加任意可行的功能。
演示地址原文地址

赞()
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

2 条评论，访客：0 条，博主：0 条
  1. 黑大帅
    黑大帅发布于： 
    回复

    为什么我添加代码到functions.php没有显示，还是说需要更改css？？

    • 萨龙龙
      萨龙龙发布于： 
      回复

      我设置的菜单标签是『header-menu』，需要修改和你主题的一致，样式需要自己写下。

发表回复