✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Як створити спеціальний шаблон розширеного пошуку в WordPress

22

Цей посібник призначений для тих, хто має спеціальний тип публікації (CPT) і хоче мати сторінку розширеного пошуку, яка шукає результати в межах цього CPT. У формі пошуку ви можете налаштувати різні введення для пошуку в різних полях; заголовок допису, вміст допису, будь-який тип користувацьких мета або користувацької таксономії.

У цьому дописі ми припустимо, що у нас є спеціальний тип публікації для книг, додається спеціальна таксономія для жанру книги та купа спеціальних мета; автор, рік видання, номер ISBN і прапорець, чи є книга в наявності. Спеціальний тип публікації та параметри повністю залежать від вас, щоб відповідати вашим потребам, код нижче просто намагатиметься охопити більшість основ.

Що ми зробимо

Ми створимо спеціальний тип публікації для книг і спеціальну ієрархічну таксономію, додану до нього для жанру. Крім того, у кожній книзі є настроювані поля для автора(ів), року видання, номера ISBN та прапорця, чи потрібно включати книги, яких немає в наявності. Що стосується самої сторінки пошуку, ми створимо шаблон сторінки, де буде розміщено більшу частину нашого коду. Сторінка розпочнеться з відтворення спеціальної форми на початку; показуючи всі можливі параметри для фільтрації результатів. Під ним у списку відобразяться всі результати пошуку книг. Ми визначаємо кількість результатів на сторінку та додаємо розмітку сторінок внизу, якщо кількість перевищує це значення.

Це можливі параметри фільтра, які ми створимо для нашого шаблону розширеного пошуку:

  • Введення тексту для пошуку будь-якого рядка в заголовку публікації та вмісті публікації.
  • Випадаюче меню для вибору жанру. Дозволяє вибрати термін або залишити його на «Будь-який».
  • Вхід для введення імені автора, який шукає в настроюваних мета. Незначна відповідність, що означає введення «Відмітити», поверне всіх авторів, ім’я яких є або містить «Відмітити».
  • Введення номера для введення року видання книги, який шукає в власних мета. Слабо відповідність, що означає введення, наприклад, «20», відповідатиме будь-якій книзі, опублікованій у 1920 році або будь-якому році, починаючи з 20.
  • Вхід для введення ISBN (міжнародний ідентифікатор книги ), який шукає в власних мета. Повертає лише точні збіги.
  • Поставте прапорець, чи потрібно включати книги, яких немає в наявності, ще одна спеціальна мета. За замовчуванням цей прапорець знято, що означає, що результати показують лише книги, які є в наявності.

Форма налаштована на використання методу GET, що означає, що будь-які пошукові параметри будуть додані до сторінки в URL-адресі у формі «?book-search=world&year-published=2016&book-author=mark». Іншим варіантом, якщо ви хочете уникнути «потворних URL-адрес», є використання Javascript і AJAX. Але в цьому є деякі мінуси. По-перше, не можна буде створити закладку для пошуку з певними «попередньо заповненими» параметрами пошуку. Уявіть, що ви в іншому місці свого сайту хочете створити пряме посилання на свою сторінку користувацького пошуку певного автора. Потім ви можете змусити посилання перейти на вашу сторінку пошуку, додати «?author=mark», і, таким чином, натиснувши посилання, ви перейдете безпосередньо до результатів для цього автора. Цього неможливо досягти за допомогою AJAX.

Параметри пошуку взаємопов’язані. Це означає, що поєднання, наприклад, року «2011» і автора «Якийсь хлопець» поверне лише книги, які відповідають ОБОМУ. Якщо ми також вкажемо «смішно» у загальному введеному тексті пошуку, ми отримаємо лише результати, які відповідають усім трьом цим. Сказано різними словами; ми будемо використовувати логіку І. Це найпоширеніший метод фільтрації результатів пошуку.

Цей підручник не включатиме стилі, тому цю частину вирішувати вам. Нижче наведено приклад того, як це може виглядати з базовим стилем.

Як створити спеціальний шаблон розширеного пошуку в WordPress

Примітка щодо розбиття на сторінки за допомогою спеціального запиту

