wp_nav_menu_items 修改导航菜单HTML 内容

wp_nav_menu_items 修改导航菜单HTML 内容

WordPress 的导航菜单是网站中常用的一种导航方式。默认情况下,WordPress 生成的导航菜单 HTML 内容比较简单,并不能满足所有需求。

使用 wp_nav_menu_items 函数修改导航菜单 HTML 内容

为了满足个性化需求,WordPress 提供了一个名为 wp_nav_menu_items 的函数,通过这个函数,我们可以修改导航菜单的 HTML 内容。

  1. 首先,我们需要在 functions.php 文件中添加如下代码:
  2. 
    function custom_menu_item($items, $args) {
      //在这里修改导航菜单HTML内容
      return $items;
    }
    add_filter('wp_nav_menu_items', 'custom_menu_item', 10, 2);
    
    1. 在函数中,我们可以使用 $items 参数来获取默认的导航菜单内容。我们可以使用 PHP 代码来修改这些内容,例如新增一个搜索框:
    2. 
      function custom_menu_item($items, $args) {
        $items .= '<li class="menu-item menu-search">';
        $items .= '<form class="menu-search-form" role="search" method="get" action="' . home_url( '/' ) . '">';
        $items .= '<input type="search" class="menu-search-field" placeholder="搜索" value="' . get_search_query() . '" name="s" />';
        $items .= '<button type="submit" class="menu-search-button"></button>';
        $items .= '</form>';
        $items .= '</li>';
        return $items;
      }
      add_filter('wp_nav_menu_items', 'custom_menu_item', 10, 2);
      
      1. 最后,我们需要在主题的导航菜单模板文件中调用 wp_nav_menu 函数并指定菜单项 theme_location 参数。
      2. 
        <nav class="menu">
          <?php wp_nav_menu( array(
            'theme_location' => 'primary',
          ) ); ?>
        </nav>
        

        通过这种方式,我们可以自定义 WordPress 导航菜单的 HTML 内容,实现个性化需求。

        晓白博客网版权所有,原文地址https://www.xbnb.cn/5056
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 如有资源失效请在下面及时反馈,谢谢!! 抢沙发

请登录后发表评论

    请登录后查看评论内容