如何给Genesis Framework主题导航菜单中添加搜索框

如何给Genesis Framework主题导航菜单中添加搜索框

　　在使用WordPress建站时，看到许多的博客都有在导航栏菜单添加搜索框，有些主题添加搜索框会很容易，例如Astra主题建站，Enfold主题建站等等，而在使用Genesis v3.0版本主题建站中，却取消了添加搜索框的功能，本文晓得博客将为你介绍怎么给Genesis Framework主题导航菜单中添加搜索框。

　　本指南使用的是 Genesis Sample 主题，但您可以通过一些小调整使其适用于任何其他 Genesis 子主题。3款Genesis Framework多用途创意子主题

为什么要在菜单中添加搜索栏？

　　站点搜索使网站访客无需离开您的网站即可轻松找到他们要查找的内容，有助于改善网站的用户体验并提高参与度。建议在导航菜单中添加搜索选项，以便用户可以轻松找到它。

　　但是，默认的 WordPress 搜索小部件仅限于小部件就绪区域。幸运的是，我们可以使用代码来创建自定义搜索表单并添加到WordPress网站导航栏菜单。

给Genesis Framework导航菜单中添加搜索框

　　登录到WordPress仪表盘，点击“外观”->“主题编辑器”，选择“Genesis Sample”主题，点击模板文件“function.php”，将以下代码粘贴进去，保存。（代码来源）

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
/**
 * Filter menu items, appending either a search form or today's date.
 *
 * @param string   $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function theme_menu_extras( $menu, $args ) {

	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;

	//* Uncomment this block to add a search form to the navigation menu添加搜索框

	ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '<li class="right search">' . $search . '</li>';
	

	return $menu;

}

　　同理，在上图所示的界面，选择样式表“style.css”，点击进去，将以下css文件添加，保存。

/* Optimize Search Bar in Primary Menu */

[type=search] {
    width: auto;
}

input[type="submit"] {
    font-size: 19px;
}

.right.search, .search-bar {
    float: right;
}

.search-form input[type="submit"] {
    margin-top: 0;
}

.genesis-nav-menu .menu-item {
    padding: 7px;
}

/* Adjustment for Mobile Devices (Add this code snippet to 
the appropriate media queries on your stylesheet) */

@media only screen and (max-width: 1023px) {
.genesis-nav-menu .menu-item {
    padding: 0;
}

.right.search, .search-bar {
    float: left;
}
}

搜索框效果

　　按照上述步骤完成保存后，即可在网站的前端页面看到你添加的搜索框，如果看不到添加的效果，那么你需要清理浏览器缓存，或者安装了WP Rocket等缓存插件，要清理网站缓存。详情可参考，什么是网站缓存?WordPress网站怎么使用缓存？

总结

　　以上是晓得博客为你提供的如何给Genesis Framework主题导航菜单中添加搜索框的全部内容，需要注意的是将搜索栏添加到 Genesis 的导航菜单不再是主题设置中可用的选项，必须插入代码来实现，切记，一定要使用子主题来操作。