Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak stworzyć wyszukiwanie z autouzupełnianiem na żywo w WordPress

Kiedy odwiedzający nie mogą znaleźć tego, czego szukają, nie zostają – klikają dalej, często na zawsze.

Domyślne wyszukiwanie w WordPress nie ułatwia sprawy. Jest powolne, nieporęczne i przestarzałe: wpisz słowo kluczowe, naciśnij Enter, poczekaj na przeładowanie całej strony… tylko po to, aby uzyskać wyniki, które mogą nawet nie być trafne.

Teraz wyobraź sobie przeciwieństwo… wyniki wyszukiwania pojawiające się natychmiast, w momencie, gdy odwiedzający zaczyna pisać. To magia wyszukiwania z autouzupełnianiem na żywo (znanego również jako wyszukiwanie Ajax). Jest nowoczesne, bezproblemowe i utrzymuje zaangażowanie ludzi na Twojej stronie.

W tym przewodniku dowiesz się dokładnie, jak dodać wyszukiwanie z autouzupełnianiem na żywo do WordPressa, dzięki czemu możesz dostarczać błyskawiczne wyniki, poprawić wrażenia użytkownika i sprawić, by odwiedzający dłużej przeglądali Twoją witrynę.

Jak stworzyć wyszukiwanie z autouzupełnianiem na żywo w WordPress

Dlaczego warto dodać wyszukiwanie z autouzupełnianiem na żywo w WordPressie?

Wyszukiwanie z autouzupełnianiem na żywo pomaga odwiedzającym szybciej znaleźć to, czego szukają na Twojej stronie, bez przeładowywania strony. Gdy użytkownicy wpisują tekst w pasku wyszukiwania, wyniki pojawiają się natychmiast w rozwijanym menu, dzięki czemu mogą kliknąć i przejść bezpośrednio do potrzebnych treści.

Ten rodzaj szybkiego, pomocnego doświadczenia sprawia, że ludzie dłużej pozostają na Twojej stronie WordPress. Nie muszą zgadywać właściwego słowa kluczowego ani czekać na powolną stronę wyników. I są mniej skłonni do trafienia w ślepy zaułek.

Niestety, wyszukiwanie w WordPress jest domyślnie dość ograniczone. Nie zawsze przeszukuje takie rzeczy jak szczegóły produktów czy niestandardowe typy postów i ma problemy z dokładnymi dopasowaniami.

Czasami pokazuje nawet stronę „nie znaleziono wyników”, nawet gdy treść istnieje.

Brak wyników dla zapytania w wyszukiwarce WordPress

Właśnie tutaj wyszukiwanie na żywo może być bardzo pomocne. Jest szczególnie przydatne w przypadku blogów, stron z wiadomościami i sklepów internetowych, gdzie odwiedzający chcą szybko znaleźć coś konkretnego.

Jeśli chcesz ułatwić ludziom odkrywanie Twoich najlepszych treści, dodanie wyszukiwania na żywo jest prostym i skutecznym sposobem na osiągnięcie tego celu.

Jak dodać wyszukiwanie z autouzupełnianiem na żywo w WordPress

Najłatwiejszym sposobem dodania wyszukiwania z autouzupełnianiem na żywo (Ajax) do Twojej witryny jest użycie wtyczki. W tym samouczku użyję darmowej wtyczki SearchWP Live Ajax Search, która jest jedną z najlepszych wtyczek wyszukiwania WordPress.

Działa od razu po wyjęciu z pudełka, automatycznie ulepszając wszelkie istniejące formularze wyszukiwania na Twojej stronie, takie jak ten w nagłówku lub pasku bocznym motywu. Oznacza to, że możesz natychmiast uzyskać sugestie wyszukiwania na żywo bez konieczności kodowania lub zmiany jakichkolwiek ustawień.

Wtyczka SearchWP Live Ajax WordPress

💡 Uwaga: Jeśli chcesz jeszcze bardziej dopracować swoje wyszukiwanie, polecam uaktualnienie do SearchWP Pro. Pozwala ona wybrać dokładnie, jakie treści mają być uwzględnione w wyszukiwaniu, w tym pola niestandardowe, taksonomie, produkty WooCommerce, zawartość PDF i inne.

Dowiedz się więcej o tej wtyczce w naszej szczegółowej recenzji SearchWP.

Teraz przeprowadzę Cię przez proces tworzenia wyszukiwania z autouzupełnianiem na żywo w WordPressie.

