Jak zrobić wyszukiwarkę na stronie WordPress z filtrowaniem wyników

Wprowadzenie – znaczenie zaawansowanej wyszukiwarki dla UX

75% użytkowników opuszcza stronę, jeśli nie może znaleźć tego, czego szuka w ciągu 15 sekund. W dobie informacji overload, intuicyjna i szybka wyszukiwarka to nie luksus, a absolutna konieczność dla każdej strony WordPress.

Standardowa wyszukiwarka WordPress często nie wystarcza, zwłaszcza na stronach z dużą ilością treści, sklepach internetowych czy portalach informacyjnych. Użytkownicy oczekują precyzyjnych wyników, filtrowania po kategoriach, tagach, cenach czy innych atrybutach – wszystko w czasie rzeczywistym.

W tym przewodniku przeprowadzę Cię przez proces tworzenia zaawansowanej wyszukiwarki WordPress z dynamicznym filtrowaniem, która znacząco poprawi doświadczenia użytkowników i zwiększy konwersje na Twojej stronie.

Ograniczenia domyślnej wyszukiwarki WordPress

Standardowa wyszukiwarka WordPress ma kilka poważnych ograniczeń, które mogą negatywnie wpływać na UX:

1. Brak filtrowania i facetingów

Domyślna wyszukiwarka nie oferuje możliwości filtrowania wyników po:

• Kategoriach i tagach
• Niestandardowych polach (custom fields)
• Typach treści (custom post types)
• Datach czy autorach

2. Niska precyzja wyników

Algorytm wyszukiwania WordPress opiera się na prostym dopasowaniu tekstowym, co prowadzi do:

• Nietrafnych wyników dla krótkich zapytań
• Braku uwzględniania synonimów
• Niewystarczającej relewancyjności

3. Brak funkcji AJAX

Każde wyszukiwanie wymaga pełnego przeładowania strony, co:

• Zwiększa czas oczekiwania
• Pogarsza doświadczenie użytkownika
• Zwiększa obciążenie serwera

4. Ograniczone indeksowanie

Standardowa wyszukiwarka nie indeksuje:

• Zawartości pól niestandardowych
• Komentarzy
• Dokumentów PDF i innych załączników

Wybór odpowiedniej wtyczki do zaawansowanego wyszukiwania

Wybór odpowiedniej wtyczki zależy od specyfiki Twojej strony i wymagań użytkowników. Przedstawiam najpopularniejsze rozwiązania:

1. SearchWP – najlepsza dla większości stron

Zalety:

• Precyzyjne wyniki dzięki zaawansowanemu algorytmowi
• Pełna kontrola nad wagą poszczególnych elementów
• Indeksowanie niestandardowych pól i taksonomii
• Integracja z WooCommerce i popularnymi wtyczkami
• Statystyki wyszukiwania i analiza zapytań

Cena: od $99 rocznie

2. Relevanssi – darmowa alternatywa

Zalety:

• Darmowa wersja z podstawowymi funkcjami
• Lepsze wyniki niż domyślna wyszukiwarka
• Możliwość indeksowania komentarzy
• Podświetlanie trafień w wynikach

Ograniczenia: brak zaawansowanych filtrów w wersji darmowej

3. Ajax Search Lite – dla sklepów WooCommerce

Zalety:

• Wyniki w czasie rzeczywistym podczas pisania
• Integracja z produktami WooCommerce
• Obrazy i ceny w wynikach wyszukiwania
• Filtrowanie po kategoriach produktów

4. Ivory Search – elastyczność i prostota

Zalety:

• Wiele formularzy wyszukiwania z różnymi ustawieniami
• Wyszukiwanie w konkretnych typach treści
• Wykluczanie określonych stron z wyników
• Integracja z page builderami

Rekomendacja:

Dla większości stron biznesowych i sklepów polecam SearchWP – oferuje najlepszy stosunek funkcji do ceny i znacznie poprawia UX.

Konfiguracja indeksowania treści i niestandardowych pól

Prawidłowe skonfigurowanie indeksowania to klucz do precyzyjnych wyników wyszukiwania.

Krok 1: Identyfikacja ważnych pól