Якщо вам потрібна розбивка на сторінки для користувальницького запиту в межах однієї сторінки, слід знати кілька речей. Пагінацію запиту можна створити за допомогою функцій WordPress [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)()або двох [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()і [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Однак вони закодовані для роботи з глобальним wp_queryоб’єктом (яким для шаблону сторінки є сама сторінка), а не користувацьким запитом.

Є кілька обхідних шляхів, наприклад, самостійно написати функцію розбиття на сторінки. Або ви можете використовувати дію pre_get_postsта маніпулювати wp_queryоб’єктом. На жаль, цей метод занадто пізній, щоб вплинути на функції розбиття на сторінки. Інша альтернатива — повністю пропустити нумерацію сторінок і просто показати всі дописи. Це може бути варіантом, якщо у вас не так багато дописів, але якщо ви створюєте розширений користувацький шаблон пошуку – я припускаю, що у вас є досить багато дописів.

Те, що ми будемо робити в цьому посібнику, є свого роду «хакерським» методом. У шаблоні сторінки ми замінимо wp_queryоб’єкт нашим спеціальним запитом, щоб функції циклу та розбиття на сторінки працювали належним чином. Цей метод є тим, що мені вдалося найбільше.

Без зайвих слів, давайте почнемо кодувати!

Налаштування спеціального типу публікації, таксономії та мета-полів

Першим кроком є ​​визначення спеціального типу допису, для якого ми хочемо створити шаблон розширеного пошуку. Якщо ви вже налаштували спеціальний тип допису або бажаєте застосувати його для дописів чи сторінок, ви можете відразу перейти до наступної частини.

Ми визначаємо спеціальний тип допису bookз ієрархічною спеціальною таксономією book_category. Я не буду вдаватися в подробиці, пояснюючи, як тут створювати власні типи публікацій і таксономії. Якщо вам цікаво дізнатися більше, у мене є допис, у якому докладно про це.

Розмістіть цей код будь-де в коді вашої теми functions.phpчи плагіна:

Це призведе до створення спеціального типу допису з таксономією, доданою до нього в адмінці.

Налаштування користувацьких мета дописів трохи залежить від вас – обробіть це вручну за допомогою [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()або скористайтеся плагіном Advanced Custom Fields (ACF), який ідеально підходить для такого роду роботи. Я буду використовувати ACF для програмного налаштування полів, наприклад:

Звичайно, ви можете налаштувати поля ACF за допомогою графічного інтерфейсу адміністратора ACF. Але є кілька переваг додавання їх за допомогою коду. Наприклад, переконайтеся, що ви зберігаєте однакові поля, де б ви не активували свою тему чи плагін. Якщо ви встановлюєте поля в адміністраторі, вам потрібно не забувати експортувати та імпортувати їх, якщо ви змінюєте сайт WordPress.

Зверніть увагу на мета-імена; наприклад book_author, year_published, і так далі. Ви будете посилатися на них, коли ми створюватимемо спеціальний запит у шаблоні розширеного пошуку.

За допомогою плагіна ACF і наведеного вище коду редагування однієї книги виглядатиме так:

Як створити спеціальний шаблон розширеного пошуку в WordPress

Завдяки цьому ми всі готові створювати стільки книжкових публікацій, які хочемо. Наступним кроком є ​​створення шаблону сторінки для нашого пошуку.

Створення шаблону сторінки

Давайте створимо шаблон сторінки, куди ми розмістимо наш шаблон розширеного пошуку. Зробіть копію вашої теми single.phpабо page.phpта перейменуйте її, наприклад, на template-booksearch.php. HTML вирішувати вам, але причина, по якій ми робимо копію single або page, полягає в тому, що вони, ймовірно, є найближчим шаблоном з точки зору макета.

У верхній частині шаблону сторінки ми позначаємо, що це шаблон сторінки, написавши «Назва шаблону» та його назву в блоці коментарів. Це гарантує, що ми зможемо вибрати шаблон сторінки під час редагування сторінки.

Розділи, які нам потрібно закодувати в нашому шаблоні, розташовані в такому порядку:

  1. Зберігайте всі змінні, передані раніше формою, використовуючи get_query_var(). Також потрібно зберегти поточну сторінку
  2. Візуалізуйте форму пошуку з кнопкою надсилання для виконання пошуку
  3. Скинути wp_queryоб’єкт
  4. Налаштуйте аргументи для new WP_Query()залежно від шуканих параметрів і запустіть запит. Призначте настроюваний запит wp_queryоб’єкту
  5. Перегляньте результати та відобразіть їх. Також візуалізуйте посилання на сторінки
  6. Скинути wp_queryоб’єкт до того, яким він був

Причина, по якій нам потрібно зберігати всі шукані змінні та поточну сторінку раніше, полягає в тому, що ці змінні буде втрачено, коли ми скинемо wp_queryоб’єкт на кроці 3. Нам також потрібні змінні для нашої форми пошуку, щоб заповнити поля.

У вашому шаблоні виберіть місце, де ви хочете вивести ваш користувальницький пошук, і почнемо згори:

1 Отримайте всі шукані змінні

Ми отримуємо параметри GET (з URL-адреси) за допомогою [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Наприклад; якщо ?book-author=benjaminв URL-адресі є параметр, використання get_query_var('book-author')повертає рядок " benjamin". Отримання всіх змінних можна зробити так:

$search_string = get_query_var('book-search'); $author = get_query_var('book-author'); $category = get_query_var('book-category'); $year = get_query_var('year-published'); $isbn = get_query_var('isbn'); $out_of_stock = get_query_var('out-of-stock');

Але це все спеціальні параметри, які не є частиною стандартних параметрів GET WordPress. WordPress ігноруватиме будь-які невідомі йому параметри GET, тому їх виклик завжди повертатиме порожній рядок. Нам потрібно повідомити WordPress дозволити кожен із цих параметрів GET. Ми робимо це за допомогою фільтрації query_vars. У вашому functions.php, також додайте це:

add_filter('query_vars', function($vars) { $vars[] = 'book-search'; $vars[] = 'book-author'; $vars[] = 'book-category'; $vars[] = 'year-published'; $vars[] = 'isbn'; $vars[] = 'out-of-stock'; return $vars; });

Тепер наші get_query_var()повинні мати можливість отримувати параметри GET. Якщо вони не встановлені, повертається порожній рядок.

Нам також потрібно отримати поточну сторінку, перш ніж ми зіпсуємо wp_queryоб’єкт. Поточна сторінка — це прихований параметр GET під назвою paged. Ми отримаємо його так само, як і інші наші параметри GET, але за замовчуванням ми встановимо значення 1, якщо воно порожнє.

$paged = (get_query_var('paged'))? get_query_var('paged'): 1;

Примітка: оскільки pagedце стандартний параметр WordPress, нам не потрібно додавати pagedдо query_varsфільтра.

2 Відобразіть форму пошуку

Форма пошуку буде просто <form>з необхідними введеннями та кнопкою надсилання форми. HTML повністю залежить від вас, у наведеному нижче прикладі я додаю вхідні дані у простий список. Я не буду включати стилі в цей підручник, це вирішувати вам. Ви можете вибрати стиль форми пошуку, щоб вона розташовувалася вгорі результатів або збоку – вертикально вниз разом із результатами пошуку.

Примітка. Щоб скоротити та модульувати шаблон розширеного пошуку, ви можете виділити частину форми пошуку в окремий файл шаблону та включити його до [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Але задля простоти цього посібника я включаю все в один файл шаблону.

Сама форма має мати метод GET, а дія має вказувати на сторінку, на якій ми перебуваємо. Для цього ми отримуємо доступ до глобального $postоб’єкта та отримуємо з нього постійне посилання. Наприкінці ми додаємо кнопку надсилання, яка надсилає форму.

До невпорядкованого списку ми додамо відповідний вхід для кожного з наших можливих параметрів пошуку. Налаштуйте HTML і параметри пошуку відповідно до ваших потреб:

Зверніть увагу на nameатрибути; це те, що з’явиться в URL-адресі після надсилання форми. Вони повинні відповідати визначеним query_varsнами get_query_var()раніше!

Наведений вище код починається з візуалізації введення тексту для загального текстового пошуку. Ми встановлюємо valueпопередньо шукану змінну, яку ми отримали за допомогою get_query_var(). Це гарантує, що введені дані не будуть очищені після того, як ми здійснимо пошук.

Наступний параметр — спадне меню жанру з нашої спеціальної таксономії. Щоб відобразити це, ми використовуємо функцію [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Перегляньте сторінку документації, щоб зрозуміти, чому ми додаємо всі ці параметри, щоб налаштувати спадне меню відповідно до наших потреб. Важливо, щоб для параметра taxonomyбуло встановлено нашу спеціальну таксономію, nameатрибут був правильним і мав значення selectedзмінної, яку шукали раніше. Ми також встановлюємо значення термінів як їхні слаги замість ідентифікаторів термінів. Краще виглядає ?book-category=fictionзамість ?book-category=42. Ми також активуємо опцію «немає», щоб додати опцію «Будь-який жанр».

Після цього ми виконуємо ще один текстовий ввід для пошуку автора, введення номера для року видання, введення тексту для номера ISBN і, нарешті, прапорець, який за замовчуванням не встановлено, щоб включити книги, яких немає в наявності.

3 Скиньте wp_query

Наступним кроком є ​​невеликий хак, щоб переконатися, що розбивка на сторінки працює для нашого спеціального запиту. Ми просто зберігаємо струм $wp_queryу деякій змінній, а потім встановлюємо для нього значення null. Пізніше, на кроці 6, ми скинемо його зі $tmp_wpqueryзмінної.

$tmp_wpquery = $wp_query; $wp_query = null;

4 Налаштуйте аргументи та запустіть настроюваний запит

У цій частині йдеться про виконання нового запиту. Ми починаємо з налаштування найпростіших аргументів, а потім ми умовно додаємо параметри залежно від того, що було знайдено в попередньо шуканих змінних (з наших get_query_var()s).

Наведений вище код в основному створює WP_Queryз параметрами. Сторінка документації для WP_Queryє чудовим ресурсом для з’ясування того, як створити запит.

Найперші аргументи гарантують, що ми надсилаємо запити лише книгам і що ми правильно інформуємо про те, на якій сторінці ми зараз перебуваємо – із pagedзмінної, яку ми отримали раніше. Кількість повідомлень на сторінці залежить від вас, я просто встановив 20.

Зауважте, що додавання «compare» до «LIKE» змусить WordPress шукати все, що містить вказаний рядок. Я не додав це до пошуку ISBN, оскільки для цього поля я хочу, щоб воно знаходило результати, які ідеально збігаються.

Важливо це в кінці, коли ми фактично виконуємо запит і призначаємо цей запит wp_queryзмінній.

5 Перегляньте результати запиту та виведіть розбивку на сторінки

Цей крок дуже простий. Все, що нам потрібно, це стандартний цикл, і для кожного ми візуалізуємо публікацію книги, як хочемо. Ця частина повністю залежить від вас.

Наведений нижче код показує базовий приклад циклічного перегляду результатів із викликом get_template_part()для кожної публікації. Після того, як цикл the_posts_pagination()використовується для відтворення посилань на сторінки. Якщо запит не повернув жодної публікації, відображається простий абзац із текстом.

Налаштуйте HTML і вихід відповідно до ваших потреб. Наведений вище код очікує файл шаблону в темі, названій content-book.phpдля відтворення однієї книги в циклі. Я не буду показувати вам, як відтворювати кожну публікацію, оскільки це те, що ви, швидше за все, вже контролюєте.

6 Скиньте wp_query до попереднього стану

Останнім кроком є ​​скидання wp_queryоб’єкта до того, що ми зберегли раніше на кроці 3. Ми встановлюємо його на nullперше, щоб гарантувати його скидання.

$wp_query = null; $wp_query = $tmp_wpquery;

Висновок і кінцевий результат

І це було все! Тепер у вас має бути повнофункціональний шаблон розширеного користувацького пошуку. Сподіваюся, це трохи допомогло вам – код написаний якомога загальнішим, щоб вам було легше адаптуватися до ваших потреб. Можливо, вам потрібні різні типи параметрів, або ваш спеціальний тип публікації призначений для фільмів чи чогось іншого!

З деяким базовим стилем це легко може виглядати приблизно так:

Як створити спеціальний шаблон розширеного пошуку в WordPress

Ось остаточний код; деталь і functions.phpшаблон:

Джерело запису: awhitepixel.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі