Najłatwiejszy sposób na dodanie wyszukiwania na żywo

Szukasz najlepszej wtyczki WordPress do wyszukiwania AJAX?

Dodanie wyszukiwania na żywo opartego na AJAX do WordPress to świetny sposób na poprawę komfortu użytkowania witryny (UX) i zwiększenie możliwości odkrywania treści.

W tym poście dowiesz się krok po kroku, jak skonfigurować wyszukiwanie AJAX w WordPress przy użyciu rozwiązania całkowicie wolnego od kodu.

W rzeczywistości możesz zacząć działać w ciągu zaledwie kilku minut, mając jednocześnie dostęp do funkcji udoskonalania funkcji wyszukiwania AJAX w Twojej witrynie.

Wszystko, co musisz zrobić, to:

1. Zainstaluj wtyczkę Otter Blocks.
2. Dodaj blok wyszukiwania w miejscu, w którym ma się pojawiać pole wyszukiwania AJAX WordPress i włącz przełącznik Wyszukiwanie na żywo.
3. Dostosuj funkcję wyszukiwania na żywo AJAX do potrzeb, na przykład konfigurując ją tak, aby przeszukiwała tylko posty na blogu, ale nie strony.

Jeśli chcesz przejść bezpośrednio do samouczka, możesz kliknąć ten link skoku.

Co to jest wyszukiwanie AJAX dla WordPress?

Prawdopodobnie będziesz codziennie korzystać z funkcji wyszukiwania na żywo. Na przykład wszystkie główne wyszukiwarki i witryny wideo, takie jak YouTube, udostępniają tego typu funkcje.

Zaczynasz pisać w polu wyszukiwania i natychmiast widzisz listę sugerowanych zapytań (lub sugerowanych wyników) – nie trzeba ładować strony.

Chociaż WordPress ma własny pasek wyszukiwania, domyślnie nie używa AJAX. Zamiast tego użytkownicy wpisują wyszukiwane hasło w polu, naciskają Enter i ładuje się nowa strona z wynikami.

Aby dodać wyszukiwanie na żywo do swojej witryny, potrzebujesz pomocy wtyczki, o której jest ten post.

Korzyści z wyszukiwania AJAX na żywo w WordPress

Wszystko, co możesz wprowadzić, co poprawia UX, będzie miało wartość dla Twojej witryny. Jednak wyszukiwanie AJAX na żywo dla WordPress może dać Twoim użytkownikom coś wyjątkowego:

• Możesz zapewnić użytkownikom sposób „samoobsługi” ich potrzeb. Będą mogli szybko przeszukać całą witrynę i znaleźć odpowiednią stronę.
• Elementy interaktywne mogą zapewnić lepsze połączenie między Twoją witryną a użytkownikami. Dzieje się tak dlatego, że możesz dostarczać trafne wyniki wyszukiwania szybciej i bez potrzeby dodatkowych kliknięć przycisków.
• Możesz także skrócić czas ładowania strony do minimum, ponieważ aktywne wyszukiwanie AJAX nie musi wykonywać dalszych żądań HTTP ani ładować innych stron.

Dlaczego rozwiązanie do ręcznego kodowania wyszukiwania na żywo może nie być najlepsze

Biorąc pod uwagę, że AJAX wykorzystuje JavaScript, możesz rozważyć „wprowadzenie własnego” rozwiązania przy użyciu języka programowania.

Teoretycznie jest to dobry pomysł, ale nie będzie najlepszą metodą dodania wyszukiwania AJAX na żywo do WordPress. Dlatego:

• Po pierwsze, możesz stworzyć tylko rozwiązanie, które jest tak dobre, jak Twoje umiejętności. Jeśli nie masz wiedzy na temat języka JavaScript na poziomie eksperckim, będzie to widoczne w wynikach.
• Ponadto musisz także wiedzieć o strukturze plików WordPress, strukturze szablonów i wielu innych. Istnieje wiele trybików, które składają się na koło WordPressa.
• Nawet jeśli masz umiejętności niezbędne do kodowania rozwiązania do wyszukiwania na żywo, będziesz potrzebować czasu i pieniędzy na jego opracowanie i wdrożenie. Może to być trudne do zdobycia, zwłaszcza jeśli rozwój nie jest Twoim głównym zajęciem.
• Jeśli musisz rozwiązać problem z ręcznym rozwiązaniem, może to pochłonąć Twój czas, pieniądze i zasoby. Możesz odgryźć więcej, niż możesz przeżuć.

Zamiast tego istnieje lepszy sposób na wdrożenie odpowiedniej funkcjonalności w WordPress: wtyczki. Przyjrzyjmy się dalej, jak to działa.

Zamiast tego użyj wtyczki WordPress do wyszukiwania AJAX

Dla większości ludzi użycie wtyczki WordPress do wyszukiwania AJAX jest znacznie lepszą opcją.

Chociaż istnieje wiele wtyczek WordPress do wyszukiwania AJAX, nie wszystkie są sobie równe. Na przykład niektóre wtyczki są ograniczone, jeśli chodzi o opcje stylizacji lub kontrolowanie, jakie treści mają być przeszukiwane.

