Kod Własny Autosuggest Włączone Wyszukiwanie Zaawansowane WordPress Plugin

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.

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.

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.

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.

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.

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.:

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.:

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.

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.

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:

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:

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

Tagi:

• niestandardowe wyszukiwanie taksonomii
• wyszukiwanie niestandardowych typów postów
• Zaawansowane wyszukiwanie wordpress