Jak wyróżnić wyszukiwane hasła w wynikach w WordPress (2 metody)

Pomyśl o ostatnim razem, kiedy czegoś szukałeś na stronie. Prawdopodobnie skanowałeś wyniki w poszukiwaniu swoich słów kluczowych, prawda? 🔍

Właśnie to robią odwiedzający Twoją witrynę, gdy szukają czegoś na Twojej stronie. Z tym, że WordPress domyślnie nie podświetla tych terminów.

Ustawienie podświetlonych terminów wyszukiwania jest jedną z tych prostych ulepszeń, które natychmiast sprawiają, że Twoja witryna wydaje się bardziej dopracowana i przyjazna dla użytkownika.

Kiedy odwiedzający mogą szybko zobaczyć, dlaczego każdy wynik pasuje do ich wyszukiwania, chętniej klikają i angażują się w Twoje treści.

Przez lata tworzenia i zarządzania witrynami WordPress odkryłem, że te małe usprawnienia doświadczenia użytkownika mogą mieć duży wpływ. 📝

Dlatego przeprowadzę Cię przez 2 proste sposoby na podświetlenie terminów wyszukiwania na Twojej stronie WordPress, niezależnie od tego, czy wolisz użyć wtyczki, czy dodać niestandardowy kod.

Dlaczego warto wyróżniać terminy wyszukiwania na mojej stronie internetowej?

Podświetlanie terminów wyszukiwania pomaga odwiedzającym szybko znaleźć treści, których szukają.

Kiedy użytkownicy wpisują słowo kluczowe w pasku wyszukiwania Twojej witryny, skanują wyniki w poszukiwaniu tych dokładnych słów. Jeśli nic nie przyciągnie ich uwagi, mogą pominąć przydatne treści, nie zdając sobie z tego sprawy.

Podkreślając terminy wyszukiwania, sprawiasz, że wyniki są łatwiejsze do odczytania i natychmiast pokazujesz, które artykuły są najbardziej trafne.

Poprawia to doświadczenie użytkownika, pomaga odwiedzającym szybciej znaleźć informacje i zapewnia ich, że są we właściwym miejscu. Może nawet zachęcić użytkowników do dłuższego pozostania na Twojej stronie.

W WPBeginner wyróżniamy pogrubieniem pasujące słowa kluczowe w naszych wynikach wyszukiwania – działa to podobnie do zaznaczania. To drobny szczegół, ale naprawdę pomaga użytkownikom szybciej znaleźć to, czego szukają.

Mając to na uwadze, pokażemy Ci, jak łatwo podświetlać terminy wyszukiwania w WordPressie. Omówię 2 metody. Możesz użyć poniższych linków, aby przejść do wybranej metody.

• Metoda 1: Podświetlanie terminów wyszukiwania za pomocą SearchWP – Zalecane
• Metoda 2: Podświetlanie terminów wyszukiwania za pomocą niestandardowego kodu – bezpłatnie
• Bonus: Spraw, aby Twoje wyszukiwanie było jeszcze szybsze dzięki wyszukiwaniu na żywo Ajax 🚀
• Najczęściej zadawane pytania: Podświetlanie terminów wyszukiwania w WordPress

Metoda 1: Podświetlanie terminów wyszukiwania za pomocą SearchWP – Zalecane

Jeśli szukasz szybkiego i bezproblemowego sposobu na podświetlenie terminów wyszukiwania w wynikach WordPress, najlepszym rozwiązaniem jest SearchWP.

Moim zdaniem SearchWP jest jednym z najlepszych narzędzi do poprawy doświadczenia wyszukiwania na Twojej stronie.

Daje znacznie bardziej trafne wyniki niż domyślne wyszukiwanie WordPress, a najlepsze jest to? Niezwykle łatwo podświetla terminy wyszukiwania. Wystarczy przełączyć przełącznik i gotowe.

Dokładnie przetestowałem SearchWP na naszej stronie demonstracyjnej, a wyniki były imponujące. Działa bezproblemowo, a wbudowana funkcja podświetlania oszczędza mnóstwo czasu w porównaniu do ręcznej konfiguracji.

Mamy również pełną recenzję SearchWP, jeśli chcesz zobaczyć wszystkie jego funkcje i sposób działania.

Najpierw musisz zainstalować i aktywować wtyczkę SearchWP. Szczegółowe instrukcje znajdziesz w naszym poradniku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do strony SearchWP » Ustawienia w swoim panelu administracyjnym WordPress.

