Как вывести поиск wordpress

WordPress: Поиск по Сайту (без плагинов)

Сегодня разберёмся, как в WordPress реализовать AJAX поиск по сайту (так называемый «Живой поиск») без использования плагинов. Настроим его должным образом. Рассмотрим, как реализовать поиск по записям, страницам или произвольным типам записей. А также исключим определённые страницы/записи из поиска.

Код поиска WordPress

Код поиска находится в файле searchform.php . Именно данный файл вам нужно выводить в том месте, где это необходимо. Чтобы вывести форму поиска WordPress, воспользуйтесь следующим кодом.

Ваш шаблон поиска searchform.php может выглядеть примерно так.

Стили для выпадающего списка результатов поиска.

Живой поиск в WordPress

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

При вводе текста мы будем отправлять AJAX запрос в php-обработчик (создадим его в следующем пункте данной статьи). При нахождении или не нахождении данных мы будем выводить пользователю результаты поиска в виде списка , который мы подготовили в предыдущем пункте статьи.

Создайте файл ajax-search.js или просто добавьте следующий JavaScript код в ваш главный javascript файл.

Если javascript файл вы создали отдельно, не забудьте подключить его в functions.php .

Настройка поиска WordPress

При вводе в поле поиска отправляется AJAX запрос в функцию ajax_search . Создадим её в functions.php или в отдельном файле, как вам удобно. Я создам отдельно.

Создаю файл /functions/ajax-search.php и подключаю его в functions.php .

Сам код для этого файла.

Обратите внимание на ключ post_type в массиве $args . В данном примере мы осуществляем поиск по всему сайту, т.к. мы использовали значение any . Рассмотрим и другие примеры поиска.

WordPress поиск по записям

Чтобы выполнить поиск только по записям, измените значение any на post .

Поиск по страницам:

Поиск по кастомным типам записей

Например, мы хотим выполнять поиск по страницам и по произвольному типу записей production , тогда используйте массив для множественного выбора.

Включение типов записей в поиск

Обратите внимание, все следующие ниже фильтры ниже будут работать на странице поиска, для живого (AJAX) поиска, добавляйте нужные аргументы в свою функцию ajax_search (3 пункт данного руководства). Примеры:

Включение записей в поиск

Чтобы включить в поиск только записи, используйте код:

Включение произвольного типа записей

Чтобы включить в поиск только произвольный тип записи production , используйте следующий код:

Включение нескольких типов записей в поиск

Чтобы включить сразу несколько типов записей, используйте массив:

Таким образом, мы включили в поиск только «Страницы» и произвольный тип записи «Продукция».

Исключение страниц из поиска WordPress

Иногда может понадобиться исключить определённые страницы из поиска, рассмотрим, как это можно реализовать.

Исключение страниц из поиска по id

Чтобы исключить страницы с определёнными id, воспользуйтесь следующим кодом:

Так мы исключим из поиска страницы с id 36 и 38 .

Исключение произвольных типов записей из поиска

Чтобы исключить кастомный тип записи из поиска, используйте код:

Таким образом мы исключили тип записи photo_gallery из поиска.

Исключение категорий из поиска по id

Чтобы исключить определённые категории из поиска, воспользуйтесь кодом ниже.

Указав в массиве id 6 и 7, мы исключаем из поиска категории с этими id.

Подсветка результатов поиска

При переходе на страницу с результатами поиска, заголовок статьи и the_excerpt/the_content (отрывок или контент) будут подсвечены.

Admin-ajax.php Bad Request 400

Если при вводе в поле поиска в консоли появляется ошибка 400 Bad Request , то ищите проблему в 3 пункте данного руководства. Вероятно, вы неправильно именовали экшены или создали отдельный файл и забыли подключить его (или неправильно подключили).

Думаю, логика использования AJAX поиска на сайте WordPress вам ясна. Если же что-то осталось не понятным, задавайте вопросы в комментариях.

Понравилась статья? — Можете поддержать проект в блоке ниже.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Источник

get_search_form() WP 2.7.0

Подключает форму поиска, файл темы searchform.php . Если такого файла в шаблоне темы нет, то будет использован дефолтный код для формы поиска.

Не забывайте про безопасность

В строку поиска, пользователь может вписать что угодно, например рабочий скрипт

Очень хорошая статья. Благодарю за проделанную работу. С наилучшими пожеланиями всё подробно и понятно!

Не работает поиск — не выводит результаты

Подскажите, какой подвох может ждать, если в атрибуте action поисковой формы я вместо home_url(‘/’) просто поставлю вручную ‘/’, не вызывая ф-цию home()?

Если WP установлен не в папку, то в целом никакого. Другой вопрос, зачем это делать? Функция home_url() работает крайне быстро, так как не делает никаких запросов в бд.

Если функция работает быстро, но медленнее, чем хардкодное ‘/’, то вот вам контрвопрос: зачем писать быструю, но при этом более медленную, чем ручное указание адреса action функцию?