Zanim zaczniesz konfigurację, zidentyfikuj wszystkie elementy, które mają być przeszukiwane:

• Tytuły i treść stron/postów
• Pola niestandardowe (ceny, specyfikacje, lokalizacje)
• Kategorie, tagi i niestandardowe taksonomie
• Autorzy i daty publikacji
• Załączniki i dokumenty

Krok 2: Konfiguracja wag w SearchWP

W SearchWP możesz przypisać różne wagi poszczególnym elementom:

Przykładowa konfiguracja dla sklepu:

• Tytuł produktu: 500 punktów
• Kategoria produktu: 300 punktów
• Opis produktu: 200 punktów
• Atrybuty produktu: 150 punktów
• Tagi: 100 punktów

Krok 3: Indeksowanie pól niestandardowych

Dodaj pola niestandardowe do indeksu:

1. Przejdź do SearchWP → Settings → Sources
2. Wybierz odpowiedni typ treści
3. Kliknij Add Custom Field
4. Wprowadź nazwę pola i przypisz wagę
5. Zapisz zmiany i przebuduj indeks

Krok 4: Wykluczanie nieistotnych treści

Zwiększ precyzję wyników, wykluczając:

• Strony administracyjne
• Posty w statusie szkicu
• Strony z hasłami
• Nieaktualne treści

Krok 5: Regularne przebudowywanie indeksu

Skonfiguruj automatyczne przebudowywanie indeksu:

• Co godzinę dla aktywnych sklepów
• Raz dziennie dla blogów i stron firmowych
• Ręcznie po dodaniu wielu nowych treści

Tworzenie formularza wyszukiwania z filtrami

Intuicyjny formularz z filtrami to serce zaawansowanej wyszukiwarki.

Projektowanie interfejsu filtrów

1. Filtry kaskadowe

Zaimplementuj filtry, które zależą od siebie:

• Wybór kategorii → podkategorie
• Wybór marki → modele produktów
• Wybór lokalizacji → dostępne usługi

2. Filtry zakresowe

Dla wartości numerycznych użyj suwaków:

• Cena: od-do
• Data publikacji: ostatnie 7/30/90 dni
• Ocena: 1-5 gwiazdek

3. Filtry wielokrotnego wyboru

Pozwól użytkownikom wybrać wiele opcji:

• Checkboxy dla kategorii
• Tagi z autouzupełnianiem
• Atrybuty produktów

Implementacja formularza HTML

Struktura podstawowego formularza:

Formularz wyszukiwania powinien zawierać:

• Pole tekstowe do wpisywania zapytania z atrybutem name="s"
• Przycisk submit do wysłania formularza
• Sekcję filtrów z elementami select, input range i checkbox
• Wrapper na filtry z klasą filters-section
• Grupy filtrów dla kategorii, zakresu cen i tagów

Style CSS dla formularza

Podstawowe style dla responsywnego formularza:

Stylowanie formularza powinno obejmować:

• Kontener formularza z maksymalną szerokością 800px, wycentrowany z paddingiem 20px
• Wrapper inputa wyszukiwania jako flexbox z 10px odstępem
• Input zajmujący dostępną przestrzeń (flex: 1) z paddingiem 12px
• Sekcja filtrów jako CSS Grid z kolumnami auto-fit i minimalną szerokością 200px
• Etykiety z font-weight: 600 i marginesem dolnym 5px
• Inputy i selecty z 100% szerokością, paddingiem 8px i zaokrąglonymi rogami

Implementacja dynamicznego filtrowania z AJAX

Dynamiczne filtrowanie z AJAX znacząco poprawia doświadczenie użytkownika.

Krok 1: Przygotowanie endpointu AJAX

Stwórz funkcję w functions.php:

Funkcja obsługi AJAX powinna:

• Pobierać parametry zapytania z $_GET (query, category, price_min, price_max)
• Tworzyć tablicę argumentów dla WP_Query z post_type, post_status i parametrem wyszukiwania
• Dodawać tax_query jeśli wybrano kategorię
• Dodawać meta_query dla filtrowania po zakresie cenowym z operatorami >= i <=
• Wykonywać WP_Query i przygotowywać tablicę wyników z tytułem, linkiem, ceną i miniaturką
• Zwracać wyniki jako JSON przez wp_send_json()
• Być podpięta pod akcje wp_ajax i wp_ajax_nopriv