Tutaj musisz wprowadzić swój klucz licencyjny.

Ten klucz licencyjny znajdziesz na swoim koncie na stronie SearchWP. Po prostu skopiuj go i wklej.

Następnie przewiń w dół do „Ustawienia ogólne” i przełącz przełącznik „Podświetl terminy” na „Włącz”.

Jak tylko zostanie włączony, wszelkie słowa kluczowe używane przez Twoich odwiedzających będą automatycznie podświetlane w wynikach wyszukiwania, co ułatwi znalezienie odpowiednich treści.

W tej sekcji znajdziesz również dodatkowe ustawienia, które mogą poprawić Twoje wyniki wyszukiwania.

Funkcje takie jak Wyszukiwanie Rozmyte i Wyszukiwanie w Cudzysłowach są szczególnie pomocne w blogach WordPress z dużą ilością treści.

Ta funkcja pozwala odwiedzającym znaleźć właściwą treść, nawet jeśli popełnią mały błąd w pisowni. Może to zapobiec wyświetleniu frustrującej strony „nie znaleziono wyników”.

Z drugiej strony, Wyszukiwanie w cudzysłowach pozwala użytkownikom wyszukiwać dokładną frazę, umieszczając ją w cudzysłowach, tak jak w Google.

Pamiętaj, że wszystkie Twoje ustawienia zostaną automatycznie zapisane.

Gdy będziesz zadowolony z ustawień ogólnych, warto zapoznać się z pozostałymi opcjami dostosowywania SearchWP.

Możesz przejść do strony SearchWP » Algorytm w swoim panelu, aby dostroić sposób rangowania wyników wyszukiwania.

Ta sekcja jest naprawdę pomocna, ponieważ pozwala kontrolować wagę (ważność) różnych części Twojej treści – pomyśl o tym jak o systemie punktacji dla Twoich wyników wyszukiwania.

Nadanie większej wagi tytułom, na przykład, oznacza, że dopasowania w tytule posta pojawią się wyżej niż dopasowania w treści. W ten sposób najistotniejsze treści pojawiają się najpierw.

Po kliknięciu przycisku „Źródła i ustawienia” możesz również zdecydować, co uwzględnić w indeksie wyszukiwania.

Zamiast tylko postów i stron, możesz dodawać komentarze, niestandardowe typy postów, produkty WooCommerce, SKU i inne.

Jeśli prowadzisz bloga lub sklep internetowy, sprawia to, że Twoje wyszukiwanie jest znacznie bardziej użyteczne.

Na przykład może pomóc klientowi znaleźć produkt po jego SKU, takim jak „TSHIRT-BLUE-LG”, czego domyślne wyszukiwanie WordPress nie byłoby w stanie zrobić.

Przygotowaliśmy również obszerny przewodnik na temat jak ulepszyć wyszukiwanie w WordPressie za pomocą SearchWP, jeśli chcesz zagłębić się w temat.

Po zapisaniu ustawień SearchWP automatycznie przejmuje kontrolę nad istniejącym formularzem wyszukiwania. Nie są wymagane żadne dodatkowe kroki.

Po prostu przejdź do swojej witryny i przeprowadź szybkie wyszukiwanie. Od razu zobaczysz podświetlone słowa kluczowe.

Jeśli jeszcze nie dodałeś formularza wyszukiwania do swojej witryny, nie martw się. Możesz postępować zgodnie z naszym samouczkiem krok po kroku na temat jak dodać formularz wyszukiwania w WordPress.

Gdy to zostanie skonfigurowane, wszystko jest gotowe, a Twoi odwiedzający od razu będą cieszyć się znacznie lepszym doświadczeniem wyszukiwania.

Metoda 2: Podświetl terminy wyszukiwania za pomocą niestandardowego kodu – bezpłatnie

Jeśli masz ograniczony budżet, SearchWP może nie być odpowiednim wyborem, ponieważ jego darmowy plan nie obejmuje tej funkcji.

Dobra wiadomość jest taka, że nadal możesz wyróżniać terminy wyszukiwania, dodając fragment kodu PHP do pliku functions.php Twojej witryny.

Główna różnica polega na długoterminowej konserwacji. Wtyczka taka jak SearchWP jest regularnie aktualizowana przez swoich twórców, aby zapewnić kompatybilność z nowymi wersjami WordPress.

