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

А вы знаете как правильно добавить форму поиска в WordPress меню? Я никогда не сталкивался с этим вопросом, до поры до времени. Решаю вопросы по мере поступления, так сказать. И вот такой вопрос поступил на повестку дня. Человек захотел увидеть у себя на сайте поисковую форму в навигационном меню. И, кстати скажу, это достаточно логично, если страницы «главная» «карта сайта» «о сайте» , занимает всего лишь половину места в менюшке.

1. Поиск в WordPress меню с кнопкой «искать»

2. Поиск в WordPress меню без кнопки «искать»

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

Перед добавлением поисковой формы в поставьте галочки во вкладке "меню", как на скриншоте.

1. Поиск в WordPress меню с кнопкой «искать»

Эта форма поиска без применения к ней стилей CSS

// menu-search-form.
function add_search_to_wp_menu ( $items, $args ) {
if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text" type="text" value="Кто Ищет, Тот Найдет !" name="s" id="s" onfocus="if (this.value == \'Кто Ищет, Тот Найдет !\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Кто Ищет, Тот Найдет !\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="Искать" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

Добавляем этот код в файл functions.php. Как вариант, сделайте в окончании файла functions.php пометку, комментарий типа // My custom functions и вставляйте после этого комментария все дополнительные функции. При обновлении темы все ваши расширения могут слететь и чтобы потом не искать отрывки своих кодов по всему файлу, перед обновлением просто скопируйте и вставьте потом, после обновления на место. То-же самое можно проделать и со стилями, в style.css. Стили даю самые минимальные, которые я применил при тестировании кода. Смотрите какие классы, за что отвечают и правьте под свой блог.

 /* MENU SEARSH */
.menu-item-search {
float: right;
margin-top: 5px;
color:eeeeee;
}
.my-wp-search {
padding:5px !important;
margin-left:7px !important;
margin-top:10px !important;
margin-right: -25px !important;
font-size: 12px !important;
}
.text{
color: #bbbbbb;
}

2. Поиск в WordPress меню без кнопки «искать»

// menu-search-form.
function add_search_to_wp_menu ( $items, $args ) {
if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text" type="text" value="Кто Ищет, Тот Найдет !" name="s" id="s" onfocus="if (this.value == \'Кто Ищет, Тот Найдет !\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Кто Ищет, Тот Найдет !\';}" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

Если вам пригодилась статья «Добавляем поиск в WordPress меню» жмите кнопочки.

Да, если подпишетесь на получение новых статей на почту, то не пропустите статью «Выдвигающееся WordPress меню». Это такое-же как меню, как у меня.
Ссылка на материал: add-search-form-wp-wordpress-nav-menus

Картинки по запросу стеклянная перегородка.

Похожие по Тегам статьи

Добавляем атрибут title в редактор WordPress

Начиная с версии 3.5 WordPress из редактора удалена функция автоматического добавления атрибута title, что…

Выводим количество просмотров WordPress

На скриншоте показан вывод количества просмотров WordPress в анонсах статей. На днях столкнулся с…

Расширяем текстовый редактор WordPress

Как известно, в WordPress редакторе существует два режима публикации и редактирования постов — Визуальный…