Krok 2: JavaScript dla dynamicznego wyszukiwania

Skrypt AJAX dla formularza:

JavaScript powinien realizować:

• Debouncing - opóźnienie 300ms przed wykonaniem wyszukiwania podczas pisania
• Nasłuchiwanie na zdarzenia change i keyup dla wszystkich inputów i selectów formularza
• Serializację danych formularza przez jQuery .serialize()
• Wywołanie AJAX GET do endpointu z akcją ajax_search
• Wyświetlanie loadera przed wysłaniem zapytania
• Funkcję displayResults() renderującą wyniki w siatce z obrazkiem, tytułem i ceną
• Obsługę braku wyników i błędów wyszukiwania

Krok 3: Optymalizacja wydajności AJAX

Techniki optymalizacyjne:

• Debouncing: opóźnij zapytania podczas pisania
• Caching: przechowuj wyniki popularnych zapytań
• Limitowanie: ogranicz liczbę wyników na stronę
• Lazy loading: ładuj więcej wyników podczas przewijania

Projektowanie strony wyników wyszukiwania

Strona wyników powinna być przejrzysta i ułatwiać użytkownikom znalezienie tego, czego szukają.

Struktura strony wyników

1. Nagłówek z informacjami

Nagłówek sekcji wyników powinien zawierać:

• Tytuł z frazą wyszukiwania użytkownika
• Informację o liczbie znalezionych wyników
• Opisowe teksty zamiast wykonywalnego kodu PHP
• Strukturę HTML z odpowiednimi klasami CSS

2. Aktywne filtry i opcje sortowania

Sekcja kontrolek wyszukiwania powinna zawierać:

• Sekcję z aktywnymi filtrami i możliwością ich usunięcia
• Menu rozwijane z opcjami sortowania (trafność, data, cena)
• Strukturę HTML z dwiema głównymi sekcjami: active-filters i sort-options
• Etykiety i elementy select z odpowiednimi wartościami

3. Układ wyników

Główny układ strony wyników powinien zawierać:

• Kontener główny z klasą search-layout
• Pasek boczny (aside) z rozbudowanymi filtrami
• Główną sekcję (main) z wynikami wyszukiwania
• Strukturę HTML5 z semantycznymi znacznikami

Projektowanie kart wyników

Dla produktów:

Karta produktu w wynikach powinna zawierać:

• Sekcję obrazu produktu z miniaturką i odznaką (np. "Nowość")
• Sekcję informacyjną z tytułem i linkiem do produktu
• Metadane produktu: kategorię i ocenę w gwiazdkach
• Cenę produktu (aktualną i poprzednią) z walutą
• Przycisk "Dodaj do koszyka" z odpowiednią klasą CSS
• Dynamiczne dane WordPress zamiast statycznych wartości

Dla artykułów blogowych:

Karta artykułu w wynikach powinna zawierać:

• Sekcję obrazu z miniaturką artykułu
• Sekcję treści z metadanymi (kategoria i data publikacji)
• Tytuł artykułu z linkiem do pełnej treści
• Skrócony fragment treści (ok. 20 słów)
• Link "Czytaj dalej" prowadzący do artykułu
• Dynamiczne dane WordPress pobierane przez odpowiednie funkcje

Strona bez wyników

Przyjazna strona 404 dla wyszukiwania:

Strona bez wyników powinna zawierać:

• Ikonę symbolizującą brak wyników wyszukiwania
• Komunikat o braku wyników dla danej frazy
• Listę sugestii co użytkownik może zrobić
• Sekcję z popularnymi wyszukiwaniami jako alternatywą
• Dynamiczne wyświetlanie frazy wyszukiwania użytkownika
• Przyjazne i pomocne teksty zamiast technicznych komunikatów

Optymalizacja wydajności dla dużych zbiorów danych

Szybkość wyszukiwania jest kluczowa dla UX, zwłaszcza na stronach z tysiącami produktów.

