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

Опубликовано: ADv Дата 21.11.2013 в рубрике Своя тема 2 коментариев

Вы наверняка видели на многих сайтах иконку поиска с выезжающей по клику поисковой форме? Если ни разу не представилось возможным, то можете ознакомиться например по этой ссылке 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:

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

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

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

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

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

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

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

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

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

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

1.site-header .search-form {
2    position: absolute;
3    right: 200px;
4    top: 200px;
5}
6 
7.site-header .search-field {
8    background-color: transparent;
9    background-image: url(images/search-icon.png);
10    background-position: 5px center;
11    background-repeat: no-repeat;
12    background-size: 24px 24px;
13    border: none;
14    cursor: pointer;
15    height: 37px;
16    margin: 3px 0;
17    padding: 0 0 0 34px;
18    position: relative;
19    -webkit-transition: width 400ms ease, background 400ms ease;
20    transition:         width 400ms ease, background 400ms ease;
21    width: 0;
22}
23 
24.site-header .search-field:focus {
25    background-color: #fff;
26    border: 2px solid #c3c0ab;
27    cursor: text;
28    outline: 0;
29    width: 230px;
30}
31.search-form
32.search-submit { 
33display:none;
34}

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

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

Rating: 4.0/5 (4 votes cast)