3 sposoby na stworzenie świetnego niestandardowego formularza wyszukiwania WordPress

Opublikowany: 2022-11-23

WordPress to najpopularniejszy na świecie system zarządzania treścią (CMS). Oprócz tego, że jest potężnym i super elastycznym narzędziem, jest również niezwykle łatwe w użyciu. Osoby bez doświadczenia w projektowaniu stron internetowych lub kodowaniu mogą użyć WordPressa, aby uruchomić swoją stronę internetową w zaledwie kilka minut.

Użytkownicy odwiedzą Twoją witrynę WordPress, aby wyszukać interesujące ich treści. Pasek wyszukiwania może im w tym pomóc. Jeśli Twoja witryna go nie ma, użytkownikom będzie trudno znaleźć treści, których szukają. Ta frustracja powoduje, że ludzie opuszczają Twoją witrynę i przechodzą gdzie indziej.

To nie wystarczy!

W tym artykule pokażemy, jak zintegrować niestandardowy formularz wyszukiwania WordPress ze swoją witryną.

  • Co to jest niestandardowy formularz wyszukiwania WordPress?
  • #1 Zastosuj wtyczkę
  • #2 Zmodyfikuj kod
  • #3 Użyj niestandardowego CSS, aby nadać styl formularzowi wyszukiwania i stronie wyników

Co to jest niestandardowy formularz wyszukiwania WordPress?

WordPress ma już wbudowaną natywną funkcję wyszukiwania. Jednak domyślne narzędzie wyszukiwania jest dość ograniczone i nie jest zbyt „inteligentne”. Nie zawsze znajduje zawartość, której chcesz szukać.

Domyślna funkcja wyszukiwania WordPress jest wystarczająca dla nowych lub małych stron internetowych, które nie mają dużej ilości treści.

Jednak wraz ze wzrostem bazy danych treści zainstalowanie lepszego narzędzia wyszukiwania jest ważne, aby pomóc odwiedzającym poruszać się po Twojej witrynie. Jeśli prowadzisz witrynę e-commerce, dobre narzędzie do wyszukiwania jest jeszcze ważniejsze. Pomaga kierować potencjalnych klientów do produktów, które są dla nich odpowiednie.

Możesz także chcieć, aby narzędzie wyszukiwania wyświetlało wyniki w określonej kolejności. Na przykład najpierw najpopularniejsze artykuły lub przedmioty. Domyślne narzędzie wyszukiwania nie pozwala na to. Zamiast tego będziesz musiał ręcznie edytować algorytm wyszukiwania.

Wreszcie, niestandardowe narzędzie wyszukiwania można stylizować, aby odzwierciedlało estetykę lub markę Twojej witryny!

pfo-custom-wordpress-search-formularz-przyklad

Co to jest funkcja get_search_form?

get_search_form odnosi się do funkcji, która wyświetla formularz wyszukiwania w Twojej witrynie. Możesz go znaleźć w zakładce Wygląd > Widżety w panelu administracyjnym WordPress.

Zarządza widżetem formularza wyszukiwania i każdą inną stroną w Twojej witrynie, która wymaga funkcji wyszukiwania. Bez tej funkcji Twoja witryna jest równie dobra, jak pozbawiona narzędzia wyszukiwania.

Jak dostosować formularz wyszukiwania w WordPress

Istnieje wiele różnych podejść, których można użyć do dostosowania formularza wyszukiwania w WordPress. To zależy od poziomu umiejętności kodowania i tego, ile czasu chcesz poświęcić na to zadanie.

#1 Zastosuj wtyczkę

Wtyczka to najłatwiejszy i najszybszy sposób na uruchomienie niestandardowego formularza wyszukiwania WordPress w Twojej witrynie. Na przykład Ivory Search to bezpłatna wtyczka stworzona specjalnie w celu ulepszenia funkcji narzędzia wyszukiwania WordPress. Możesz dodawać i edytować nowe formularze wyszukiwania oraz przeprowadzać różne typy wyszukiwań.

Ponadto dzięki skrótom możesz umieścić pasek wyszukiwania w dowolnym miejscu na stronie (na przykład w nagłówku, stopce, pasku menu itp.).

pfo-ivory-search-plugin

To proste narzędzie, które gorąco polecamy, jeśli nie masz dużego doświadczenia w programowaniu. Chociaż nie jest tak wszechstronne, jak kodowanie narzędzia wyszukiwania, powinno wystarczyć do podstawowego użytku.

#2 Zmodyfikuj kod

Istnieją dwa sposoby na zbudowanie formularza wyszukiwania od podstaw bezpośrednio w podstawowych plikach .php witryny WordPress: za pomocą funkcji lub szablonu.