1. Optymalizacja bazy danych

Indeksowanie kluczowych pól:

Optymalizacja bazy danych SQL:

• Dodaj indeks do kolumn post_title i post_content w tabeli wp_posts
• Dodaj indeks do meta_key i meta_value w tabeli wp_postmeta
• Używaj zapytań ALTER TABLE ADD INDEX dla zwiększenia szybkości wyszukiwania

Optymalizacja zapytań:

W argumentach WP_Query stosuj:

• Limit wyników przez posts_per_page (np. 20 na stronę)
• Paginację przez parametr paged z get_query_var
• Pole 'fields' => 'ids' jeśli potrzebujesz tylko ID postów, nie pełnych obiektów

2. Caching wyników wyszukiwania

Implementacja cache:

Funkcja cache'owania wyników powinna:

• Tworzyć unikalny klucz cache z md5 hash zapytania
• Sprawdzać czy wyniki są w transient przez get_transient()
• Jeśli nie ma cache - wykonać WP_Query i zapisać wyniki
• Przechowywać tablicę z ID, tytułem i permalinkiem każdego wyniku
• Zapisywać cache na 1 godzinę (HOUR_IN_SECONDS) przez set_transient()
• Zwracać cache jeśli istnieje, unikając ponownego zapytania do bazy

3. Lazy loading i infinite scroll

Implementacja infinite scroll:

JavaScript dla nieskończonego przewijania:

• Zmienna loading zapobiegająca wielokrotnym jednoczesnym zapytaniom
• Licznik page śledzący aktualną stronę wyników
• Event listener na scroll sprawdzający czy użytkownik doscrollował 200px przed końcem
• Funkcja loadMoreResults() wykonująca AJAX POST z numerem strony
• Appendowanie nowych wyników do istniejącego kontenera
• Inkrementacja page i reset flagi loading po sukcesie

4. Optymalizacja serwera

Konfiguracja Redis dla cache:

W pliku wp-config.php zdefiniuj stałe:

• WP_REDIS_HOST ustawiony na '127.0.0.1' (localhost)
• WP_REDIS_PORT na standardowy port 6379
• WP_REDIS_DATABASE na 0 (domyślna baza)

CDN dla statycznych zasobów:

Funkcja przepisująca URL-e na CDN:

• Stwórz funkcję zastępującą domenę główną subdomeną CDN
• Użyj str_replace() do zamiany URL-i
• Podepnij pod filtr wp_get_attachment_url

Analiza zapytań użytkowników i optymalizacja

Regularna analiza zapytań pozwala ciągłe ulepszanie wyszukiwarki.

1. Śledzenie zapytań użytkowników

Zapisywanie zapytań do bazy:

Funkcja track_search_queries() powinna:

• Używać globalnego obiektu $wpdb do operacji na bazie
• Zapisywać do tabeli wp_search_queries pola: query, results_count, date, user_id, ip
• Używać $wpdb->insert() do wstawiania rekordu
• Być podpięta pod akcję 'wp' z warunkiem is_search()
• Pobierać zapytanie przez get_search_query() i liczbę wyników z $wp_query->found_posts

2. Analiza popularnych zapytań

Pobieranie statystyk:

Funkcja get_search_stats() zwraca:

• Tablicę z dwoma kluczami: 'popular' i 'no_results'
• Zapytanie SQL dla popularnych fraz: SELECT z COUNT, AVG i GROUP BY query
• Filtrowanie po dacie przez DATE_SUB z parametrem liczby dni
• Sortowanie DESC po liczbie wystąpień, LIMIT 20
• Osobne zapytanie dla fraz bez wyników (results_count = 0)
• Używanie $wpdb->prepare() dla bezpieczeństwa SQL

3. Optymalizacja na podstawie danych

Automatyczne sugestie:

Funkcja get_search_suggestions() powinna:

• Przyjmować częściowe zapytanie użytkownika
• Wykonywać SELECT DISTINCT z LIKE i wildcard %
• Filtrować tylko frazy, które zwróciły wyniki (results_count > 0)
• Sortować po popularności przez COUNT DESC
• Limitować do 10 najlepszych sugestii
• Zwracać tablicę sugerowanych fraz

