В Wordpress Как создать форму поиска в разделе заголовка? - PullRequest
0 голосов
/ 05 марта 2020

Я купил одну тему для моего сайта электронной коммерции. В разделе заголовка темы есть значок поиска. Когда я нажимаю, он открывается и снова я щелкаю, он закрывается. Мне нужно скрыть значок поиска, и форма поиска всегда остается открытой. Как это сделать? Я нашел один нестандартный. 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>

1 Ответ

0 голосов
/ 05 марта 2020

Установите CSS для класса show-site-search на display: block

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

Это просто заставит его показывать все время.

Я бы тогда рекомендовал удалить JS о добавлении / удалении класса, чтобы запретить ему делать это при нажатии, как если бы пользователь щелкнул по нему, он исчезнет.

Для более подробного ответа добавьте HTML для раздела, а также снимок экрана или ссылка, чтобы мы могли точно видеть, как это выглядит на данный момент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...