Потому что функция имеет проверки на мультисайт и https, а также хук home_url, с помощью которого плагины и тема могут эту ссылку изменять по своим нуждам. Если этого на вашем личном сайте не нужно — можно просто поставить / . Я лично так не делаю, так как кто его знает что потребуется на сайте впереди.

Если тебя для себя делается, то можно так сделать — не страшно. Если для людей, то например, можно установить ВП в подпапку и ссылка на главную может выглядеть, например, /home/ , тогда будет баг. Аналогично может отличатся ссылка для разных языков сайта. И еще наверное много кейсов можно найти на эту тему.

Источник

Выезжающая форма поиска в WordPress

Опубликовано: ADv Дата 21.11.2013 в рубрике Своя тема 2 комментария

Вы наверняка видели на многих сайтах иконку поиска с выезжающей по клику поисковой форме? Если ни разу не представилось возможным, то можете ознакомиться например по этой ссылке http://www.list25.com. Идея в том, чтобы отображать простую иконку поиска, а когда пользователь кликает на нее, то форма поиска выезжает для ввода поискового запроса, это так называемый toggle эффект. Это симпатичный эффект, который также экономит пространство и позволяет пользователям сфокусироваться непосредственно на контенте сайта. Естественно, эффект будет очень полезен на мобильных responsive темах. В этой статье мы покажем вам как добавить выезжающую форму поиска в темы WordPress.

Примечение: Это статья для пользователей среднего уровня навыков работы с тегами шаблонов WordPress, HTML, и CSS. Новичкам рекомендуется протестировать действия, описываемые в данной статье на локальном сервере.

Выводим форму поиска WordPress

WordPress добавляет дефолтные CSS классы к HTML, сгенерированному различными тегами шаблонов внутри темы. Темы WordPress используют тег шаблона для вывода формы поиска. Эта функция может выводить две различных поисковых формы: одна для тем на HTML4, а вторая — для тем с поддержкой HTML5. Если в вашей теме, в файле functions.php есть строка add_theme_support(‘html5’, array(‘search-form’)), тогда этот тег шаблона выведет форму поиска на HTML5. В любом другом случае, отобразится форма на HTML4.

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

Следующий код отобразится, если тег шаблона get_search_form() выводит ее в формате HTML4:

А этот код — будет результатом для темы с поддержкой HTML5.

В этом уроке мы будем использовать форму поиска на HTML5. Если ваша тема генерирует форму на HTML4, тогда просто добавьте следующую строку кода в ваш файл functions.php темы:

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

Добавляем выезжающий эффект к форме поиска WordPress

Прежде всего нам нужна картинка — иконка поиска. Стандартная тема WordPress Twenty Thirteen содержит в себе приятную небольшую иконку, и её то мы и возьмем для нашей статьи. Однако не стесняйте себя в создании своей собственной, к примеру, в Photoshop или же скачайте её из сети. Только убедитесь, что имя файла у нее search-icon.png.

Теперь вам нужно загрузить эту иконку в папку с изображениями в вашей теме. Подключитесь к своему сайту через FTP клиент типа Filezilla или Total Commander и откройте директорию с вашей темой.

Теперь — последний и самый важный шаг. Необходимо добавить следующие стили CSS в файл таблицы стилей вашей темы:

Об этом коде важно знать то, что в нем содержатся CSS3 эффекты перехода, которые и позволяют нам создать выезжающий эффект для формы. Также стоит заметить, что вам все равно придется откорректировать положение иконки поиска и формы в соответствии с разметкой вашей темы.

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

Источник

Поиск по сайту wordpress

Всем привет, сегодня хочу поговорить с вами о форме поиска в wordpress и результатах поиска.

По-умолчанию, WP делает поиск по заголовкам, контенту и цитатам, — да и сам поиск в wordpress работает не сильно эффективно, например «рука» и «руки» для него разные вещи 🙂 . Как решить эту проблему я расскажу чуть позже, а сейчас давайте разберемся зачем нужен поиск по WordPress, а также попробуем сделать простейшую форму поиска в Вордпресс.

Чем полезен поиск по сайту wordpress

Для пользователей поиск по сайту wordpress полезен:

1. Возможностью найти интересующий их материал.
2. Просмотром всех записей на одну и ту же тему на одном сайте.
3. Можно просмотреть интересные материалы не покидая пределы сайта.

Для СЕО оптимизации поиск по сайту wordpress улучшает поведенческие факторы, увеличивает число просматриваемых страниц, а также удерживает пользователя на сайте.

Для вас, как владельцу сайта, поиск wordpress позволяет:

1. Зацепить пользователя по одному запросу и удерживать до определенного момента.
2. Увеличить число страниц сайта, если использовать правильные возможности ВП + СЕО.

WordPress форма поиска

к менюСамостоятельно сделать форму поиск в wordpress довольно не сложно, но есть несколько вариантов:

1. использовать виджет поиска
2. сделать форму самостоятельно.

Его можно добавить в область виджетов, вот так:

Но сегодня я расскажу вам о втором способе, как самостоятельно делается wordpress форма поиска.