W przypadku niestandardowego fragmentu kodu jesteś odpowiedzialny za zapewnienie, że będzie on nadal działać poprawnie po przyszłych aktualizacjach.

Niemniej jednak bezpośrednia edycja plików motywu może być również ryzykowna.

Nawet mały błąd może spowodować awarię witryny i zablokować Ci dostęp do panelu administracyjnego. Jest to często nazywane „Biały ekran śmierci” i może być stresujące do naprawienia, jeśli nie jesteś programistą.

Dlatego zamiast tego polecam używać WPCode. Jest to najlepsza wtyczka fragmentów kodu WordPress i najbezpieczniejszy sposób na dodawanie niestandardowego kodu bez dotykania plików motywu.

Dzieje się tak, ponieważ WPCode uruchamia Twoje fragmenty kodu w oddzielnym, bezpiecznym środowisku. Zapobiega to awarii witryny z powodu literówki i ułatwia włączanie lub wyłączanie fragmentów kodu za pomocą przełącznika.

Dodatkowo jego bezpłatny plan doskonale sprawdza się w tej metodzie.

Dokładnie przetestowałem WPCode w różnych konfiguracjach i za każdym razem działa niezawodnie. Jeśli jesteś ciekawy wszystkiego, co oferuje, mamy również szczegółową recenzję WPCode, którą możesz sprawdzić później.

Ale na razie przejdźmy przez to, jak go używać do wyróżniania terminów wyszukiwania na Twojej stronie.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku dotyczącym instalowania wtyczki WordPress.

Po aktywowaniu wtyczki przejdź do strony Fragmenty kodu » + Dodaj fragment z panelu administracyjnego.

Tutaj kliknij przycisk „+ Dodaj niestandardowy fragment” w sekcji „Dodaj swój niestandardowy kod (nowy fragment)”.

Zostaniesz teraz przeniesiony na nowy ekran, gdzie musisz wybrać „Fragment PHP” jako typ kodu. Gdy to zrobisz, nadaj swojemu fragmentowi kodu nazwę.

Ta nazwa nie będzie widoczna dla Twoich odwiedzających – jest tylko do Twojej wiadomości. Dlatego zalecam użycie czegoś opisowego, jak Wyróżnij terminy wyszukiwania lub czegoś innego, co ułatwi rozpoznanie.

Pomoże Ci to szybko znaleźć i zarządzać fragmentem później, jeśli kiedykolwiek będziesz chciał go edytować lub wyłączyć.

Następnie skopiuj i wklej następujący niestandardowy kod do pola „Podgląd kodu”.

Ten kod działa poprzez wyszukiwanie słów kluczowych, których szukał Twój gość. Następnie opakowuje te słowa kluczowe w specjalny tag, który dodaje kolorowe tło.

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

Po wklejeniu kodu przewiń w dół fragmentu, aby znaleźć sekcję stylizacji. Zobaczysz ją w bloku echo '<style> ... </style>';. Konkretna linia, którą chcesz zmienić, to:

                        background-color: yellow;

Domyślnie wtyczka ustawia kolor tła podświetlanego terminu na żółty z czarnym tekstem. Ale możesz to łatwo dostosować, edytując tę linię.

Po prostu zastąp yellow kodem szesnastkowym dowolnego koloru, który preferujesz. Na przykład, aby zmienić podświetlenie na jasnoniebieski, możesz użyć #aeeffc. Pamiętaj, aby zachować średnik na końcu!

Zalecam wybór koloru tła i tekstu, który pasuje do stylu Twojej marki, aby dobrze komponował się z resztą Twojej witryny.

W tej sekcji możesz również dostosować grubość czcionki, promień zaokrąglenia obramowania i dopełnienie, aby dopracować wygląd pola wyróżnienia.

Gdy będziesz zadowolony ze stylizacji, przewiń z powrotem na górę, przełącz przełącznik z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”, aby zapisać swoje ustawienia.

Jeśli Twoja witryna ma już formularz wyszukiwania, fragment zacznie działać od razu i automatycznie podświetli terminy wyszukiwania.

Jeśli jeszcze nie dodałeś formularza wyszukiwania, możesz postępować zgodnie z naszym tutorialem na temat jak dodać formularz wyszukiwania w WordPress.

Na koniec odwiedź swoją stronę internetową, przeprowadź szybkie wyszukiwanie, a zobaczysz swoje nowo podświetlone terminy w akcji.

Bonus: Spraw, aby Twoje wyszukiwanie było jeszcze szybsze dzięki wyszukiwaniu na żywo Ajax 🚀

