Если в меню вашего сайта на 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.
КОгда добавляю этот код, то крашится весь сайт. Просто белый экран. Есть идеи почему так может быть?
Значит для вашего конкретного шаблона код в таком виде не подходит, поищите другие решения либо попробуйте другой шаблон Вордпресс.