Недавно понадобилось установить поиск по середине сайта во всю длину.

Скачать исходники для статьи можно ниже

В Вордпресс есть стандартная функция — get_search_form();. Ее можно подключить в любом месте темы. Если это нужно сделать там, где код HTML, то нужно заключить функцию в PHP теги.

<?php get_search_form(); ?>

Для расположения формы поиска по центру сайта во всю длину – вставил вышеуказанный код в файл header.php

Здесь использовал ещё код для вставки отступа в виде блока, думаю поставить туда фоновую картинку позже:

<?php 
	echo "<div style=\"height: 45px; no-repeat center 100%;\"> </div>"; 
	?>

Теперь перед Вами появится стандартная строка поиска WordPress. Если Вам надо, можете добавить стилей и настроить внешний вид строки. Чтобы узнать классы элементов строки, Вам поможет инструмент браузеров, который помогает просмотреть код элементов страницы.

Возможно, Вы захотите изменить текст в строке поиска или на кнопке или просто удалить его, то Вам нужно изменить уже саму строку. Сделать это можно в файле searchform.php. Если У Вас нет такого файла то можете создать его и добавить в него следующий код:

 <form method="get" id="searchform" action="">
 <input type="text" class="field2" name="s" id="s" placeholder="" />
 <input type="submit" class="sim" name="submit"  value="Поиск" />
 </form>

Если у Вас был такой файл, то в нем будет похожий код. По коду видно, что это форма с двумя элементами — input. В моем коде во второй строке — это строка поиска и в конце текст, который будет выводится внутри по умолчанию — Что будем искать?. Можете поменять на — Поиск, или что ищем, ну и тд.

В строке номер три находится элемент input — это кнопка поиск. В конце как и в строке — текст на кнопке. Можете его поменять или удалить, если захотите вместо кнопки установить какую-то картинку.

Элементам присвоены классы, так что можете им задать нужные стили. Думаю, если Вы немного разбираетесь в CSS, то труда Вам это не составит. Вы сможете привести строку в тот внешний вид, который полностью удовлетворит Ваш вкус.

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

Примечание:

Пользовательский код для настройки темы TwentyTwelve через плагин simple custom css (скачать можно здесь – скачать плагин), ну или напрямую вставить данный код в файл style.css.

.field2 {
width: 87% !important;
 padding-top: 10px;
 padding-left: 10px;
  padding-bottom: 10px;
  border-bottom: 5px solid #d5e6eb;
	border-left: 5px solid #d5e6eb;
	border-right: 5px solid #d5e6eb;
        border-top: 5px solid #d5e6eb;
border-radius: 30px;
}

.sim {
 
 padding-top: 10px !important;
 padding-left: 10px;
  padding-bottom: 10px;
  border-bottom: 5px solid #d5e6eb !important;
	border-left: 5px solid #d5e6eb !important;
	border-right: 5px solid #d5e6eb !important;
        border-top: 5px solid #d5e6eb !important;
border-radius: 30px;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 14px !important;
	font-weight: bold !important;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #dd9933 !important;
	background-color: #ffffff !important;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ffffff, #ffffff) !important;
	background-image: -ms-linear-gradient(top, #ffffff, #ffffff) !important;
	background-image: -webkit-linear-gradient(top, #ffffff, #ffffff) !important;
	background-image: -o-linear-gradient(top, #ffffff, #ffffff) !important;
	background-image: linear-gradient(top, #ffffff, #ffffff) !important;
	border: 1px solid #d2d2d2;
	border-radius: 30px !important;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}