Chcesz dodać zaawansowane funkcje wyszukiwania bez zależności od wtyczek lub motywów innych firm? Zbuduj własną zaawansowaną wtyczkę wyszukiwania WordPress z obsługą autosuggest, niestandardowych typów postów, taksonomii, niestandardowych pól i buforowania od podstaw.

W tym artykule pokażę, jak zbudować wtyczkę zorientowaną obiektowo, aby dodać zaawansowany formularz wyszukiwania oparty na shortcode, który można filtrować za pomocą niestandardowych typów postów (CPT), niestandardowych taksonomii, a także niestandardowych metadanych utworzonych za pomocą zaawansowanych pól kontrolnych (ACF). Formularz wyszukiwania będzie również wyposażony w AJAX zasilany autosuggest i dobrze wykorzystać WordPress przejścia do cache wyników.

Podczas gdy DARMOWE wtyczki są popularnym sposobem na dodanie większej funkcjonalności, często mają własny zestaw problemów. I jest tak wiele czynników, które należy wziąć pod uwagę, aby uzyskać tę kombinację dobrze. Czasami opracowanie własnej wtyczki dla obszarów, które wymagają bardziej dopracowanego podejścia, może okazać się znacznie bardziej korzystne w większym systemie rzeczy. Pozwoli to również na większą kontrolę nad użytecznością, wydajnością i bezpieczeństwem aplikacji.

Uwaga: Ten artykuł jest przeznaczony dla średnio-zaawansowanych programistów WordPress. Zakłada, że masz praktyczną wiedzę o PHP, JavaScript, pętli WordPress, Przejściach i interfejsie API wtyczek WordPress. Jeśli chcesz odświeżyć, polecam zapoznanie się z poniższymi:

  • Tworzenie niestandardowych treści w WordPress: taksonomie i pola
  • Rozwój WordPress dla średnio zaawansowanych użytkowników: budowanie wtyczek
  • Zaawansowany Rozwój WordPress: Praca Z Przejściami
  • Zaawansowany rozwój WordPress: Wprowadzenie do programowania obiektowego

W tym artykule przygotowałem niestandardową wtyczkę WordPress, która dodaje formularz wyszukiwania z włączoną funkcją autosuggest do dowolnej strony WordPress za pomocą krótkiego kodu. Umożliwia również dostrojenie wyników wyszukiwania do jednego lub wielu niestandardowych typów wpisów i wyświetla je w układzie siatki flexbox. Możesz pobrać moją wtyczkę wyszukiwania stąd, aby śledzić wraz z artykułem.

W dalszej części artykułu rozszerzę tę samą wtyczkę i dodam złożone funkcje wyszukiwania, takie jak filtrowanie w wielu taksonomiach i niestandardowych polach dla fikcyjnej biblioteki wideo, ale przykład można łatwo rozszerzyć na dowolny scenariusz, taki jak wyszukiwanie produktów lub nawet wyszukiwanie fasetowane.

CPT i ACFs dodają ogromną moc i funkcjonalność do WordPressa i są dość powszechne w każdym indywidualnym projekcie programistycznym. Moim celem jest pomóc Ci zintegrować kilka takich zaawansowanych funkcji WordPress, aby grać razem w aplikacji w świecie rzeczywistym. Więc zaczynajmy!

Uwaga: W dalszej części artykułu i w całym Kodeksie termin Typ Postu odnosi się do domyślnego Posty oraz Strony typy poczty, jak również wszelkie zarejestrowane Niestandardowe Typy Postów.

Przepływ kontroli niestandardowej wtyczki wyszukiwania

Zanim zagłębię się w kod, oto widok na wysokim poziomie, jak wtyczka działa za kulisami. Wyszukiwarka wtyczki uruchamia się, gdy użytkownik wprowadzi słowa kluczowe w pasku wyszukiwania lub gdy formularz wyszukiwania zostanie przesłany. A potem wiele zależy od stanu przejściowego.