Po dodaniu podświetlania terminów wyszukiwania możesz chcieć pójść o krok dalej, pokazując wyniki podczas wpisywania przez odwiedzających.

Nazywa się to wyszukiwaniem na żywo Ajax i działa podobnie do autouzupełniania w Google. Dostarcza natychmiastowe sugestie bez konieczności przeładowania strony.

To świetny sposób na przyspieszenie i zwiększenie interaktywności Twojej witryny. Odwiedzający mogą niemal natychmiast znaleźć to, czego szukają, co prawdopodobnie zwiększy zaangażowanie.

Aby to skonfigurować, polecam wtyczkę SearchWP Live Ajax Lite Search, która świetnie współpracuje z narzędziem SearchWP Premium.

Jest darmowy, działa bezproblemowo z większością motywów WordPress i obsługuje wszystko automatycznie. Przetestowałem go dokładnie i zawsze zapewnia lepsze, szybsze wyszukiwanie.

Po prostu zainstaluj wtyczkę jak każdą inną wtyczkę WordPress, aktywuj ją, a następnie włącz wyszukiwanie na żywo w ustawieniach SearchWP.

Formularz wyszukiwania możesz łatwo dodać do dowolnego posta, strony, paska bocznego lub obszaru widżetu.

Potrzebujesz pomocy w rozpoczęciu pracy? Sprawdź nasz pełny samouczek na temat dodawania wyszukiwania Ajax na żywo do Twojej witryny WordPress.

Najczęściej zadawane pytania: Podświetlanie terminów wyszukiwania w WordPress

Oto kilka pytań, które często otrzymuję na temat podświetlania terminów wyszukiwania w WordPress:

Czy mogę podświetlać terminy w wynikach wyszukiwania AJAX lub na żywo?

Tak! Jeśli używasz SearchWP wraz z wtyczką SearchWP Live Ajax Lite Search, podświetlone terminy pojawią się również w wynikach wyszukiwania na żywo — bez potrzeby przeładowania strony.

Ponieważ oba narzędzia są tworzone przez ten sam zespół, działają one bezproblemowo od razu po instalacji.

Jednak jeśli używasz innego wtyczki wyszukiwania na żywo lub niestandardowego rozwiązania wyszukiwania AJAX, będziesz musiał przetestować kompatybilność.

Nie wszystkie wtyczki obsługują podświetlanie terminów w dynamicznych wynikach, dlatego warto przetestować na stronie stagingowej, aby upewnić się, że wszystko wyświetla się poprawnie.

Czy te funkcje podświetlania wpływają na wydajność lub szybkość strony?

Nie bardzo. Obie metody, które opisałem – używanie SearchWP i dodawanie niestandardowego kodu za pomocą WPCode – są lekkie i zoptymalizowane pod kątem wydajności.

Samo wyróżnianie działa po stronie klienta, więc nie obciąża zbytnio serwera.

Niemniej jednak, jeśli Twoja witryna ma dużą liczbę wyników wyszukiwania lub złożone niestandardowe style, zawsze warto najpierw przetestować. Zalecam wypróbowanie tego w środowisku staging, aby upewnić się, że podświetlenie wygląda dobrze i działa płynnie, zanim wdrożysz je na żywo.

Czy podświetlanie terminów wyszukiwania będzie działać z niestandardowymi typami postów lub WooCommerce?

Tak, absolutnie! Jeśli używasz SearchWP, jest on zaprojektowany tak, aby działał idealnie z niestandardowymi typami postów i produktami WooCommerce od razu po wyjęciu z pudełka. Daje Ci pełną kontrolę nad tym, co jest przeszukiwane, w tym SKU produktów i niestandardowe pola.

Niestandardowy fragment kodu z Metody 2 może również działać dla niestandardowych typów postów, o ile Twój motyw używa standardowych funkcji WordPress, takich jak the_title() do wyświetlania treści. Jednak dla najbardziej niezawodnych i potężnych wyników, szczególnie w przypadku sklepu e-commerce, SearchWP jest najlepszym rozwiązaniem.

Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo podświetlać terminy wyszukiwania w wynikach w WordPress. Możesz również zapoznać się z naszym obszernym przewodnikiem na temat tworzenia inteligentnego wyszukiwania produktów WooCommerce oraz naszym poradnikiem na temat dodawania możliwości wyszukiwania głosowego do Twojej witryny WordPress.

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.