В этой статье рассматривается пример создания формы поиска для блога на WordPress, с использованием HTML5 и CSS3.
Форма будет одинаково отображаться во всех браузерах, и иметь валидный HTML5 и CSS3 код.
Созданная форма будет обладать такими качествами, как:
- закругленные уголки,
- изображение внутри input,
- размер input изменяется при щелчке на нем,
- кнопка для очистки формы.
Шаг 1. Настройки functions.php
Для начала, в папке с вашей темой найдите файл functions.php. Убедитесь, что функции get_search_form там нет. Это можно сделать через поиск. Теперь добавьте следующее:
|
1 2 3 4 5 6 7 8 9 10 |
function search_form( $form ) { $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" > <label for="s">' . __('Найти:') . '</label> <input type="search" placeholder="'.__("Поиск").'" value="' . get_search_query() . '" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Поиск" /> </form>'; return $form; } add_filter( 'get_search_form', 'search_form' ); |
Мы создали HTML5-код формы поиска.
Обратите внимание на 4-5 строки: там используется новый HTML5 атрибут placeholder, который добавляет замещающий текст для строки поиска input.
Также, в 4 строке для input задан тип type=”search”. Это добавляет кнопку-крестик, при помощи которой можно быстро очистить форму поиска.
Теперь давайте создадим стиль CSS3 для формы.
Шаг 2. Добавляем стили формы
Откройте файл style.css. Если в нем уже прописаны какие-то свойства для формы поиска, то их надо удалить.
Теперь надо добавить следующий код:
|
1 2 3 4 5 |
#searchform { margin: 0; /* удаляем отступы */ vertical-align: middle; /* вертикальное выравнивание формы по середине */ float: right; /* обтекание по правому краю */ } |
Сейчас вы создали стиль для самой формы. Теперь надо добавить стили для полей.
Шаг 3. Добавляем стили полей
Сначала пропишем основные стили input:
|
9 10 11 12 13 14 15 16 |
input#s { border: 1px solid #DDD; /* цвет и ширина рамки */ color: #585858; /* цвет замещающего текста */ font-size: 1em; /* размер шрифта внутри формы */ margin: 0; /* удаляем отступы */ height: 25px; /* высота формы */ width: 200px; /* длина формы */ } |
Теперь добавим изображение лупы внутрь формы:
|
9 10 11 |
input#s { background: url("images/search.png") no-repeat scroll 5px 2px #FFFFFF; padding: 0px 10px 0px 25px; |
Padding нужен для того, чтобы вводимый текст начинался после изображения.
Сейчас сделаем уголки закругленными:
|
9 10 11 12 |
input#s { border-radius: 5px; /* закругляем уголки на 5px */ -webkit-border-radius: 5px; /* закругляем уголки для webkit */ -moz-border-radius: 5px; /* закругляем уголки для firefox */ |
В итоге, стили для поля input должны выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input#s { background: url("images/search.png") no-repeat scroll 5px 2px #FFFFFF; padding: 0px 10px 0px 25px; border: 1px solid #DDD; border-radius: 5px; -webkit-border-radius: 5px; /* закругляем уголки для webkit */ -moz-border-radius: 5px; /* закругляем уголки для firefox */ color: #585858; /* цвет замещающего текста */ font-size: 1em; margin: 0; height: 25px; width: 200px; } |
Шаг 4. Настройка активного поля input
Сейчас, если вы откроете вашу форму в браузере, то увидите, что при нажатии на нее, она будет подсвечиваться по контуру. Давайте уберем рамку у активного input:
|
1 2 3 |
input#s:focus { outline: none; } |
Далее, можно сделать изменяющийся размер input, когда при нажатии на него мышкой, он будет увеличиваться влево:
|
1 2 3 4 |
input#s:focus { outline: none; width: 250px; } |
Помните, когда в самом начале написали float: right? Так вот, кроме выравнивания, это свойство дает эффект увеличения влево.
Шаг 5. Последние штрихи
И последнее, уберем отображение кнопки “Поиск” и надписи “Найти:”.
|
1 2 3 4 5 6 7 |
#searchsubmit { display: none; } #searchform label { display: none; } |
Шаг 6. Вставим форму поиска в шаблон
Вставить форму поиска в шаблон можно такой функцией:
|
1 |
<?php get_search_form(); ?> |
Также вы можете использовать виджет “Поиск”.
Форма будет выглядеть так:
Если у вас появились какие-то вопросы, пишите, я обязательно отвечу 🙂