advanced-search-plugin-flow-of-control
Przepływ kontroli niestandardowej wtyczki wyszukiwania

Zauważ, że nie tylko przekazuję buforowane tytuły postów za pośrednictwem wp_localize_script ale także buforowanie danych lokalnie w JavaScript. Dzieje się tak dlatego, że autosuggest może mieć ogromny wpływ na wydajność, jeśli żądanie AJAX jest wysyłane za każdym razem, gdy wprowadzany jest klucz wyszukiwania.

advanced-search-plugin-delete-transients
Sates, w których skreśla się dane przejściowe

W przypadku obszaru wrażliwego na zasoby, takiego jak wyszukiwanie aplikacji, skupiłem moją implementację wokół następujących pomysłów:

  • Buforuj tylko to, co jest potrzebne w obiekcie Transient, a nie cały obiekt WP_Query
  • Upewnij się, że jak mało AJAX wywołania są wykonane dla autosuggest
  • Upewnij się, że urządzenie przejściowe nie zawiera przestarzałych informacji
  • Podaj ustawienia, aby kontrolować, które typy postów będą uwzględniane w wyszukiwaniu

Oczywiście jeden rozmiar nie będzie pasował do wszystkich, a pewna ilość poprawek będzie wymagana w zależności od złożoności Twojej aplikacji.

Przeanalizujmy strukturę wtyczki, aby uzyskać poczucie, co idzie gdzie.

Struktura wtyczki wyszukiwania zaawansowanego

