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

Привет!

Если в меню вашего сайта на CMS 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 .= '<li class = "my_search">' . $searchform . '</li>';
return $items;
}
// конец кода формы поиска в меню

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

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

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

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

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

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

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

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

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

С уважением, Владимир Денисов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *