✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Jak utworzyć niestandardowy szablon wyszukiwania zaawansowanego w WordPress

21

Ten przewodnik jest dla tych, którzy mają niestandardowy typ posta (CPT) i chcą mieć stronę wyszukiwania zaawansowanego, która wyszukuje wyniki w ramach tego CPT. W formularzu wyszukiwania możesz ustawić różne dane wejściowe do wyszukiwania w różnych polach; tytuł posta, treść posta, dowolny rodzaj niestandardowej meta lub według niestandardowej taksonomii.

W tym poście założymy, że mamy niestandardowy typ wpisu dla książek, dołączoną niestandardową taksonomię dla gatunku książki i kilka niestandardowych meta; autor, rok wydania, numer ISBN i pole wyboru, czy książka jest w magazynie. Niestandardowy typ i parametry postów zależą wyłącznie od Ciebie, aby dopasować je do Twoich potrzeb, poniższy kod po prostu spróbuje objąć większość podstaw.

Co zrobimy

Stworzymy niestandardowy typ postu dla książek i dołączoną do niego niestandardową hierarchiczną taksonomię dla gatunku. Ponadto każda książka ma niestandardowe pola na autora (autorów), rok wydania, numer ISBN i pole wyboru, czy uwzględnić książki, których nie ma w magazynie. Jeśli chodzi o samą stronę wyszukiwania, stworzymy szablon strony, w którym będzie się znajdowała większość naszego kodu. Strona rozpocznie się od renderowania niestandardowego formularza na początku; pokazując wszystkie możliwe parametry do filtrowania wyników. Pod nim wszystkie wyniki książek pojawią się na liście. Decydujemy o liczbie wyników na stronie i dodajemy paginację na dole, jeśli liczba ta przekracza.

Oto możliwe parametry filtra, które stworzymy dla naszego szablonu wyszukiwania zaawansowanego:

  • Wprowadzanie tekstu do wyszukiwania dowolnego ciągu w tytule i treści posta.
  • Menu do wyboru gatunku. Pozwala wybrać termin lub pozostawić go na „Dowolny".
  • Dane wejściowe do wpisania nazwiska autora, które wyszukuje w niestandardowej meta. Luźne dopasowanie, co oznacza wpisanie „Znaku”, zwróci wszystkich autorów, których nazwisko jest lub zawiera „Znak”.
  • Wprowadzanie liczb do wpisania roku publikacji książki, które przeszukuje się w niestandardowej meta. Dopasowanie luźne, co oznacza wpisanie np. „20″, będzie pasować do dowolnej książki wydanej w 1920 r. lub dowolnym roku zaczynającym się od 20.
  • Dane wejściowe do wpisania ISBN (międzynarodowy identyfikator książki ), który wyszukuje w niestandardowej meta. Zwraca tylko dokładne dopasowania.
  • Pole wyboru, czy uwzględnić książki, których nie ma w magazynie, kolejna niestandardowa meta. Domyślnie opcja ta nie jest zaznaczona, co oznacza, że ​​wyniki pokazują tylko książki, które są w magazynie.

Formularz jest skonfigurowany do korzystania z metody GET, co oznacza, że ​​wyszukiwane parametry zostaną dołączone do strony w adresie URL w postaci „ ?book-search=world&year-published=2016&book-author=mark“. Inną opcją, jeśli chcesz uniknąć „brzydkich adresów URL”, jest użycie JavaScript i AJAX. Ale są z tym pewne wady. Przede wszystkim nie będzie można dodać wyszukiwania do zakładek z określonymi parametrami wyszukiwania „wstępnie wypełnionymi”. Wyobraź sobie, że w innym miejscu w swojej witrynie chcesz umieścić link bezpośrednio do Twojej strony wyszukiwania niestandardowego określonego autora. Możesz wtedy sprawić, że link przejdzie do Twojej strony wyszukiwania, dołączyć „ ?author=mark“, a kliknięcie linku będzie prowadzić bezpośrednio do wyników dla tego autora. Nie jest to możliwe do osiągnięcia z AJAX.

Parametry wyszukiwania wzajemnie się wykluczają. Oznacza to, że połączenie np. roku „2011″ i autora „Jakiś facet” zwróci tylko książki pasujące do OBU tych. Jeśli określimy również „zabawny” w ogólnym wyszukiwaniu, otrzymamy tylko zwroty, które pasują do wszystkich tych trzech. Powiedziane innymi słowami; użyjemy logiki AND. Jest to najczęstsza metoda filtrowania wyników wyszukiwania.

Ten samouczek nie będzie zawierał stylizacji, więc ta część zależy od Ciebie. Poniżej znajduje się przykład tego, jak może to wyglądać przy podstawowej stylizacji.

