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

ChatGPT账号注册、ChatGPT Plus代升级、OpenAI API key、OpenAI API 国内购买,美国本地网络100%手工注册 ,https://hmbcloud.cn/gpt/

如何给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;
}
}