Oto szybki przegląd wszystkich rzeczy, które omówię:

Zacznijmy!

Najpierw musisz zainstalować i aktywować wtyczkę SearchWP Live Ajax Search plugin.

Możesz znaleźć tę wtyczkę bezpośrednio w swoim panelu WordPress, przechodząc do Wtyczki » Dodaj nową i wyszukując „SearchWP Live Ajax Search”.

Gdy znajdziesz wtyczkę w wynikach wyszukiwania, kliknij przycisk „Zainstaluj teraz”. Po zakończeniu instalacji kliknij „Aktywuj”, aby włączyć wtyczkę na swojej stronie.

Aktywacja wtyczki SearchWP Live Ajax Search

Szczegółowe instrukcje instalacji znajdziesz w naszym przewodniku krok po kroku na temat instalacji wtyczki WordPress.

Wtyczka jest całkowicie darmowa i opracowana przez ten sam zespół, który stoi za płatną wtyczką SearchWP. Działa niezależnie, więc nie musisz nic kupować, aby zacząć korzystać z funkcji wyszukiwania na żywo.

Po aktywacji, w obszarze administracyjnym WordPress pojawi się nowy element menu „SearchWP”. Użyjesz go do konfiguracji ustawień w następnym kroku.

Krok 2: Skonfiguruj podstawowe ustawienia wyszukiwania

Teraz, gdy wtyczka jest zainstalowana, musisz włączyć funkcję wyszukiwania na żywo.

Przejdź do SearchWP » Ustawienia w swoim panelu WordPress.

Menu Ustawienia w SearchWP

Na stronie ustawień zobaczysz kilka różnych opcji konfiguracji wyszukiwania.

Upewnij się, że jesteś w zakładce „Wyszukiwanie na żywo” i poszukaj przełącznika „Włącz wyszukiwanie na żywo” w górnej części strony.

Po prostu kliknij przełącznik, aby go włączyć, a następnie upewnij się, że klikniesz przycisk „Zapisz”, aby zachować swoje ustawienia.

Włączanie wyszukiwania na żywo w SearchWP

Po włączeniu wyszukiwanie Ajax na żywo automatycznie zacznie działać z istniejącymi formularzami wyszukiwania na Twojej stronie WordPress.

Wtyczka wykorzystuje inteligentne ustawienia domyślne, które świetnie sprawdzają się w przypadku różnych typów witryn od razu po instalacji. Domyślnie przeszukuje tytuły i treść postów, aby zapewnić trafne wyniki.

Krok 3: Dodaj pasek wyszukiwania na żywo do swojej witryny (opcjonalnie)

Wtyczka SearchWP Live Ajax Search automatycznie włącza wyszukiwanie na żywo w istniejących formularzach wyszukiwania w Twoim motywie WordPress.

Jednakże, możesz również chcieć dodać pasek wyszukiwania w nowej lokalizacji, takiej jak pasek boczny, stopka lub niestandardowa strona docelowa. Ten krok pokaże Ci, jak to zrobić.

Dodaj wyszukiwanie z autouzupełnianiem na żywo do obszarów gotowych na widżety

Aby dodać pole wyszukiwania do obszarów widgetów, takich jak pasek boczny lub stopka, musisz przejść do sekcji Wygląd » Widżety w swoim panelu administracyjnym WordPress.

Kliknij przycisk ‘+’ w obszarze widżetów, takim jak pasek boczny lub stopka. Następnie poszukaj widżetu wyszukiwania.

Dodawanie widżetu wyszukiwania

Po dodaniu możesz dostosować tekst zastępczy.

Na przykład, jeśli prowadzisz stronę informacyjną, możesz dostosować tytuł widżetu, dodając coś w stylu „Szukaj najnowszych historii” lub „Znajdź artykuły informacyjne”.

Lub możesz po prostu pozostawić ją jako „Wyszukaj”.

Dostosowywanie tekstu zastępczego w wyszukiwarce

Nie zapomnij kliknąć przycisku ‘Zaktualizuj’ aby zapisać zmiany. Pole wyszukiwania na żywo pojawi się teraz w obszarze widżetów.

Oto jak to wygląda na mojej stronie demonstracyjnej:

Podgląd paska wyszukiwania z autouzupełnianiem na żywo
Dodaj wyszukiwanie z autouzupełnianiem na żywo za pomocą edytora całego serwisu (FSE)