Jak utworzyć niestandardowy szablon wyszukiwania zaawansowanego w WordPress

Uwaga o paginacji z niestandardowym zapytaniem

Jeśli chcesz podzielić na strony niestandardowe zapytanie na jednej stronie, musisz pamiętać o kilku rzeczach. Podział na strony zapytania można wygenerować za pomocą funkcji WordPressa [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)()lub dwóch [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()i [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Są one jednak zakodowane do pracy z wp_queryobiektem globalnym (którym dla szablonu strony jest sama strona), a nie z zapytaniem niestandardowym.

Istnieje kilka obejść, takich jak samodzielne pisanie funkcji stronicowania. Możesz też użyć akcji pre_get_postsi manipulować wp_queryobiektem. Niestety ta metoda jest za późno, aby wpłynąć na funkcje stronicowania. Inną alternatywą jest całkowite pominięcie paginacji i po prostu pokazanie wszystkich postów. Może to być opcja, jeśli nie masz wielu postów, ale jeśli tworzysz zaawansowany niestandardowy szablon wyszukiwania – zakładam, że masz sporo postów.

To, co zrobimy w tym przewodniku, to rodzaj „hackowej” metody. W szablonie strony zastąpimy wp_queryobiekt naszym niestandardowym zapytaniem, aby funkcje pętli i paginacji działały zgodnie z oczekiwaniami. Ta metoda jest tym, co odniosłem największy sukces.

Bez zbędnych ceregieli zacznijmy kodować!

Konfigurowanie niestandardowych typów postów, taksonomii i pól meta

Pierwszym krokiem jest zdefiniowanie niestandardowego typu posta, dla którego chcemy utworzyć zaawansowany szablon wyszukiwania. Jeśli masz już skonfigurowany niestandardowy typ postu lub chcesz go zaimplementować dla postów lub stron, możesz przejść od razu do następnej części.

Definiujemy niestandardowy typ posta bookz hierarchiczną taksonomią niestandardową book_category. Nie będę tutaj szczegółowo wyjaśniał, jak tworzyć niestandardowe typy postów i taksonomie. Jeśli chcesz dowiedzieć się więcej, mam post szczegółowo na ten temat.

Umieść ten kod w dowolnym miejscu w kodzie motywu functions.phplub wtyczki:

Spowoduje to powstanie niestandardowego typu posta z dołączoną do niego taksonomią w admin.

Konfiguracja niestandardowej meta postu zależy od Ciebie – albo obsłuż ją ręcznie, [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()albo użyj wtyczki Advanced Custom Fields (ACF), która jest idealna do tego rodzaju pracy. Użyję ACF, aby programowo skonfigurować pola, na przykład:

Oczywiście możesz skonfigurować pola ACF za pomocą GUI administratora ACF. Istnieje jednak kilka korzyści z dodawania ich za pomocą kodu. Na przykład upewniając się, że zachowujesz te same pola, gdziekolwiek aktywujesz swój motyw lub wtyczkę. Jeśli ustawisz pola w admin, musisz pamiętać, aby je wyeksportować i zaimportować, jeśli zmienisz witrynę WordPress.

Proszę zwrócić uwagę na nazwy meta; np book_author., year_publishedi tak dalej. Odniesiesz się do nich podczas tworzenia zapytania niestandardowego w szablonie wyszukiwania zaawansowanego.

Z wtyczką ACF i powyższym kodem edycja pojedynczej książki wyglądałaby tak:

Jak utworzyć niestandardowy szablon wyszukiwania zaawansowanego w WordPress

Dzięki temu wszyscy jesteśmy dobrzy, aby tworzyć tyle postów o książkach, ile chcemy. Następnym krokiem jest stworzenie szablonu strony dla naszego wyszukiwania.

Tworzenie szablonu strony

Utwórzmy szablon strony, w którym umieścimy nasz szablon wyszukiwania zaawansowanego. Utwórz kopię swojego motywu single.phplub page.phpzmień jego nazwę na na przykład template-booksearch.php. Kod HTML zależy od Ciebie, ale powodem, dla którego tworzymy kopię pojedynczego lub strony, jest prawdopodobnie najbliższy szablon pod względem układu.

Na samej górze szablonu strony oznaczamy, że jest to szablon strony, pisząc „Nazwa szablonu” i jego nazwę w bloku komentarzy. Dzięki temu upewnimy się, że możemy wybrać szablon strony podczas edycji strony.

Sekcje, które musimy zakodować w naszym szablonie, są następujące, w tej kolejności:

  1. Zapisz wszystkie zmienne wcześniej przesłane przez formularz, używając get_query_var(). Należy również przechowywać bieżącą stronę
  2. Wyrenderuj formularz wyszukiwania za pomocą przycisku przesyłania do przeprowadzenia wyszukiwania
  3. Zresetuj wp_queryobiekt
  4. Ustaw argumenty dla nowego WP_Query()w zależności od szukanych parametrów i uruchom zapytanie. Przypisz niestandardowe zapytanie do wp_queryobiektu
  5. Przeglądaj wyniki i wyświetlaj je. Renderuj również linki do stronicowania
  6. Zresetuj wp_queryobiekt z powrotem do tego, czym był

Powodem, dla którego musimy wcześniej przechowywać wszystkie wyszukiwane zmienne i bieżącą stronę, jest to, że te zmienne zostaną utracone po zresetowaniu wp_queryobiektu w kroku 3. Potrzebujemy również zmiennych dla naszego formularza wyszukiwania, aby wypełnić pola.

W swoim szablonie zdecyduj, gdzie chcesz wyprowadzić swoje niestandardowe wyszukiwanie, i zacznijmy od góry:

1 Pobierz wszystkie wyszukiwane zmienne

Otrzymujemy parametry GET (z adresu URL) za pomocą [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Na przykład; jeśli mamy parametr ?book-author=benjaminw adresie URL, użycie get_query_var('book-author')zwróci ciąg „ benjamin“. Pobranie wszystkich zmiennych można wykonać w ten sposób:

$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');

Ale są to wszystkie parametry niestandardowe, które nie są częścią standardowych parametrów GET WordPressa. WordPress zignoruje wszystkie nieznane parametry GET, więc wywołanie ich zawsze zwróci pusty ciąg. Musimy powiedzieć WordPressowi, aby zezwolił na każdy z tych parametrów GET. Robimy to poprzez filtrowanie query_vars. W swoim functions.php, dodaj również to:

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; });

Teraz nasze get_query_var()powinny być w stanie pobrać parametry GET. Jeśli nie są ustawione, zwraca pusty ciąg.

Musimy również pobrać bieżącą stronę, zanim zepsujemy wp_queryobiekt. Bieżąca strona to ukryty parametr GET o nazwie paged. Pobieramy go w taki sam sposób, jak nasze inne parametry GET, ale ustawimy go na domyślną wartość 1, jeśli jest pusty.

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

Uwaga: tak jak pagedw przypadku standardowego parametru WordPress, nie musimy dodawać pageddo query_varsfiltra.

2 Wyrenderuj formularz wyszukiwania

Formularz wyszukiwania będzie po prostu <form>przyciskiem z niezbędnymi danymi wejściowymi i przyciskiem przesyłania formularza. HTML zależy wyłącznie od Ciebie, w poniższym przykładzie dodaję dane wejściowe w postaci prostej listy. Nie będę zawierał żadnych stylizacji w tym samouczku, to zależy od Ciebie. Możesz wybrać styl formularza wyszukiwania tak, aby znajdował się u góry wyników lub z boku – pionowo w dół wraz z wynikami wyszukiwania.

Uwaga: Aby skrócić i zmodularyzować szablon wyszukiwania zaawansowanego, możesz wydzielić część formularza wyszukiwania w osobnym pliku szablonu i dołączyć go za pomocą [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Ale dla uproszczenia tego samouczka uwzględnię wszystko w jednym pliku szablonu.

Sam formularz musi być z metody GET, a akcja musi wskazywać na stronę, na której się znajdujemy. Aby to zrobić, uzyskujemy dostęp do $postobiektu globalnego i otrzymujemy z niego link bezpośredni. Na koniec dodajemy przycisk prześlij, który prześle formularz.

W ramach listy nieuporządkowanej dodamy odpowiednie dane wejściowe dla każdego z naszych możliwych parametrów wyszukiwania. Dostosuj kod HTML i parametry wyszukiwania do swoich potrzeb:

Proszę zwrócić uwagę na nameatrybuty; to one pojawią się w adresie URL po przesłaniu formularza. Muszą odpowiadać query_varsi get_query_var()zdefiniowaliśmy wcześniej!

Powyższy kod zaczyna się od renderowania danych wejściowych do ogólnego wyszukiwania tekstu. Ustawiamy na valuepoprzednio wyszukiwaną zmienną, którą pobraliśmy za pomocą get_query_var(). Gwarantuje to, że dane wejściowe nie zostaną wyczyszczone po przeprowadzeniu wyszukiwania.

Następnym parametrem jest lista gatunków z naszej niestandardowej taksonomii. Aby to wyrenderować, korzystamy z funkcji [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Zajrzyj na stronę dokumentacji, aby zobaczyć, dlaczego dodajemy te wszystkie parametry, aby dostosować menu rozwijane do naszych potrzeb. Ważne taxonomyjest, aby atrybut był ustawiony na naszą niestandardową taksonomię, nameatrybut był poprawny i selectedbył ustawiony na wartość poprzednio wyszukiwanej zmiennej. Ustawiamy również wartości terminów jako ich slugi zamiast identyfikatorów terminów. Wygląda lepiej z ?book-category=fictionzamiast ?book-category=42. Aktywujemy również opcję „brak”, aby dodać opcję „Dowolny gatunek”.

Następnie renderujemy kolejny tekst w celu wyszukania autora, wpis liczby dla roku publikacji, wpis tekstu dla numeru ISBN i na koniec pole wyboru, które jest domyślnie niezaznaczone, aby uwzględnić książki niedostępne.

3 Zresetuj wp_query

Następnym krokiem jest mały hack, aby upewnić się, że podział na strony działa dla naszego niestandardowego zapytania. Po prostu przechowujemy prąd $wp_queryw jakiejś zmiennej, a następnie ustawiamy ją na null. Później, w kroku 6, zresetujemy go ze $tmp_wpqueryzmiennej.

$tmp_wpquery = $wp_query; $wp_query = null;

4 Skonfiguruj argumenty i uruchom niestandardowe zapytanie

Ta część dotyczy wykonania nowego zapytania. Zaczynamy od ustawienia najbardziej podstawowych argumentów, a następnie warunkowo dodajemy parametry w zależności od tego, co zostało znalezione we wcześniej wyszukiwanych zmiennych (z naszych get_query_var()).

Powyższy kod w zasadzie buduje WP_Queryz parametrami. Strona dokumentacji dla WP_Queryjest doskonałym źródłem informacji, jak zbudować zapytanie.

Już pierwsze argumenty dają pewność, że odpytujemy tylko książki i poprawnie informujemy o tym, na której stronie aktualnie się znajdujemy – ze pagedzmiennej, którą pobraliśmy wcześniej. Liczba postów na stronie zależy od Ciebie, po prostu ustawiłem ją na 20.

Pamiętaj, że dodanie „ compare” do „ LIKE” spowoduje, że WordPress wyszuka wszystko, co zawiera podany ciąg. Nie dodałem tego do wyszukiwania ISBN, ponieważ dla tego pola chcę znaleźć wyniki, które pasują idealnie.

Ważna rzecz jest na samym końcu, kiedy faktycznie wykonujemy zapytanie i przypisujemy je do wp_queryzmiennej.

5 Przejrzyj wyniki zapytania i wyrenderuj paginację

Ten krok jest naprawdę łatwy. Wszystko, czego potrzebujemy, to standardowa pętla i dla każdego renderujemy post książki w dowolny sposób. Ta część zależy wyłącznie od Ciebie.

Poniższy kod pokazuje podstawowy przykład pętli wyników, wywoływania get_template_part()każdego posta. Po użyciu pętli the_posts_pagination()do renderowania linków stronicowania. Jeśli zapytanie nie zwróciło żadnych postów, wyświetlany jest prosty akapit z tekstem.

Dostosuj kod HTML i dane wyjściowe do swoich potrzeb. Powyższy kod oczekuje pliku szablonu w motywie nazwanym content-book.phpdo renderowania pojedynczej książki w pętli. Nie pokażę Ci, jak renderować każdy post, ponieważ jest to coś, nad czym najprawdopodobniej masz już kontrolę.

6 Zresetuj wp_query z powrotem do tego, co było

Ostatnim krokiem jest zresetowanie wp_queryobiektu do tego, co zapisaliśmy wcześniej w kroku 3. Ustawiliśmy go na nullpierwszy, aby upewnić się, że zostanie zresetowany.

$wp_query = null; $wp_query = $tmp_wpquery;

Wniosek i wynik końcowy

I to było to! Powinieneś mieć teraz w pełni funkcjonalny zaawansowany szablon wyszukiwania niestandardowego. Mam nadzieję, że to ci pomogło – kod został napisany tak ogólnie, jak to tylko możliwe, aby ułatwić ci dostosowanie się do twoich potrzeb. Być może potrzebujesz różnych typów parametrów lub Twój niestandardowy typ postu dotyczy filmów lub czegoś innego!

Przy podstawowej stylizacji może wyglądać mniej więcej tak:

Jak utworzyć niestandardowy szablon wyszukiwania zaawansowanego w WordPress

Oto ostateczny kod; część functions.phpi szablon:

Źródło nagrywania: awhitepixel.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów