如何将搜索栏添加到wordpress的移动菜单中?
问题描述:
我已经添加了此代码,以我的functions.php文件:如何将搜索栏添加到wordpress的移动菜单中?
function wpgood_nav_search($items, $args) {
$items .= '<li>' . get_search_form(false) . '</li>';
return $items;
}
add_filter('wp_nav_menu_items','wpgood_nav_search', 10, 2);
我发现在这里: adding search bar to the nav menu in wordpress
问题:这个代码将搜索栏为桌面和移动菜单,但我需要将搜索栏仅添加到我的移动菜单,因为我的网站的桌面版本已在左侧栏中有一个搜索窗口小部件。
我该怎么做?请帮帮我。谢谢!
我的菜单Initializiation中的functions.php:
// Initialize navigation menus
register_nav_menus(
array(
'primary-menu' => esc_html__('Primary Menu', 'bento'),
'footer-menu' => esc_html__('Footer Menu', 'bento'),
)
);
非常感谢你的帮助!最后我决定用我的最初的代码和编辑搜索栏的位置和样式与CSS,因为我在编码:)
答
使用JavaScript代码添加搜索框移动菜单
我不是那么好$("ul.primary-mobile-menu').append('
// your html code to append
<li><form role="search" method="get" id="searchform" class="search-form" action="https://bookyspace.com/"><div class="search-form-wrap"> <input type="text" value="" name="s" id="s" class="search-form-input" placeholder="Знайти.."> <input type="submit" id="searchsubmit" class="button submit-button" value=""></div></form></li>
');
谢谢
答
基本上你会这么做的几个过程。像以下
- 通过使用jQuery的附加功能,你可以做。这段代码模板JS文件
$("here_put_menu_selector").append(' <li> <form role="search" method="get" id="searchform" class="search-form" action="https://yourdomain.com/"> \t <div class="search-form-wrap"> \t \t <input type="text" value="" name="s" id="s" class="search-form-input" placeholder="search any"/> \t \t <input type="submit" id="searchsubmit" class="button submit-button" value="Search"/> \t </div> </form> </li> ');
只有上可见,使用CSS显示属性&隐藏部分从台式机/平板电脑设备的移动设备粘贴。
答
将下面的代码在其位于你的主题文件夹
function add_last_nav_item($items, $args) {
if ($args->menu == 'header_menu') {
$homelink = get_search_form();
$items = $items;
$items .= '<li>'.$homelink.'</li>';
return $items;
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_last_nav_item', 10, 2);
这里get_search_form的functions.php()是函数来获取搜索框。
+0
这只是添加搜索栏到菜单,桌面和手机,我已经完成了我的代码你知道如何将这个应用于手机菜单吗? –
不工作,手机菜单变得无法点击,我看到桌面菜单标题中的混乱:(谢谢你的回复 –