如何在wordpress中将搜索栏添加到移动菜单？答案

【问题标题】：How to add the search bar to mobile menu in wordpress?如何在wordpress中将搜索栏添加到移动菜单？
【发布时间】：2017-07-04 10:07:31
【问题描述】：

我已将此代码添加到我的 functions.php 文件中：

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

问题：此代码将搜索栏添加到桌面和移动菜单，但我需要仅将搜索栏添加到我的移动菜单，因为我的网站的桌面版本已经有搜索左侧边栏中的小部件。

我该怎么做？请帮我。谢谢！

在functions.php中初始化我的菜单：

// Initialize navigation menus
register_nav_menus(
    array(
        'primary-menu' => esc_html__( 'Primary Menu', 'bento' ),
        'footer-menu' => esc_html__( 'Footer Menu', 'bento' ),
    )
);

非常感谢您的帮助！最后我决定使用我的初始代码并用css编辑搜索栏的位置和样式，因为我的编码不太好:)

【问题讨论】：

标签： php jquery css wordpress searchbar

【解决方案1】：

使用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>
');

谢谢

【讨论】：

不起作用，移动菜单无法点击，我看到桌面菜单标题混乱:(谢谢您的回复

【解决方案2】：

你基本上是通过几个过程来做到这一点的。喜欢关注

通过使用jquery append 函数你可以做到。将此代码粘贴到模板 JS 文件中

$("here_put_menu_selector").append('
<li>
<form role="search" method="get" id="searchform" class="search-form" action="https://yourdomain.com/">
	<div class="search-form-wrap"> 
		<input type="text" value="" name="s" id="s" class="search-form-input" placeholder="search any"/> 
		<input type="submit" id="searchsubmit" class="button submit-button" value="Search"/>
	</div>
</form>
</li>
');

仅在使用 CSS 显示属性的移动设备上可见并从桌面/平板设备隐藏该部分。

【讨论】：

【解决方案3】：

@Vladislav Tiaglo

将 li 项中的类添加到您已经使用的代码中，并表示它适用于桌面和移动设备：

<li> Add class to <li class="searchbox-position">

然后，在您的 css 中编写代码以隐藏桌面显示：

@media (min-width: 840px) {
li.searchbox-position {
    display: none !important;
}
}

最简单的方法

【讨论】：