В этом нет ничего сложного, вам достаточно закинуть в тему вот такой код:

Этот код можно закинуть в любое место темы, будь то это шапка сайдбар или футер.

Проверить работу формы поиска wordpress можно написав в поле ввода текст и нажать на ентер или кнопку «найти», в результате вы получите список похожих постов и страниц, или не получите ничего, если такой строки нет.

Это самая простая wordpress форма поиска, если вам нужно настроить ей красивый вид или сделать ее в pop up нужно создать и настроить стили CSS. Этот момент я сейчас упускаю, возможно вернемся к нему когда то по позже.

Как вариант, форма поиска wordpress может выглядеть вот так:

Результаты поиска wordpress

к менюЗа вывод результатов поиска в WordPress теме отвечает файл search.php . Он обычно похож на index.php или category.php. Чтобы увидеть результаты поиска wordpress, можно воспользоваться простейшим кодом:

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

Настройка поиска wordpress: исключаем страницы

к менюБывает такая ситуация, что нужно исключить из поиска страницы (page), посты (post) или пользовательские / произвольные типы. Для этого можно воспользоваться волшебным кодом для изменения цикла WP и удаления страниц, постов и т. д. из результатов поиска.

Настройка поиска wordpress делается довольно просто, вот такой код может исключить все страницы из результатов поиска и выбрать только посты:

Если предположить что у вас есть произвольный / пользовательский тип записей «mypost» и мы хотим вывести в результатах поиска все посты и свой пользовательский тип, — достаточно написать вот такой код:

Важно: вставлять этот код нужно до вызова цикла, конкретно перед этим кодом в файле поиска search.php

Плагин поиска для wordpress

к менюВозвращаемся к нашим баранам, если вы все сделали правильно в предыдущих пунктах, то вы должны видеть в результатах поиска wordpress только строгие соответствия. Например, если у вас в тексте есть слово «вордпрес» и нет слова «вордпресс», то результат поиска по запросу «вордпресс» будет нулевым, то есть не будет найдено ни одного поста или страницы. К сожалению так устроен штатный поиск в wordpress.

Как же сделать более адекватный поиск по сайту wordpress? — нужно использовать плагин поиска для wordpress Relevanssi — A Better Search.

Настройки этого плагина я постараюсь описать в ближайшее время. Вкратце опишу только возможности этого плагина:

• поиск по произвольным полям wordpress;
• фильтр поиска;
• настройка поиска;
• подсвечивание другим цветом поискового запроса в тексте;
• индексация всего сайта в базу данных для уменьшения нагрузки;
• поиск по меткам, категориям, таксономиям;
• поиск по комментариям и многое другое.

От себя хочу добавить, что в своих проектах я использую именно этот плагин поиска для wordpress, хотя до этого перепробовал их уйму. Не поленитесь один раз настроить этот плагин и вы получите отличные результаты. Более подробно плагин поиска для wordpress (откроется в новом окне) описан по ссылке.

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

к менюНа этом пока что все, я описал основные моменты для создания формы и страницы поиска WP, а также настройку поиска, результаты и плагин поиска ВП.

Доброго времени суток! Как сделать так чтобы поиск выдавал только определенные результаты на определенных страницах? Например, поиск на странице «Новости» выдавал статьи из рубрики новости.

Добрый день.
Если для поиска не используете плагинов, то можно попробовать вот так:
add_action(‘pre_get_posts’, ‘get_posts_search_1’);
function get_posts_search_1($query) <
if ( !is_admin() && $query->is_main_query() && is_category(6) ) <
$query->set(‘category__in’, [6]);
>
>
6 — это ид вашей категории новости, у вас он может быть другим, в двух местах нужно поменять is_category(6) и [6]
Это нужно вставить в functions.php
Подробнее об этом хуке здесь: https://help-wp.ru/kak-izmenit-kolichestvo-vyvodimyx-postov-u-otdelnoj-kategorii-wordpress-i-rabotala-postranichnaya-navigaciya/

Всем здравия. Вот ради спортивного интереса). Может кто-нибудь подскажет как поиск посадить не на кнопку( Евгений :

Странно,надпись в комментариях не отобразилась, там надпись со второй строки кода, начиная со знака вопрос

Добрый день,подскажите, почему после установки «Поиска» внутри строки такая надпись и она не пропадает. Её можно удалить и задать поиск,но после загрузки сайта она опять появляется.

Есть ли у кого-либо статьи в которых сказано где искать файлы в которых выполняются запросы, в которых формируются страницы а не где редактируется внешний вид страницы?

К примеру — сейчас необходимо изменить логику поиска, но нигде не написано каким образом поиск работает (где конкретно функции отвечающие за поиск), или в каком файле идет запрос к БД.

query_posts()
query_posts(‘s=текстпоиска’); или
get_posts(‘s=текстпоиска’);
где s — поисковая фраза

используя хук pre_get_posts можно менять поиск как угодно

Спасибо — помогло.
Долго ебался, практически весь день, пока ваш сайт не нашёл случайно.

Источник