Jeśli używasz motywu opartego na blokach, który obsługuje Edytor Całej Witryny, możesz dodawać pola wyszukiwania do różnych części swojej witryny, takich jak nagłówek, pasek boczny i inne.

Najpierw przejdź do Wygląd » Edytor z panelu administratora WordPress.

Przejdź do edytora pełnej witryny

Spowoduje to uruchomienie Edytora Pełnej Witryny.

Następnie musisz otworzyć zakładkę „Szablony”.

Przełączenie się do zakładki Szablony

Stąd kliknij na szablon, który chcesz edytować, na przykład nagłówek lub szablon strony.

Dokładne opcje będą zależeć od używanego motywu, ale polecam wybranie szablonu nagłówka lub menu nawigacyjnego, aby pasek wyszukiwania pojawiał się na całej Twojej stronie.

Wybór szablonu do dodania funkcji wyszukiwania z autouzupełnianiem na żywo

Po kliknięciu szablonu zobaczysz edytor wizualny z blokami.

Kliknij przycisk „+”, aby dodać nowy blok, a następnie poszukaj „Wyszukiwanie” w narzędziu do wstawiania bloków.

Dodawanie bloku wyszukiwania w FSE

Możesz przesuwać blok wyszukiwania w górę i w dół do pożądanej lokalizacji w szablonie.

Stąd możesz dostosować wygląd bloku wyszukiwania za pomocą panelu ustawień bloku.

Na przykład, możesz dostosować tekst zastępczy.

Jeśli prowadzisz bloga WordPress, możesz użyć czegoś w stylu „Szukaj na blogu” lub „Znajdź pomocne artykuły”. Możesz też po prostu zostawić „Szukaj”.

Dostosowywanie bloku wyszukiwania

Możesz również dostosować styl paska wyszukiwania i opcje układu, aby dopasować je do projektu Twojej witryny.

Gdy będziesz zadowolony z wyglądu, kliknij przycisk ‘Zaktualizuj’ aby zapisać zmiany.

Podgląd paska wyszukiwania z autouzupełnianiem na żywo

Krok 4: Testowanie i rozwiązywanie problemów z wyszukiwaniem na żywo

Teraz czas przetestować nową funkcję wyszukiwania na żywo, aby upewnić się, że działa poprawnie.

Zalecam otwarcie swojej witryny w oknie incognito i wpisanie kilku znaków w pole wyszukiwania.

Jeśli wszystko działa, wyniki pojawią się natychmiast w rozwijanym menu. Oznacza to, że Ajax działa poprawnie.

Podgląd wyszukiwania na żywo

Dobrym pomysłem jest przetestowanie wyszukiwania na żywo na różnych urządzeniach, w tym na telefonie i tablecie, aby upewnić się, że jest przyjazne dla urządzeń mobilnych. Wypróbuj je również w wielu przeglądarkach, takich jak Chrome, Firefox i Safari, aby upewnić się, że wyniki na żywo pojawiają się konsekwentnie.

Jeśli wyszukiwanie na żywo nie wyświetla się lub nie działa zgodnie z oczekiwaniami, najczęstszymi przyczynami są problemy z pamięcią podręczną i konflikty wtyczek.

Twoja przeglądarka lub wtyczka do buforowania może przechowywać starą wersję plików Twojej witryny (wersję „buforowaną”), aby przyspieszyć ładowanie. Czasami może to uniemożliwić poprawne działanie nowego skryptu wyszukiwania na żywo.

Czyszczenie pamięci podręcznej WordPressa i pamięci podręcznej przeglądarki zapewnia, że Twoja strona ładuje najnowszą wersję swoich plików, co często rozwiązuje problem.

Dobrą wtyczką do tego celu jest WP Rocket. Jest przyjazna dla początkujących i pozwala na czyszczenie pamięci podręcznej, optymalizację skryptów i kontrolowanie sposobu ładowania plików w celu poprawy wydajności.

Wyczyść pamięć podręczną WP Rocket

Szczegółowe informacje znajdziesz w naszym przewodniku jak wyczyścić pamięć podręczną WordPress.

Jeśli to nie rozwiąże problemu, spróbuj dezaktywować inne wtyczki pojedynczo, aby sprawdzić konflikty. Pomoże to zidentyfikować, czy inna wtyczka zakłóca działanie wyszukiwania na żywo.

Aby uzyskać więcej wskazówek dotyczących rozwiązywania problemów, zapoznaj się z naszym przewodnikiem jak naprawić wyszukiwanie w WordPressie, które nie działa.

