Выезжающая форма поиска в WordPress

Вы наверняка видели на многих сайтах иконку поиска с выезжающей по клику поисковой форме? Если ни разу не представилось возможным, то можете ознакомиться например по этой ссылке http://www.list25.com. Идея в том, чтобы отображать простую иконку поиска, а когда пользователь кликает на нее, то форма поиска выезжает для ввода поискового запроса, это так называемый toggle эффект. Это симпатичный эффект, который также экономит пространство и позволяет пользователям сфокусироваться непосредственно на контенте сайта. Естественно, эффект будет очень полезен на мобильных responsive темах. В этой статье мы покажем вам как добавить выезжающую форму поиска в темы WordPress.

Примечение: Это статья для пользователей среднего уровня навыков работы с тегами шаблонов WordPress, HTML, и CSS. Новичкам рекомендуется протестировать действия, описываемые в данной статье на локальном сервере.

Выводим форму поиска WordPress

WordPress добавляет дефолтные CSS классы к HTML, сгенерированному различными тегами шаблонов внутри темы. Темы WordPress используют тег шаблона < ? php get_search_form(); ? > для вывода формы поиска. Эта функция может выводить две различных поисковых формы: одна для тем на HTML4, а вторая — для тем с поддержкой HTML5. Если в вашей теме, в файле functions.php есть строка add_theme_support(‘html5’, array(‘search-form’)), тогда этот тег шаблона выведет форму поиска на HTML5. В любом другом случае, отобразится форма на HTML4.

Другой способ выяснить, какую форму генерирует ваша тема, это посмотреть в исходных код поисковой формы.

Следующий код отобразится, если тег шаблона get_search_form() выводит ее в формате HTML4:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Искать:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Поиск" />
    </div>
</form>

А этот код — будет результатом для темы с поддержкой HTML5.

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Искать…" value="" name="s" title="Искать:" />
	</label>
	<input type="submit" class="search-submit" value="Поиск" />
</form>

В этом уроке мы будем использовать форму поиска на HTML5. Если ваша тема генерирует форму на HTML4, тогда просто добавьте следующую строку кода в ваш файл functions.php темы:

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

После этого убедитесь, что теперь код отдается как на примере 2 выше. Следующим шагом будет размещение поисковой формы в том месте, где ваша тема больше всего ее жаждет.

Добавляем выезжающий эффект к форме поиска WordPress

Прежде всего нам нужна картинка — иконка поиска. Стандартная тема WordPress Twenty Thirteen содержит в себе приятную небольшую иконку, и её то мы и возьмем для нашей статьи. Однако не стесняйте себя в создании своей собственной, к примеру, в Photoshop или же скачайте её из сети. Только убедитесь, что имя файла у нее search-icon.png.

Теперь вам нужно загрузить эту иконку в папку с изображениями в вашей теме. Подключитесь к своему сайту через FTP клиент типа Filezilla или Total Commander и откройте директорию с вашей темой.

Теперь — последний и самый важный шаг. Необходимо добавить следующие стили CSS в файл таблицы стилей вашей темы:

.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;
}

Об этом коде важно знать то, что в нем содержатся CSS3 эффекты перехода, которые и позволяют нам создать выезжающий эффект для формы. Также стоит заметить, что вам все равно придется откорректировать положение иконки поиска и формы в соответствии с разметкой вашей темы.

Надеемся, что эта статья помогла вам добавить выезжающую форму поиска в вашу тему WordPress. Как вам такой элемент на сайте? Все больше и больше сайтов используют такой эффект. Пишите в комментариях.