Как добавить поиск в меню WordPress?

Если в меню вашего сайта на WordPress есть немного свободного места, то предлагаю заполнить его формой поиска.

О том, для чего это нужно, а главное как реализуется, пойдет речь в сегодняшнем уроке.

Начну с предыстории.

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

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

В зависимости от целей, которые вы преследуете, тут можно разместить форму подписки, какое-то специальное предложение, или попросту рекламу.

Итак, начинаем воплощать задуманное в жизнь.

Добавляем поле поиска в меню WordPress

На самом деле реализуется задача крайне просто, буквально в два этапа.

Для начала добавляем в самый низ файла functions.php вашей темы WordPress следующий код:

// начало кода формы поиска в меню
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '

• ‘ . $searchform . ‘

‘; return $items; } // конец кода формы поиска в меню

Для удобства я поместил код между закомментированными строками, чем обозначил его границы, чтобы в будущем вы не запутались, за что он отвечает и для чего был добавлен.

После добавления кода в functions.php поиск в меню Вордпресс уже должен появиться.

Если форма поиска, добавленная в меню, отображается «криво», или искажает отображение меню, то на втором этапе нужно прописать CSS-стили в файле style.css вашей темы WordPress, которые отвечают за отображение формы поиска.

Здесь все индивидуально и зависит от установленной темы WordPress, поэтому универсального решения нет.

Для «подгонки» формы поиска под меню моего сайта я использовал следующие стили:

#search input {
color: #00bf9f;
}
 
#s {
width: 150px;
}

Поэкспериментируйте, у вас обязательно получится!

Вот так можно буквально за 5 минут добавить поиск в меню WordPress.