Меняем стили CSS формы поиска WordPress

Форма поиска на сайте не только повышает функциональность, юзабилити, но и , что немаловажно это элемент дизайна любого web-проекта. И наверняка многие блоггеры хотели-бы видеть у себя на сайте не то, что предложили им разработчики шаблона. И сегодня пойдет речь о том, как без сторонней помощи, самостоятельно изменить стили CSS, чтобы у вас получилась красивая форма поиска WordPress.

Форма поиска будет выполнена в стиле нынче модного Flat-дизайна. Выводится она в сайдбаре специальным виджетом, который есть в любом шаблоне WordPress.

Красивая форма поиска WordPress

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

function my_search_form( $form ) {
$form = '
<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<label>Что-то ищете?????</label>
<input type="text" placeholder="Поиск по сайту..." value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="" />
</form>';
return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

Этот код переопределяет стили CSS и присваивает форме id — #searchform . Давайте немного разберем код построчно.

<label>Что-то ищете?????</label>
На мой взгляд бесполезная строчка, которую можно удалять без сожаления. Она добавляет к форме (сверху) любое слово, или фразу.

<input type="text" placeholder="Поиск по сайту..." value="' . get_search_query() . '" name="s" id="s" />
Это строка, в которую вводится искомое. Здесь обратите внимание на placeholder="Поиск по сайту..." Это словосочетание внутри формы поиска. Меняйте на любое свое.

Ну и

<input type="submit" id="searchsubmit" value="" /> — кнопка для активации поиска.