Wtyczka wyszukiwania opiera się na moim własnym szablonie wtyczki, który jest forkiem oryginalnego projektu WordPress Plugin Boilerplate. Oto jak jest zorganizowany w backendzie:

  • inc / core/* – Podstawowa funkcjonalność wtyczki
  • inc / core / class-init.php – Rejestracja hooków dla menu administratora, shortcode, Ajax handler, Admin notices, skryptów i stylów
  • inc / admin / class-admin.php – Funkcjonalność dla obszaru ustawień wtyczki w panelu administracyjnym
  • inc / common / class-common.php – Funkcjonalność zapewniająca wyszukiwanie oparte na shortcode i Autosuggest Ajax handler
  • inc / common / views/* – Formularz wyszukiwania i wyniki wyszukiwania
  • inc / common / js/* – Autosuggest Handler
  • inc / common / css/* – CSS dla formularza wyszukiwania

Po aktywacji wtyczka dodaje Strona Opcji jako element menu podrzędnego do Ustawienia menu administracyjne. Zawiera listę zarejestrowanych niestandardowe typy postów wraz z domyślnym Posty oraz Strony typy postów jako opcje do uwzględnienia w wyszukiwaniu zaawansowanym.

advanced-search-plugin-settings
Strona ustawień wtyczki do wyboru typów postów

Nie będę wdawał się w szczegóły, ale żeby zobaczyć jak dodałem stronę admina, zajrzyj na define_admin_hooks() metoda inc / core / class-init.php oraz add_plugin_admin_menu() metoda inc / admin / class-admin.php. Znaczniki dla strony Ustawienia można znaleźć w inc / admin/views / html-NDS-advanced-search-admin-options.php.

Miejscem, w którym zaczyna robić się ciekawie jest inc / common / class-common.php. Wejście do niego następuje poprzez define_common_hooks() metoda w inc / core / class-init.php.

Ładowanie gist 0e584ae9450b1ab1b9b3c1d7d61c8b01

Zacznijmy od krótkiego kodu.

Shortcode, aby załadować niestandardowy formularz wyszukiwania

Na register_shortcodes() metoda inc / common / class-common.php dodaje shortcode [NDS-advanced-search] który służy do podłączenia niestandardowego formularza wyszukiwania.

Ładowanie gist 5e52011542082b940ae71b6eb0f500b8

Patrząc na powyższą istotę, zauważysz, że treść krótkiego kodu (tj. formularza wyszukiwania ) jest zwracana przez shortcode_nds_advanced_search() funkcja callback. Mogłem zrobić coś takiego.:

Ładowanie gist d41849a407c0dc49c79b25034a67f4d1

Jednak przyjęłam nieco inne podejście.

Zamiast bezpośrednio wyprowadzać znaczniki formularza wyszukiwania w shortcode callback, użyłem get_search_form filtr i get_search_form() funkcja ładowania formularza wyszukiwania.

Ładowanie gist 9ecd1b55fa3a31fa22379bdfe271de10

Zrobiłem to, aby umożliwić Ci większą kontrolę nad renderowaniem formularza wyszukiwania. Zobaczmy, jak to działa.

Hak filtra get_search_form i znacznik szablonu

Na get_search_form() tag szablonu to świetny sposób na przejęcie kontroli nad wyświetlaniem wyszukiwania WordPress. Najpierw sprawdza czy temat zawiera formularz wyszukiwania.php i ładuje zdefiniowane przez niego znaczniki; w przeciwnym razie ładuje wbudowany formularz wyszukiwania dostarczony przez WordPress.

Lub można całkowicie zastąpić formularz wyszukiwania za pomocą get_search_form hak filtrujący, w takim przypadku get_search_form() zwróci znaczniki zdefiniowane przez wywołanie zwrotne filtra.

Po przesłaniu domyślnego formularza wyszukiwania, WordPress przejmie i wyrenderuje wyniki wyszukiwania za pomocą Szukaj.php wzór, o ile spełnione są następujące warunki:

  • Formularz wyszukiwania robi Pobierz do strony głównej serwisu
  • Na nazwa atrybut wejściowego pola tekstowego nosi nazwę s

W moim przykładzie nie chcę, aby WordPress obsługiwał wyszukiwanie i zastąpiłem domyślny formularz za pomocą haka filtra: add_filter ('get_search_form', array ($this, 'advanced_search_form_markup' ) )

wordpress_get_search_form_filter_hook
Zawartość $form przed zastosowaniem filtru get_search_form

Tutaj wstrzymałem egzekucję, aby sprawdzić $formularz zmienna przekazywana przez filtr. Przechowuje formularz HTML dostarczony przez formularz wyszukiwania.php z dwudziestu szesnastu tematów, które zostaną zastąpione znacznikami mojego formularza wyszukiwania w inc / common/views / html-NDS-advanced-search-form.php.

Ładowanie gist e77c3df9fdc9f9e9f503aff73e3839c5

Ponieważ nie przestrzegam żadnej z powyższych zasad dotyczących działania formularza lub nazwy atrybutu wejściowego, WordPress nic nie zrobi. Jest to w porządku, ponieważ chcę przejąć pełną kontrolę nad wynikami wyszukiwania, a także załadować je na tej samej stronie, co shortcode.

custom search form with shortcode
Wczytywanie niestandardowego formularza wyszukiwania za pomocą krótkiego kodu

Zastosowanie niestandardowego formularza z get_search_form to decyzja czysto projektowa i możesz mieć na nią inne spojrzenie. Celowo utrzymałem domyślny formularz wyszukiwania i ten dostarczany przez wtyczkę oddzielnie. Zapewnia również, że formularz wyszukiwania używany przez motyw na pasku bocznym, nagłówku itp. nie ma wpływu na niestandardowy formularz wyszukiwania.

Obsługa Składania Formularzy

Formularz wyszukiwania wtyczki przesyła do tej samej strony co shortcode, a więc shortcode obsługuje również przesyłanie formularza.

Ładowanie gist fb8729a02e6a536685b707b9254db726

Jeśli z jakiegoś powodu chcesz obsłużyć dane formularza na innej stronie, zajrzyj do mojego artykułu na temat obsługi zgłoszeń formularzy w WordPress.

Zobaczmy teraz, jak wtyczka renderuje wyniki wyszukiwania.

Używanie WP_Query do odpytywania postów w typach postów i wyrażeniu wyszukiwania

Wyniki wyszukiwania są zbierane za pomocą niestandardowego WP_Query i renderowane przez inc / common/views / html-NDS-advanced-search-results.php.

Mój zwyczaj WP_Query przyjmuje następujące argumenty:

  • 's' = > $search_term – Gdzie $search_term jest słowem kluczowym do wyszukiwania
  • 'zdanie' = > true – Wykonaj pełne wyszukiwanie fraz
  • 'post_type' = > $post_types – Zawierać posty należące do $post_types który przechowuje typy postów określone w ustawieniach wtyczki
  • 'post _ _ in' = > $cached_post_ids – Wyszukiwanie tylko po identyfikatorach Post dostępnych w $cached_post_ids
  • 'no_found_rows' = > true – Przyspieszenie wykonywania zapytań przez nie liczenie ilości znalezionych wierszy

Na zdanie parametr spowoduje, że WP_Query zwróci posty, w których występuje pełne wyszukiwane hasło. To jest jak ścisłe wyszukiwanie i prawdopodobnie zmniejszy zestaw wyników. Może, ale nie musi, działać na Twoją korzyść i powinieneś dostosować go w oparciu o swoje wymagania. Na no_found_rows to kolejny parametr, który działa dla mnie, ponieważ nie potrzebuję paginacji w mojej pętli.

Korzystam również z post_ _ w parametr do dalszego ograniczenia wyszukiwania do postów należących do określonych identyfikatorów postów. Identyfikatory postów będą się różnić w zależności od wybranych typów postów i w miarę tworzenia nowych postów lub usuwania starych.

Ładowanie gist fd6a0ab49c878c07231dd15eb9325cea

Jeśli spojrzysz na SCHEMAT BLOKOWY na początku artykułu, zauważysz logikę warunkową do sprawdzania buforowanych postów w przejściach w gist powyżej.

Korzystanie z WordPress przejścia do postów Cache

Na get_transient() funkcja zwraca stan przejścia. Jeśli istnieje, zwraca tablicę zawierającą buforowane identyfikatory postów i tytuły postów dla wymaganych typów postów. Jeśli przejściówka wygaśnie lub nie istnieje lub zostanie usunięta podczas aktualizacji postu lub ustawień, zwróci false, oraz get_posts() będą wywoływane przez cache_posts_in_post_types() metoda.

Ładowanie gist 5183a85c67fc40917f1d416686b59ce3

Może być konieczne dostosowanie argumentów do get_posts() w oparciu o twoje wymagania, ponieważ kontroluje, które identyfikatory Post są buforowane.

Na cache_posts_in_post_types() metoda jest również używana przez funkcję obsługi autosuggest do buforowania tytułów postów. Jeśli nie zamierzasz używać autosuggest, możesz jeszcze bardziej przyspieszyć get_posts() pobierając tylko identyfikatory za pomocą pola zwrotne parametr.

advanced-search-results-flexbox
Niestandardowe wyniki wyszukiwania kwerend w układzie flexbox

Spójrzmy teraz na ostatni element układanki-wyszukiwanie autosuggest.

Dodawanie funkcji Autosuggest do formularza wyszukiwania

Skorzystałem z widżetu autouzupełniania interfejsu jQuery, aby zapewnić sugestie wyszukiwania, ponieważ jest już zawarty w WordPress. Istnieje jednak wiele innych zewnętrznych bibliotek, z których można również korzystać.

Na enqueue_scripts metoda inc / common / class-common.php zajmuje się ładowaniem wymaganego skryptu.

Ładowanie gist b8172aa19d803b36a30236612cff3de2

Jeśli buforowane tytuły postów są dostępne w trybie przejściowym, są one również udostępniane Autosugest JavaScript za pośrednictwem wp_localize_script funkcja. Pomaga to zminimalizować liczbę połączeń AJAX wykonanych do WordPress dla sugestii wyszukiwania.

Poniższy kod jest dość prymitywny, ale służy do obsługi autosuggest.

Ładowanie gist 38b541bf057403bf1c72aa3c3489995f

Oto kilka ważnych aspektów skryptu autosuggest:

  • Korzysta z jQuery.grep() aby filtrować tytuły postów. Dopasowanie można jeszcze bardziej udoskonalić za pomocą wyrażeń regularnych
  • Klucze wyszukiwania są ponownie buforowane w lokalnym obiekcie, aby zmniejszyć grep połączeń, ale można również skorzystać z HTML Web Storage API aby pamięć podręczna stała
  • Żądanie AJAX jest wykonywane tylko wtedy, gdy wp_localize_script przekazuje pustą wartość dla tytułów postów

Zobaczmy więc, jak żądanie AJAX jest obsługiwane.

Autosuggest Ajax Handler

Na akcja: "nds_advanced_search_autosuggest" właściwość żądania AJAX określa wp_ajax_{action} Hook WordPress do wykonania i umożliwia obsługę żądania AJAX po stronie serwera.

Ładowanie gist 344acc19008825b234d40116bc1bc8a3

Prowadzący pośrednio powołuje get_posts() przez cache_posts_in_post_types() które widziałeś wcześniej, a następnie wysyła tytuły postów jako odpowiedź AJAX za pomocą wp_send_json() funkcja.

advanced-search-autosuggest-in-action
Autosuggest dla niestandardowego wyszukiwania.

Zapewnienie, że dane w przejściach nie są przestarzałe

Ważne jest, aby usunąć przejściowe, Gdy posty należące do wymaganych typów postów są tworzone, aktualizowane itp. Na delete_post_cache_for_post_type() metoda Klasa-admin.php zajmuje się tym i jest wywoływany za pomocą transition_post_status akcja hak w define_common_hooks() z class-init.php.

Ładowanie gist 92ff6b3233882349eeef6c814e662736

Należy również pamiętać, że przeterminowane przejścia nie zaśmiecają bazy danych, ponieważ WordPress wyczyści je za każdym razem, gdy zostanie do niej odwołany.

Świetnie! Na tym etapie mamy w pełni funkcjonalną wtyczkę wyszukiwania zaawansowanego. Przejdźmy do następnego poziomu, wdrażając stronę wyszukiwania z niestandardowymi taksonomiami i zaawansowanymi niestandardowymi polami.

Case Study: implementacja niestandardowego wyszukiwania wideo za pomocą filtrów wyszukiwania

Bardziej zaawansowane wyszukiwanie zazwyczaj pozwala również użytkownikom na udoskonalenie wyszukiwania za pomocą filtrów. Możesz to łatwo zrobić, korzystając z metadanych postów, takich jak terminy taksonomiczne i pola niestandardowe dla filtrów wyszukiwania. O to mi chodzi.:

advanced-search-with-search-filters-cutomfields-taxonomies
Zaawansowane wyszukiwanie z filtrami wyszukiwania przy użyciu niestandardowych taksonomii i zaawansowanych niestandardowych pól

Użyłem zaawansowanych pól niestandardowych, aby dodać niestandardowe metadane dla niestandardowego typu postu wideo. Niektóre z nich są wyświetlane jako filtry wyszukiwania, Jak pokazano powyżej, a pozostałe są używane w wyświetlaniu wyników wyszukiwania.

custom-fields-with-acf
Niestandardowa meta dla niestandardowego typu postu wideo utworzonego za pomocą zaawansowanych pól niestandardowych

Dodałem również kilka niestandardowych taksonomii: typy wideo i lokalizacje wideo do niestandardowego typu postu. Terminy taksonomiczne są używane jako pola wyboru w filtrze wyszukiwania.

custom-taxonomies-for-cpt
Niestandardowe taksonomie dla niestandardowego typu postu wideo

Uwaga: Tutaj założyłem, że niestandardowe taksonomie i niestandardowe pola są zarejestrowane dla jednego typu post lub są udostępniane między wymaganymi typami postów. Założyłem również, że typy postów Nie używają wbudowanego post_tag oraz Kategoria Taksonomia.

Cały kod implementacji filtrów wyszukiwania można pobrać STĄD w celach informacyjnych.

Definiowanie struktury formularza-Dane

Dobrym pomysłem jest zdefiniowanie struktury formularza HTML przed dodaniem znaczników. Postanowiłem użyć tablicy asocjacyjnej do grupowania powiązanych informacji. Po przesłaniu formularza chciałem, aby Formularz-dane były dostępne w $_POST superglobal jak pokazano poniżej:

search-form-input-using-arrays
Przechwytywanie danych wejściowych formularza zapisanych w tablicy asocjacyjnej w shortcode callback

Jest to czysto preferencja kodowania, ponieważ pozwala mi przechwycić dane wejściowe formularza do mniejszej liczby zmiennych, które mogę łatwo zapętlić, ale sprawia, że formularz HTML jest bardziej złożony.

Zacznijmy więc od modyfikacji formularza wyszukiwania w inc / common/views / html-NDS-advanced-search-form.php aby dodać własne taksonomie jako filtry wyszukiwania.

Tworzenie dynamicznej listy pól wyboru przy użyciu niestandardowych taksonomii dla filtra wyszukiwania

Aby pobrać taksonomie związane z typem postu wideo, skorzystałem z get_object_taxonomies() funkcja z drugim parametrem ustawionym na obiekty. To dało mi dostęp do ślimaka, nazwy i etykiety taksonomii, których następnie użyłem do zebrania odpowiednich terminów z get_terms() funkcja jak pokazano poniżej:

Ładowanie gist 9b2256ea5b63f9af05519f137244b1c0

Na podstawie liczby zwracanych niestandardowych taksonomii i terminów, znaczniki HTML dla pól wyboru są dynamicznie tworzone w na pętla.

Odpytywanie postów za pomocą taksonomii będzie wymagało ustawienia tax_query parametr WP_Query.

Tworzenie dynamicznego tax_query do odpytywania postów za pomocą niestandardowych taksonomii

Na tax_query parametr pobiera tablicę tablic, gdzie każda wewnętrzna tablica reprezentuje taksonomię.

Tutaj tworzę dynamiczny tax_query na podstawie warunków wybranych przez użytkownika. Jeśli użytkownik wybierze terminy z wielu taksonomii w filtrze wyszukiwania, generowanych jest wiele tablic taksonomii wraz z Relacja parametr ustawiony na ‘ OR ‘ w tablicy zewnętrznej.

Ładowanie gist fe66e8acfc5c05b6f7d8886b9add44fb

Ponadto, tax_query dodaje się do WP_Query argumenty tylko wtedy, gdy użytkownik wybierze termin w polu wyboru filtr wyszukiwania.

Podobnie, zobaczmy, jak niestandardowe pola mogą być używane jako filtry wyszukiwania, aby jeszcze bardziej udoskonalić wyszukiwanie niestandardowe.

Tworzenie filtrów wyszukiwania przy użyciu niestandardowych metadanych utworzonych za pomocą zaawansowanych pól niestandardowych

Pola niestandardowe dla typu postu wideo, które zostały wyświetlone powyżej, zostały utworzone przy użyciu typu pola grupy dostarczonego z wersją Premium ACF. Aby użyć niestandardowych pól języka i czasu trwania jako list rozwijanych, najpierw musiałem wyodrębnić ich unikalne wartości. Aby to osiągnąć, skorzystałem z funkcji ACF get_field_object() która zwraca unikalną tablicę w oparciu o Typ niestandardowego pola.

get-custom-fields-from-acf-group-field-type
Sprawdzanie obiektu danych zwracanego przez funkcję get_field_object() ACF

W tym przypadku debugger przydałby się bardzo, ponieważ identyfikacja wymaganego pola w dużych tablicach może być uciążliwa. Raz stwierdziłem, że potrzebne mi informacje są dostępne w wybory tablicy, mógłbym wygenerować znaczniki dla HTML wybierz element.

Ładowanie gist 42e915395dffcea55933655da861f331

Filtry wyszukiwania dla zakresu dat zostały utworzone za pomocą jQuery UI Datepicker. Nie będę wchodzić w szczegóły tego, ale możesz odwołać się do całego kodu dla filtrów wyszukiwania tutaj.

Odpytywanie postów za pomocą niestandardowych pól będzie wymagało ustawienia meta_query parametr WP_Query.

Tworzenie dynamicznego meta_query do odpytywania postów za pomocą niestandardowych pól

Podobne do tax_query na meta_query parametr może również przyjmować tablicę tablic, gdzie każda wewnętrzna tablica reprezentuje metadane w postaci par klucz / wartość. Tutaj, w oparciu o Typ niestandardowego pola wybranego przez użytkownika, generuję wewnętrzny meta_query array.

Wczytywanie gist 19ab4bcf48e8aa44aaba35cc80fd0fb5

W treści powyżej zauważysz, że używam porównaj "między" operator do odpytywania postów między zakresem dat. Aby to zadziałało, datę należy zapisać w RRRR-MM-DD, a także wymaga przeliczenia daty zwracanej przez jQuery UI Datepicker w tym samym formacie dla porównania do pracy.

Uwaga: W moim przykładzie, ponieważ taksonomie i pola niestandardowe nie są współdzielone między typami postów, tylko posty należące do typu post wideo zostaną zwrócone, jeśli zostaną użyte filtry wyszukiwania.

Dodawanie przycisków filtrów do wyników wyszukiwania

Aby poprawić użyteczność i wygodę korzystania z formularzy wyszukiwania, funkcje takie jak sortowanie i przyciski filtrowania są powszechnie stosowane w aplikacjach. Polecam zajrzeć do popularnej biblioteki Izotop.js to naprawdę dobrze sortuje i filtruje DOM.

Oto prosty przykład użycia przycisków HTML do dalszego filtrowania wyświetlanych wyników wyszukiwania za pomocą jQuery.

sub-filter-buttons-in-search-results
Dodawanie przycisków filtra podrzędnego do wyników wyszukiwania

Aby to zadziałało, skorzystałem z pętli WordPress, w której dodałem przyciski HTML w oparciu o wybrane terminy taksonomiczne, a także taksonomię każdego postu do Klasa atrybut jego pozycja listy kontener.

Ładowanie gist fe39c11fea5da4380fa8278247069231

Cały kod do renderowania wyników wyszukiwania z przyciskami filtrowania jest dostępny tutaj w celach informacyjnych.

Kod bonusowy: Ładowanie wyników wyszukiwania w modalnym Lightboxie

Moje studium przypadku wyszukiwania wideo nie będzie kompletne bez mechanizmu ładowania filmów zwróconych w wynikach wyszukiwania. Tutaj używam biblioteki jQuery Colorbox aby załadować filmy zwrócone przez wyszukiwanie w Modal okno dialogowe.

load-search-results-in-modal-dialog
Ładowanie filmów z wyników wyszukiwania w modalnym oknie dialogowym z Colorbox

Adres URL i napisy wideo są wyodrębniane z zaawansowanych pól niestandardowych, które widziałeś powyżej.

Ładowanie gist 9268620a803f9868e94916025756ee91

Użyłem HTML atrybuty danych aby wyświetlić kredyty w modalu, ale z takim podejściem, można załadować prawie wszystko, co chcesz.

Ładowanie gist 7f314fb6c6bc8ef1df1d255f8a7c0441

Wrapping Up

Omówiliśmy tu wiele spraw i mam nadzieję, że ten artykuł okazał się przydatny. Zapraszam do skorzystania z mojej wtyczki wyszukiwania i przykładu studium przypadku, aby zbudować własną niesamowitą stronę Zaawansowanego Wyszukiwania.

Czy korzystasz z niestandardowego wyszukiwania na swojej stronie? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…