Jak utworzyć niestandardowy formularz wyszukiwania w WordPress

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Utwórz niestandardowy formularz wyszukiwania

Czy chcesz utworzyć niestandardowy formularz wyszukiwania w witrynie WordPress? Kiedyś budowaliśmy motywy od podstaw, dzięki czemu możemy dodać własną stylizację do sekcji na stronie. Być może stworzyłeś projekt ładnie wyglądającego formularza wyszukiwania i chcesz go teraz dopasować do WordPressa.

WordPress udostępnia metodę, get_search_form()która renderuje formularz wyszukiwania. Jeśli użyjesz tej metody w niestandardowym motywie, otrzymasz domyślny formularz wyszukiwania utworzony w rdzeniu WordPress. I nie chcesz domyślnego formularza wyszukiwania, ponieważ projekt formularza jest inny. Aby rozwiązać tę sytuację, musisz utworzyć niestandardowy formularz wyszukiwania, który zastępuje formularz domyślny.

Tworząc niestandardowy formularz wyszukiwania, możesz dodać do niego własne znaczniki i styl. W tym artykule pokażę, jak stworzyć niestandardowy formularz wyszukiwania w WordPress.

Metoda get_search_form()szuka searchform.phppliku w katalogu aktywnego motywu. Jeśli ten plik nie istnieje, WordPress używa domyślnego formularza wyszukiwania, który jest zawarty w jego rdzeniu.

Utwórz niestandardowy formularz wyszukiwania

Utwórz searchform.phpplik w katalogu aktywnego motywu. W tym pliku dodaj swój znacznik formularza wyszukiwania. Na przykład w moim przypadku formularz wyszukiwania wygląda następująco.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="submit" value="Search">
</form>

W powyższym kodzie nie ma nic wyszukanego ani skomplikowanego. Właśnie nadałem identyfikator ‘searchform’ do tagu formularza i klasę ‘search-field’ do pola tekstowego wyszukiwania. Używając tego identyfikatora i klasy mogę dodać stylizację do formularza wyszukiwania. Podobnie jak w twoim przypadku, musisz użyć własnego znacznika.

Wyświetl formularz wyszukiwania

Kolejnym krokiem jest wyświetlenie formularza wyszukiwania na stronie. Możesz umieścić formularz wyszukiwania na pasku bocznym, nagłówku, obok menu itp.

Za pomocą tej funkcji get_search_form()można wyświetlić formularz wyszukiwania w dowolnym miejscu na stronie. Wystarczy wywołać tę metodę z miejsca, w którym chcesz wyświetlić formularz wyszukiwania.

<?php get_search_form(); ?>

Po umieszczeniu powyższego kodu w żądanym miejscu przejdź do przeglądarki. Powinieneś teraz zobaczyć swój formularz wyszukiwania na stronie.

Dostosuj wyniki wyszukiwania

Może się zdarzyć, że Twoja witryna zawiera więcej zasobów, takich jak książki, czasopisma, e-booki, pliki PDF itp. i musisz wyświetlić zawartość wszystkich tych zasobów w wynikach wyszukiwania. Można to łatwo zrobić.

Zakładając, że masz niestandardowe typy postów dla wszystkich tych zasobów, musisz dodać ukryte pole dla każdego typu postu w formularzu wyszukiwania.

Załóżmy, że dla powyższych zasobów utworzyłeś niestandardowe typy postów: książka, czasopismo, ebook, pdf. Wtedy twoje ukryte pola będą wyglądać następująco.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Teraz, gdy ktoś wprowadzi słowo kluczowe w formularzu wyszukiwania, WordPress wyszukuje to słowo kluczowe we wszystkich powyższych typach postów, aby dopasować wynik.

Mam nadzieję, że rozumiesz, jak stworzyć niestandardowy formularz wyszukiwania w WordPressie. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net