Tworzenie aliasów dla popularnych zapytań:

System aliasów powinien:

• Mieć funkcję create_search_aliases() zwracającą tablicę mapowań (skrót => pełne słowo)
• Funkcję process_search_aliases() sprawdzającą czy zapytanie ma alias
• Zamieniać popularne skróty na pełne terminy (np. 'tel' na 'telefon')
• Być podpiętą pod filtr 'get_search_query'
• Działać bez względu na wielkość liter (strtolower)

4. Dashboard analityczny

Widget do panelu WordPress:

Dashboard widget powinien:

• Wywoływać get_search_stats(7) dla statystyk z ostatniego tygodnia
• Wyświetlać dwie sekcje: popularne zapytania i frazy bez wyników
• Dla każdej sekcji pokazywać listę z zapytaniem i liczbą wystąpień
• Być rejestrowany przez wp_add_dashboard_widget()
• Być podpięty pod akcję 'wp_dashboard_setup'
• Mieć unikalny ID i nazwę wyświetlaną w panelu

Podsumowanie – zaawansowane techniki i inspiracje

Stworzenie zaawansowanej wyszukiwarki WordPress to proces ciągłego doskonalenia. Pamiętaj o tych kluczowych zasadach:

Checklista optymalnej wyszukiwarki:

Funkcjonalność:

• Szybkie wyniki w czasie rzeczywistym (AJAX)
• Intuicyjne filtry i facetingi
• Precyzyjne wyniki z odpowiednim rankingiem
• Autouzupełnianie i sugestie
• Wyszukiwanie fonetyczne i synonimiczne

Wydajność:

• Czas odpowiedzi poniżej 200ms
• Skuteczne cache'owanie wyników
• Optymalizacja zapytań SQL
• Lazy loading dla dużych zbiorów

UX:

• Przejrzysta strona wyników
• Przyjazna strona bez wyników
• Możliwość sortowania i paginacji
• Responsywny design

Zaawansowane techniki do wdrożenia:

1. Wyszukiwanie semantyczne

Użyj API Google lub Elasticsearch do rozumienia intencji użytkownika:

• Analiza kontekstu zapytania
• Rozumienie synonimów i pokrewnych pojęć
• Personalizacja wyników na podstawie historii

2. Wyszukiwanie głosowe

Integracja z Web Speech API:

• Przycisk mikrofonu w formularzu
• Konwersja mowy na tekst
• Obsługa komend głosowych

3. Wyszukiwanie wizualne

Dla sklepów z produktami:

• Przesyłanie zdjęć do wyszukiwania
• Rozpoznawanie produktów po obrazie
• Podobne produkty wizualnie

4. AI w wyszukiwaniu

Użyj sztucznej inteligencji do:

• Personalizacji wyników
• Przewidywania intencji użytkownika
• Automatycznego tagowania treści

Najczęstsze błędy i jak ich unikać:

Błąd #1: Zbyt skomplikowany interfejs

Rozwiązanie: Użyj progresywnego odkrywania filtrów – podstawowe na początku, zaawansowane opcje chowane

Błąd #2: Brak optymalizacji wydajności

Rozwiązanie: Implementuj cache na każdym poziomie – zapytań, wyników i renderowania

Błąd #3: Ignorowanie analizy zapytań

Rozwiązanie: Regularnie analizuj logi wyszukiwania i optymalizuj na podstawie danych

Błąd #4: Brak testowania z użytkownikami

Rozwiązanie: Przeprowadź testy UX z realnymi użytkownikami przed wdrożeniem

Podsumowanie

Zaawansowana wyszukiwarka WordPress to potężne narzędzie, które może znacząco poprawić konwersje i zadowolenie użytkowników. Pamiętaj, że kluczem do sukcesu jest ciągłe doskonalenie na podstawie danych i potrzeb użytkowników.

Inwestycja w profesjonalną wyszukiwarkę zawsze się zwraca – szybsze znalezienie produktów to większa szansa na zakup, lepsze doświadczenia to lojalniejsi klienci.