Совет недели: как создать открывающееся окно поиска на сайте

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Наверняка вы уже где-нибудь видели что-то подобное: при нажатии на значок поиска (часто в виде лупы) — открывается или выезжает поле ввода слова для поиска на сайте.

toggle-search1

Если не видели — посмотрите на этом сайте, скриншот которого я выложил выше, справа вверху значок лупы. Нажмите на него и увидите, что произойдет. На английском языке этот эффект называют как переключатель — toggle search.

Сегодня я расскажу и покажу на примерах кода HTML+CSS — как быстро и просто создать такое окно на сайте, работающем на WordPress.

Урок (или инструкция, называйте как хотите) рассчитана на достаточный уровень знаний HTML+CSS, поэтому, прежде, чем вы решитесь повторить мои советы — оцените свой уровень знаний.

С чего начнем? Мой совет всем, кто хочет создать переключатель окна поиска: не экспериментируйте прямо на сайте. Делайте все на локалке или на тестовом поддомене. Вдруг выйдет не правильно и ваш сайт перекосит не на шутку)), а исходные файлы вы не сохранили или забыли, что меняли. В общем, зачем проблемы?

И еще: данный урок рассчитан на опытных пользователей, с практическими знаниями файлов WordPress, тегов HTML и языка разметки CSS.

Начинающим и новичкам совет был выше — пробуйте на локальном сервере и не пытайтесь менять файлы вашей активной темы на сайте!

WordPress по умолчанию добавляет классы CSS для HTML, создаваемые различными тегами внутри файлов PHP темы WordPress.

Для вызова поиска используется функция PHP get_search_form();

Она предлагает две различные формы поиска: одну для разметки HTML4, другую — для HTML5.

Если в вашей теме WordPress есть функция add_theme_support(‘html5’, array(‘search-form’)) в файле functions.php, значит ваша тема WordPress поддерживает HTML5 разметку окна поиска.

Советую прочитать еще:  Совет недели: Какой лучший плагин для создания Фотогалереи?

В противном случае, будет выводиться разметка окна поиска для HTML4.

Чтобы узнать, вам достаточно открыть файл searchform.php вашей темы WordPress и посмотреть функцию вызова формы поиска.

Вот эта форма будет отображаться в случае, если у вас нет поддержки для HTML5:


<form id="searchform" action="<?php echo home_url( '/' ); ?><p>" method="get">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" value="" />
<input id="searchsubmit" type="submit" value="Search" /></div>
</form>

А эта — если у вас есть поддержка HTML5:


<form class="search-form" action="<?php echo home_url( '/' ); ?>" method="get"><label>
<span class="screen-reader-text">Search for:</span>
<input class="search-field" title="Search for:" name="s" type="search" value="" placeholder="Search …" />
</label>
<input class="search-submit" type="submit" value="Search" /></form>

Для этого урока нам необходима вторая форма, с поддержкой HTML5. Поэтому, если у вас такой нет, вам надо для начала добавить небольшой код в файл functions.php вашей активной темы:

add_theme_support('html5', array('search-form'))

После того. как вы добавили эту функцию, вам надо решить, в каком месте вы хотите вставить переключатель окна поиска. Наверное, самое удобное место — это в заголовке (файл header.php)

Добавляем эффект переключателя к форме поиска

Первое, что нам нужно, это картинка-значок поиска. В дефолтной теме 2013 есть такая картинка, под именем — search-icon.png. Я буду использовать эту картинку в настоящем уроке. Однако вы можете создать свой собственный значок поиска, или скачать в Интернет. Главное, чтобы ваша картинка тоже была под этим именем.

После того, как вы определились с картинкой, ее надо положить в папку с изображениями вашей темы. Обычно она называется /images.

Последний шаг — вам надо добавить немного кода в файл стилей вашей активной темы:

.site-header .search-form {
position: absolute;
right: 200px;
top: 200px;
}

.site-header .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}

.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}

Обратите внимание на разметку CSS, в котором применены элементы CSS 3 для подключения эффекта переключателя окна поиска. Также обратите внимание, что вам обязательно придется корректировать позиционирование вашего значка в соответствии с местом, где вы добавили вывод этой формы.

Советую прочитать еще:  Совет недели: 9 вещей, которые ускорят и облегчат ваш сайт на Wordpress

Если вам неудобно копировать код из статьи, я подготовил вам все коды в двух файлах: PHP+CSS.

Скачать файлы

Я надеюсь, что этот урок поможет многим из вас, кто дочитал до конца и попытался повторить, создать эффектную форму поиска на своем сайте с переключателем в соответствии с новыми правилами HTML5.

Я вижу все больше сайтов с этим эффектом.

Хотелось бы услышать ваше мнение.

Ну, и если понравилась статья, не забудьте оставить свой «лайк».

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *