Jak dodać pole wyszukiwania do dodatkowego menu Divi?

W dzisiejszym samouczku Divi pokażemy, jak dodać pole wyszukiwania do dodatkowego menu. Drugie menu jest również znane jako nagłówek Twojej strony i miejsce, w którym próbujesz zmieścić kilka praktycznych informacji o Twojej witrynie lub firmie. Dodanie do niego pola wyszukiwania może być żądaniem od klienta lub potrzebą własnej witryny internetowej. Tak czy inaczej, pokażemy Ci, jak łatwo zintegrować to pole wyszukiwania z dodatkową nawigacją, gdy używasz motywu Divi.

Wynik

Zanim przejdziemy do różnych kroków, które musisz podjąć, aby się tam dostać; interesujące może być wcześniejsze pokazanie wyniku. Wykonując kroki opisane w poście i dodając zmiany wyglądu CSS, uzyskasz następujący wynik w domyślnym menu dodatkowym:

Po co dodawać pole wyszukiwania do menu dodatkowego

Dodanie możliwości wyszukiwania do dodatkowego menu to jedna z rzeczy, które mogłeś spróbować zrobić. Ale w przeciwieństwie do menu głównego, nagłówek nie ma osobnej strony w WordPressie, która pomaga dodawać rzeczy ręcznie, bez konieczności dodawania linii kodu PHP do pliku header.php Twojej witryny.

Jednak dodanie możliwości wyszukiwania w dodatkowym menu może być ciekawą rzeczą. Przyjrzyjmy się kilku powodom, dla których warto go dodać.

Zaoferuj odwiedzającym możliwość wyszukiwania od samego początku

Na swojej stronie masz wszystkich użytkowników. Niektórzy z nich chcą odkrywać różne rzeczy i nie spieszyć się, podczas gdy inni chcą od razu znaleźć konkretne informacje. Dodając pole wyszukiwania do drugorzędnego menu, masz gwarancję, że odwiedzający, którzy szukają czegoś konkretnego, będą mogli to zrobić od razu. Ponieważ menu dodatkowe znajduje się u góry strony, spieszący się odwiedzający docenią wysiłek, który poprawi ich komfort użytkowania.

Aby zapisać swoje główne menu z pola wyszukiwania

Oczywiście inną rzeczą, którą możesz zrobić, jest dodanie pola wyszukiwania do menu głównego. Ale w niektórych przypadkach możesz nie chcieć tego robić. Na przykład; jeśli chcesz skupić się na elementach menu lub jeśli nie chcesz mieszać elementów menu z polem wyszukiwania. Innym powodem może być to, że masz już sporo elementów menu, które sprawiają, że Twoje menu główne wygląda na zajęte, a nie chcesz dodawać do tego pola wyszukiwania.

Podkreśl pole wyszukiwania bez błyskotliwego podstawowego menu

Większość ludzi ma tendencję do utrzymywania trzeźwości menu głównego i wyświetlania menu drugorzędnego. Przede wszystkim dlatego, że chcą pokazać oczywistą różnicę między dwoma menu. I drugorzędne, ponieważ menu drugorzędne często zawiera pewne rzeczy, które chcą podkreślić (takie jak ikony mediów społecznościowych). Gdy zdecydujesz się zintegrować pole wyszukiwania również z menu dodatkowym, zostanie ono automatycznie podświetlone i zachęci odwiedzających do wyszukiwania i znajdowania dokładnie tego, czego szukają.

Jak dodać pole wyszukiwania do dodatkowego menu Divi?

Subskrybuj nasz kanał YouTube

Dodaj pole wyszukiwania do nagłówka pliku PHP

Teraz, aby faktycznie dodać pole wyszukiwania do nagłówka, jak pokazano na poniższym obrazku, musisz przede wszystkim dodać coś do pliku header.php swojej witryny. Linia kodu, której będziesz potrzebować, jest następująca:

<?php get_search_form(); ?>

Śmiało, skopiuj ten wiersz kodu PHP i przejdź do pulpitu nawigacyjnego WordPress. W panelu WordPress przejdź do Wygląd > Edytor > header.php.

Możesz teraz umieścić wiersz kodu w dowolnym miejscu, w którym ma się pojawić pasek wyszukiwania. Ponieważ chcemy, aby pojawiał się tuż obok ikon mediów społecznościowych, pokażemy Ci, gdzie dokładnie umieścić go w kodzie. Musimy umieścić go tuż przed menu dodatkowym, kontenerem i zamknięciem górnego nagłówka.

Stylizuj swoje pole wyszukiwania

Domyślnie pole wyszukiwania wygląda na nieco przestarzałe. Prawdopodobnie będziesz chciał zmienić niektóre rzeczy tylko po to, aby wyglądało tak, jak chcesz i aby pasowało do wyglądu i stylu pozostałej części Twojej witryny. Są to trzy rzeczy, które prawdopodobnie będziesz chciał zmienić: etykieta wyszukiwania, dane wejściowe wyszukiwania i dane wejściowe przycisku.

Jeśli nie wprowadzisz żadnych modyfikacji CSS w polu wyszukiwania, domyślnie będzie ono wyglądać tak w menu dodatkowym:

Co oczywiście nie jest ostatecznym rezultatem, jaki chcemy osiągnąć. Na szczęście możemy wprowadzić tyle modyfikacji w terenie, ile tylko chcemy. W dalszej części tego postu pokażemy, jak modyfikować wszystkie elementy pola wyszukiwania, a także udostępnimy linie kodu CSS, aby uzyskać następujący wynik:

Usuń/zmodyfikuj etykietę wyszukiwania

Pierwszym elementem, który jest częścią pola wyszukiwania, jest etykieta wyszukiwania. To jest tekst, który się pojawia, który wyjaśnia ludziom, że mogą szukać czegokolwiek w witrynie za pomocą tego pola. Jednak ta etykieta nie jest konieczna. W dzisiejszych czasach wszyscy wiedzą, jak działa pole wyszukiwania. Zawsze możesz usunąć etykietę wyszukiwania, dodając 'display:none;' do CSS tej etykiety. Możesz też zmienić wygląd etykiety.

Klasa, której będziesz potrzebować do wprowadzania jakichkolwiek zmian w etykiecie wyszukiwania, to „.screen-reader-text”. Jak pokazano w poniższym przykładzie, możesz wyłączyć jego wyświetlanie.

.screen-reader-text {
display: none;
}

Stylizuj swoje dane wejściowe

Następną rzeczą, którą możesz chcieć zaprojektować, jest wejście wyszukiwania. Aby dokonać jakichkolwiek zmian w tych danych wejściowych, umieść wszystkie wiersze kodu CSS w następujących nawiasach:

 input#s
{

}

Stylizuj swoje wejście przycisku

I wreszcie, mamy również styl przycisków. Aby dokonać jakichkolwiek modyfikacji w tej części pola wyszukiwania, umieść linie kodu CSS między następującymi nawiasami:

input#searchsubmit
{
}

Potrzebny kod CSS dla naszego przykładu

Po dokonaniu modyfikacji PHP możesz natychmiast osiągnąć wynik pokazany powyżej, przechodząc do pulpitu WordPress> Divi> Opcje motywu> Ogólne> I dodając następujące wiersze kodu CSS do pola Niestandardowe:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Wynik

Teraz, gdy wykonaliśmy już wszystkie kroki, przyjrzyjmy się jeszcze raz, jak powinien wyglądać Twój nagłówek:

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak dodać pole wyszukiwania do menu dodatkowego. Poza tym pokazaliśmy również, jak modyfikować elementy w tym polu wyszukiwania i zaprezentowaliśmy przykład linii kodu CSS, które możesz po prostu skopiować i wkleić na własny użytek. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa D Line / shutterstock.com