Dodatkowa wskazówka: Uaktualnij, aby uzyskać jeszcze inteligentniejsze wyszukiwanie (dopasowanie rozmyte)

Twoje nowe wyszukiwanie na żywo oferuje znacznie lepsze wrażenia użytkownika dla Twoich odwiedzających. Ale co się stanie, jeśli ktoś popełni literówkę? Domyślnie WordPress może nie zwrócić żadnych wyników dla „wordpres” zamiast „wordpress”.

Tutaj pojawia się wyszukiwanie rozmyte (fuzzy search), które jest potężną funkcją dostępną w płatnej wtyczce SearchWP plugin.

Wyszukiwanie rozmyte pomaga Twojej witrynie zrozumieć, czego szukają Twoi użytkownicy, nawet jeśli popełnią błędy w pisowni lub użyją częściowych słów.

Na przykład, jeśli ktoś szuka „mebli vntage”, witryna z wyszukiwaniem rozmytym nadal pokaże mu odpowiednie wyniki dla „mebli vintage”.

Przykład wyszukiwania rozmytego na stronie WordPress

Zapobiega to sytuacji, w której użytkownicy trafiają na martwy punkt bez wyników, i pomaga im znaleźć treści, poprawiając wrażenia użytkownika i zatrzymując ich na Twojej stronie.

Szczegółowe instrukcje znajdziesz w naszym przewodniku jak dodać wyszukiwanie rozmyte w WordPress.

Najczęściej zadawane pytania dotyczące dodawania wyszukiwania z autouzupełnianiem na żywo w WordPress

Otrzymuję wiele pytań od naszych czytelników dotyczących funkcjonalności wyszukiwania w WordPressie, dlatego zebrałem odpowiedzi na najczęściej zadawane pytania.

Jaka jest najlepsza wtyczka do wyszukiwania w WordPress?

W przypadku funkcji wyszukiwania na żywo polecam SearchWP Live Ajax Search, ponieważ jest bezpłatna i działa świetnie od razu po instalacji.

Jeśli potrzebujesz bardziej zaawansowanych funkcji, takich jak wyszukiwanie w polach niestandardowych lub szczegółowe analizy, to płatna wtyczka SearchWP jest doskonała.

Jak dodać autouzupełnianie do pól adresu w WordPressie?

Autouzupełnianie adresów różni się od wyszukiwania treści. Wykorzystuje usługi takie jak Google Places API do sugerowania rzeczywistych adresów podczas wpisywania przez użytkowników.

Będziesz potrzebować wtyczki do formularzy, takiej jak WPForms lub Gravity Forms, która zawiera funkcje autouzupełniania adresów. Łączy się to z usługami mapowania, aby zapewnić sugestie adresów ulic, co jest oddzielne od wyszukiwania treści na Twojej stronie.

Czy mogę utworzyć formularz, który pozwoli użytkownikom wyszukiwać w określonej kategorii?

Jeśli chcesz dodać menu rozwijane, aby użytkownicy mogli wyszukiwać według kategorii, będziesz potrzebować wtyczki SearchWP Pro.

Bezpłatna wtyczka SearchWP Live Ajax Search (ta, którą omawiamy w tym przewodniku) wyświetli nazwy kategorii w wynikach na żywo, ale nie pozwoli Ci stworzyć pełnego formularza wyszukiwania z filtrami kategorii.

Aby uzyskać tę funkcję, musisz zaktualizować wtyczkę do pełnej wersji SearchWP i postępować zgodnie z naszym samouczkiem na temat jak wyszukiwać według kategorii w WordPress.

Jak dodać funkcję wyszukiwania do mojej witryny WordPress?

Większość motywów WordPress zawiera wbudowany widżet wyszukiwania, który można dodać do menu, paska bocznego, nagłówka lub stopki.

Szczegółowe informacje znajdziesz w naszym przewodniku jak dodać pasek wyszukiwania do menu WordPress.

Więcej poradników, jak ulepszyć wyszukiwanie w WordPress

Mam nadzieję, że ten przewodnik pomógł Ci dodać wyszukiwanie z autouzupełnianiem na żywo do Twojej witryny WordPress.

Możesz również zapoznać się z naszymi innymi powiązanymi poradnikami, aby ulepszyć wyszukiwanie na swojej stronie:

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz w niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

Komentarze

  1. Gratulacje, masz okazję być pierwszym komentującym tego artykułu.
    Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.