amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Плагины

Создаём удобный и живой поиск WordPress

Среди стандартных виджетов WordPress имеется такой, который выводит в сайдбаре форму поиска. Функция необходимая для каждого сайта. Однако есть в ней один недостаток – слишком проста и не функциональна. И действительно, поиск WordPress умеет только искать слова, абсолютно идентичные запросам в форме. Это мало для большинства веб-разработок.

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

Что такое живой поиск и чем он полезен

Живой поиск – это форма поиска, которая при вводе какого-то запроса пытается угадать, что пишет пользователь и предложить уже готовые варианты. Так же, как во многих поисковых системах, когда мы записываем то или иное слово, нам в выпадающем списке предлагают варианты.

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

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

Dave’s WordPress Live Search

Dave’s WordPress Live Search – за этим громоздким название кроется живой поиск WordPress. Чтобы реализовать его, скачиваем, устанавливаем, активируем плагин, и настраиваем его опции в пункте «Настройки» и подпункте «Live search». Всё на русском языке, поэтому должно быть понятно. Рассмотрим, что умеет этот плагин.

Первая вкладка «Основные» содержит главные настройки:

Максимум отображаемых результатов. Сколько вариантов предложит живой поиск. Для бесконечности пишем «0».
Максимум символов для включения поиска. Выбирается через сколько букв начнёт работать живой поиск – от 0 до 4 символов. Лучше выбрать поменьше.
Направление вывода. Показывать варианты живого поиска снизу или сверху формы поиска WordPress.

Следующая вкладка «Оформление», она отвечает за внешний вид поиска WordPress:

Показывать метаданные/ иллюстрации/ цитаты/ ссылку на остальные результаты. Если поставить галочку на том или ином пункте, то можно включить отображение тех или иных данных в живом поиске.
Стили. Разнообразные цветовые схемы.

Последняя вкладка «Расширенные» показывает дополнительные настройки живого поиска.

Исключения. Записываются пермалинки записей, которые не должны показываться в живом поиске. Именно пермалинки, а не ID. Однако в результате поиска эти материалы всё равно будут.
Сдвиг панели вывода. Настраивает положения живого поиска по осе X или Y
Включить фильтр содержимого. Если пользуетесь другими плагинами поиска, например, как мы рассказывали тут, то необходимо поставить здесь галочку. В ином случае, плагин не получит доступа к данным формы поиска WordPress.

Когда все настройки сделаны, стандартный виджет поиска WordPress станет обладать функциями живого поиска.

Адель Гадельшин

Next Вывод записей WordPress бесконечным списком »

Previous « Редактор для WordPress с поддержкой синтаксиса кода

View Comments

Сергей says:

4 марта 2017 at 13:35

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