Компания "МОЙ ДОМ" производит клининг территорий, химчистку ковров
www.uborkaotido.ru

Как добавить поиск в меню 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.

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

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

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

Комментарии 2

  • КОгда добавляю этот код, то крашится весь сайт. Просто белый экран. Есть идеи почему так может быть?

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.