Z funkcją

Możesz zastąpić domyślne narzędzie wyszukiwania WordPress niestandardowym, używając haka add_filter . W swoim pliku functions.php dodaj następujący kod do stosu:

 funkcja custom_search_form($formularz) {
$form = '<formularz role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Szukaj:' ) . '</etykieta>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__('Search' ) .'" />
</div>
</form>';
zwróć $formularz;
}

add_filter( 'get_search_form', 'custom_search_form', 40);

To, co robi ten kod, to przechowywanie niestandardowego formularza w zmiennej $form , która zastąpi domyślne narzędzie wyszukiwania WordPress dzięki hakowi add_filter .

Możesz dodatkowo dostosować powyższy kod, edytując etykiety, teksty, identyfikatory i inne elementy w wartości zmiennej $form .

Z szablonem

Jeśli nie chcesz modyfikować pliku functions.php , alternatywą jest użycie szablonu formularza wyszukiwania. Utwórz niestandardowy formularz wyszukiwania WordPress, a następnie dodaj go jako searchform.php do głównego katalogu. WordPress automatycznie użyje niestandardowego formularza wyszukiwania zamiast domyślnego.

Aby to zrobić, otwórz wybrane IDE i utwórz nowy plik. Nazwij go „searchform.php” . Wklej następujący kod do edytora:

 <?php
/* Niestandardowy formularz wyszukiwania */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="grupa_wejściowa">
<input type="search" class="form-control border-0" placeholder="Szukaj" aria-label="search nico" name="s" value="<?php echo esc_attr(get_search_query()); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-mute"></i>
</rozpiętość>
</div>
</div>
</form>

Zmodyfikuj powyższy kod zgodnie z własnymi preferencjami!

#3 Użyj niestandardowego CSS, aby nadać styl formularzowi wyszukiwania i stronie wyników

Teraz, gdy masz już uruchomioną niestandardową funkcję wyszukiwania, następną częścią jest jej stylizacja. Domyślny wygląd jest dość nudny z białymi polami tekstowymi w zwykłych czcionkach Sans Serif.

Jeśli chcesz to zmienić, najlepiej jest przejść przez kilka linii kodu CSS.

Ten szablon kodu CSS jest zgodny z większością motywów WordPress. Po prostu skopiuj i wklej go za pomocą panelu administracyjnego WordPress.

 .Formularz wyszukiwania {
rodzina czcionek: arial;
rozmiar czcionki: 16px;
tło:#ace5e3;
kolor:#ffffff;
obramowanie: 1px pełny #61c3c0;
wypełnienie: 10 pikseli;
wysokość: 90 pikseli;
szerokość: 600 pikseli;
}

.wyniki-wyszukiwania {
rodzina czcionek: arial;
rozmiar czcionki: 16 pikseli;
tło:#ace5e3;
kolor:#000000;
obramowanie: 1px pełny #61c3c0;
wypełnienie: 10 pikseli;
szerokość: 600 pikseli;
}

Zmodyfikuj zmienne w kodzie według własnych upodobań. Możesz wybrać czcionkę, rozmiar czcionki, kolor tła, obramowanie i tak dalej. Jeśli w kodzie jest jakiś element, którego nie chcesz zmieniać, po prostu usuń ten wiersz.

Na przykład, jeśli nie chcesz zmieniać rodziny czcionek formularza wyszukiwania, po prostu usuń „font-family:arial;” linia.

Stwórz swój własny niestandardowy formularz wyszukiwania WordPress już dziś!

Większość ludzi może sobie poradzić z prostym formularzem wyszukiwania generowanym przez wtyczkę. Ale jeśli jesteś trochę bardziej biegły w kodowaniu i chcesz zintegrować zaawansowane funkcje z formularzem wyszukiwania w swojej witrynie, powyższe szablony kodu mogą okazać się przydatne.

Niestandardowy formularz wyszukiwania WordPress to dość prosta funkcja, ale bardzo skuteczna w uczynieniu witryny bardziej przyjazną dla użytkownika. Wyszukiwanie formularza według niestandardowego pola Funkcja WordPress może pomóc przyciągnąć więcej odwiedzających, przekształcić ich w stałych bywalców, a jeśli prowadzisz witrynę e-commerce - w płatnych klientów.

Możesz dowiedzieć się więcej o dodawaniu inteligentnego wyszukiwania produktów WooCommerce tutaj.

Mamy nadzieję, że ten przewodnik okazał się przydatny i że zanim to przeczytasz, będziesz już mieć skonfigurowany formularz wyszukiwania niestandardowego!