在 Wordpress 中如何在标题部分创建搜索表单？答案

【问题标题】：In Wordpress How to create search form in header section?在 Wordpress 中如何在标题部分创建搜索表单？
【发布时间】：2020-06-18 08:47:36
【问题描述】：

我为我的电子商务网站购买了一个 wp 主题。在主题的标题部分有一个搜索图标。当我单击时，它会打开，然后我再次单击它会关闭。我需要隐藏搜索图标并且搜索表单始终保持打开状态。怎么做？我在主题文件夹中找到了一个 custom.js 文件，并在下面找到了搜索代码。

// Show / Hide Search
    $( '.menu-search' ).toggle( function(){
        $('body').addClass('show-site-search');
        $( '.site-header .search-block' ).animate( { opacity: '1' }, 200 );
        $( '.site-header .search-field' ).focus();
    },function(){
        $( '.site-header .search-block' ).animate( { opacity: '0' }, 200, function() {
            $('body').removeClass('show-site-search');
        });
    });

});

$(window).resize(function () {

    $( '.home-slider-block-inner').height( $( '.home-slider-block-bg').outerHeight() );

}).resize();

$(window).load(function() {

    themename_home_slider();

});

//CSS Part

.search-btn {
    padding: 5px 0 5px 5px;
    cursor: pointer;
}

.search-block {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-top: 0;
    bottom: 0;
    right: 20px;
    padding: 12px 0 12px 12px;
    z-index: 6;
    -webkit-transition: bottom 0.3s ease 0s;
    -moz-transition: bottom 0.3s ease 0s;
    -ms-transition: bottom 0.3s ease 0s;
    -o-transition: bottom 0.3s ease 0s;
    transition: bottom 0.3s ease 0s;
}
.search-block .search-field,
.search-block .product-search input[type="text"].product-search-field,
.aws-container .aws-search-field {
    font-size: 16px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0;
    background-color: #FFF;
    width: 280px;
    font-weight: 200;
    outline: none;
    color: inherit;
    box-sizing: border-box;
}
.search-block .search-submit {
    display: none;
}

<?php
/**
 * The template for displaying search forms in Themename
 *
 */
?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label>
		<input type="search" class="search-field" placeholder="<?php echo ( get_theme_mod( 'themename-website-search-txt' ) ) ? esc_attr( get_theme_mod( 'themename-website-search-txt' ), 'themename' ) : esc_attr_x( 'Search &amp; hit enter&hellip;', 'placeholder', 'themename' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" />
	</label>
	<input type="submit" class="search-submit" value="<?php echo esc_attr_x( '&nbsp;', 'submit button', 'themename' ); ?>" />
</form>

【问题讨论】：

请包含包含该元素的 HTML（类 .search-block）。还请包括应用于元素的 CSS。
我已经编辑了帖子。

标签： javascript css wordpress search themes

【解决方案1】：

将 show-site-search 类的 CSS 设置为 display: block

.show-site-search {
    display: block;
}

这只会让它一直显示。

然后我建议删除关于添加/删除类的 JS，以阻止它在单击时执行它，就像用户单击它一样，它会消失。

如需更详细的回复，请添加该部分的 HTML 以及屏幕截图或链接，以便我们可以准确地看到它目前的样子。

【讨论】：

我已经编辑了帖子并插入了所需的代码。