Z tego powodu w tym samouczku użyjemy wtyczki Otter Blocks.

Jak sama nazwa wskazuje, Otter Blocks to zbiór elementów natywnego edytora bloków WordPress.

Jeśli chodzi o funkcjonalność wyszukiwania AJAX, najbardziej odpowiednią funkcją jest blok wyszukiwania.

Pozwala wybrać typy postów do wyszukiwania iw pełni dostosować wygląd pola wyszukiwania. Możesz dodać go do dowolnej części witryny, w tym do postów, stron, pasków bocznych i nie tylko.

Poza funkcją wyszukiwania AJAX WordPress, Otter Blocks oferuje kilka dodatkowych sposobów na urozmaicenie układów i projektów:

• Możesz dodawać nagłówki z większym poziomem dostosowania niż domyślnie.
• Istnieje możliwość zbudowania responsywnej sekcji, która obejmuje zaawansowane dostosowywanie i miejsce na sześć kolumn.
• Będziesz mógł dodawać wspaniałe animacje, takie jak efekty Lottie i odwracane karty.
• Jeśli sprzedajesz produkty za pośrednictwem swojej witryny, Otter Blocks zawiera tabele cen, możliwość zaimplementowania przycisków „dodaj do koszyka”, godziny pracy i wiele więcej.

W rzeczywistości Otter Blocks zapewnia dodatkową funkcjonalność dla wszystkich oferowanych bloków – nawet tych rodzimych. Na przykład możesz ustawić warunki widoczności, niestandardowy CSS i więcej z typowego interfejsu Edytora bloków.

Jak używać Otter Blocks, aby dodać wyszukiwanie AJAX na żywo do WordPress

Będziesz potrzebował tylko kilku kroków, aby skonfigurować Otter Blocks, aby dodać wyszukiwanie AJAX na żywo do WordPress. Zacznijmy od procesu instalacji:

1. Zainstaluj i aktywuj Otter Blocks
2. Włącz wyszukiwanie AJAX na żywo dla WordPress w ustawieniach Otter Blocks
3. Dostosuj ustawienia, aby udoskonalić wyszukiwanie w interfejsie swojej witryny

1. Zainstaluj i aktywuj Otter Blocks

Po pierwsze, musisz zainstalować Otter Blocks i aktywować je dla swojej witryny. Można to zrobić na wiele sposobów, ale powtórzymy to, co już zostało opisane w naszym innym artykule na blogu ThemeIsle.

To pokaże Ci, jak zainstalować zarówno darmową, jak i premium wersję Otter Blocks. Jednak do tego postu potrzebujesz wersji premium, ponieważ zapewnia ona funkcję wyszukiwania na żywo.

2. Włącz wyszukiwanie AJAX na żywo dla WordPress w ustawieniach Otter Blocks

Po zainstalowaniu wtyczki użyj narzędzia do wstawiania bloków, aby dodać blok wyszukiwania z Otter Blocks.

Gdy to zrobisz, doda pole formularza i przycisk do układu strony.

To implementuje podstawową funkcjonalność wyszukiwania, ale nie jest to wyszukiwanie AJAX na żywo w WordPress.

W domyślnej konfiguracji będzie działać tak, jak typowe wyszukiwanie WordPress.

Aby włączyć funkcję wyszukiwania AJAX WordPress, włącz przełącznik Włącz wyszukiwanie na żywo na prawym pasku bocznym:

3. Dostosuj ustawienia, aby udoskonalić wyszukiwanie w interfejsie swojej witryny

Gdy masz już funkcję wyszukiwania na żywo w swojej witrynie, możesz ją udoskonalić na wiele sposobów.

Oczywiście istnieje wiele opcji kosmetycznych i UX.

Na przykład możesz zmienić pozycję przycisku, czy używasz etykiety dla pola wyszukiwania, a także dostosować kolory, animacje i obramowania sekcji wyszukiwania:

Stamtąd możesz również określić granice wyszukiwania w witrynie, wybierając typy postów do wyszukiwania.

W tym celu użyjesz pola Szukaj w na prawym pasku bocznym:

Umożliwia to dodawanie „obiektów” dla miejsca, w którym ma działać wyszukiwanie.

Na przykład możesz wybrać wyszukiwanie tylko w treści swojego posta lub wśród produktów Twojego sklepu.

Jeśli pozostawisz to pole puste, Otter Blocks przeszuka całą zawartość Twojej witryny.

Skonfiguruj funkcję wyszukiwania AJAX WordPress już dziś

Jednak WordPress nie oferuje tego domyślnie. Zamiast tego możesz użyć Otter Blocks, aby dodać to do swojej witryny. Nie ma w tym żadnego kodu, a zyskujesz znacznie więcej funkcji niż tylko wyszukiwanie AJAX na żywo.

Podczas gdy Otter Blocks jest darmową wtyczką, wersja premium zapewnia między innymi możliwość skonfigurowania wyszukiwania AJAX na żywo w WordPress.

Czy nadal masz pytania dotyczące konfiguracji wyszukiwania na żywo AJAX w WordPress? Zapytaj nas w komentarzach poniżej!