Czysty, wysuwany przełącznik wyszukiwania może natychmiast sprawić, że Twoja witryna WordPress będzie wyglądać elegancko i nowocześnie. Zamiast wyświetlać pełny pasek wyszukiwania w nagłówku lub całkowicie go ukrywać, efekt przełączania utrzymuje porządek w projekcie, jednocześnie ułatwiając dostęp do wyszukiwania.
Zauważyliśmy, że ten drobny szczegół interfejsu użytkownika robi dużą różnicę, nadając stronom bardziej dopracowany, profesjonalny wygląd bez dodawania bałaganu.
Najlepsze jest to? Istnieją sposoby, aby zrobić to mądrze i efektywnie.
W tym samouczku pokażemy Ci dokładnie, jak dodać płynny efekt przełączania wyszukiwania w WordPress. Niezależnie od tego, czy prowadzisz bloga, stronę firmową, czy sklep internetowy, to ulepszenie pomoże poprawić doświadczenie użytkownika dzięki prostemu, eleganckiemu dotykowi. 🎨
Czym jest efekt przełączania wyszukiwania w WordPress?
Efekt przełączania wyszukiwania to technika projektowania stron internetowych, która pozwala zamiast wyświetlania formularza wyszukiwania pokazać ikonę wyszukiwania. Gdy użytkownik ją kliknie, formularz wyszukiwania pojawi się z animacją wysuwania.
Domyślny formularz wyszukiwania WordPress nie wygląda zbyt dobrze. Wiele najlepszych motywów WordPress już zastępuje domyślny formularz własnymi stylami.
Jeśli jednak Twój motyw nadal używa statycznego, prostego formularza wyszukiwania, możesz skorzystać z tego poradnika, aby uczynić go bardziej przyjaznym dla użytkownika.
Mając to na uwadze, pokażemy Ci, jak łatwo dodać efekt przełączania wyszukiwania w WordPress i uczynić Twoją witrynę bardziej interaktywną. Oto szybki przegląd wszystkich tematów, które omówimy w tym przewodniku:
- Dodawanie efektu przełączania wyszukiwania w WordPress
- Rozwiązywanie problemów z efektem przełączania formularza wyszukiwania
- Dodatkowa wskazówka: Dodaj lepsze wyszukiwanie WordPress dla swojej strony internetowej
- FAQ: Dodawanie efektu przełącznika wyszukiwania w WordPress
- Więcej poradników, aby ulepszyć wyszukiwanie w WordPress
💡 Wskazówka od eksperta: Ten samouczek jest najbardziej odpowiedni dla średniozaawansowanych i zaawansowanych użytkowników WordPress, ponieważ wymaga podstawowej znajomości HTML / CSS.
Zacznijmy.
Dodawanie efektu przełączania wyszukiwania w WordPress
Aby dodać efekt przełącznika wyszukiwania w WordPress, musisz umieścić blok formularza wyszukiwania lub widżet na swojej stronie internetowej, a następnie dodać niestandardowy kod CSS.
Najpierw upewnijmy się, że masz formularz wyszukiwania na swojej stronie internetowej.
Dodawanie formularza wyszukiwania w motywie blokowym z pełnym edytorem strony
Jeśli używasz motywu WordPress oparty na blokach z funkcją pełnej edycji witryny, oto jak dodasz formularz wyszukiwania do swojej witryny.
Po prostu odwiedź Wygląd » Edytor z panelu administratora WordPress. Na ekranie edycji będziesz chciał dodać blok „Wyszukiwanie” tam, gdzie chcesz wyświetlić formularz wyszukiwania.
Po tym nie zapomnij kliknąć przycisku „Zapisz”, aby zachować zmiany.
Dodawanie formularza wyszukiwania w innych motywach WordPress
W przypadku motywów WordPress bez funkcji pełnej edycji witryny, możesz dodać blok lub widżet wyszukiwania do swojego paska bocznego lub dowolnego obszaru gotowego na widżety.
Aby to zrobić, przejdź do Wygląd » Widżety z panelu administracyjnego WordPress. Następnie możesz dodać blok/widżet „Wyszukiwanie” do paska bocznego, w którym chcesz wyświetlić formularz wyszukiwania.
Następnie znajdźmy przezroczysty obrazek dla ikony wyszukiwania.
Do tego tutorialu używamy tego obrazka, ponieważ nadaje się do ciemnych teł (możesz go swobodnie używać na swojej stronie internetowej).
Jeśli chcesz stworzyć własną ikonę wyszukiwania, świetnie byłoby stworzyć przezroczysty obraz PNG o wymiarach nie większych niż 50x50 pikseli.
Następnym krokiem jest przesłanie ikony na Twoją stronę internetową. Po prostu przejdź do Media » Dodaj nowe i kliknij „Wybierz pliki”, aby przesłać obraz ikony wyszukiwania.
Po przesłaniu będziesz chciał kliknąć przycisk „Kopiuj adres URL do schowka” i wkleić adres URL do edytora zwykłego tekstu, takiego jak Notatnik lub TextEdit.
Teraz, gdy wszystko jest na swoim miejscu, musisz dodać niestandardowe style CSS do swojej witryny WordPress. Zalecamy użycie WPCode, najlepszego pluginu do fragmentów kodu, do zapisywania niestandardowych stylów CSS.
WPCode pozwala łatwo dodawać niestandardowe fragmenty kodu w WordPress. Jest łatwy w użyciu, a Twój kod nie zostanie naruszony przez aktualizacje motywu ani podczas przełączania na inny motyw.
Niektórzy z naszych partnerów używają go do dodawania i zarządzania swoimi niestandardowymi fragmentami kodu. Działa dla nich wyjątkowo dobrze, a więcej informacji można znaleźć w naszej szczegółowej recenzji WPCode.
Zainstalujmy i aktywujmy darmową wtyczkę WPCode. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji po prostu odwiedź stronę Snippety kodu » + Dodaj snippet w panelu administracyjnym WordPress.
Na następnym ekranie zobaczysz Bibliotekę Snippetów WPCode.
Najedź kursorem na opcję „Dodaj własny kod (nowy fragment)” w bibliotece i kliknij przycisk „Dodaj własny fragment”, gdy się pojawi.
Po tym na ekranie pojawi się lista typów kodu. W tym samouczku musisz wybrać opcję „Fragment kodu HTML”.
Dzieje się tak, ponieważ niestandardowy CSS będzie ładowany w nagłówku witryny za pomocą HTML.
Stamtąd musisz podać tytuł dla tego fragmentu kodu.
Może to być cokolwiek, co pomoże Ci zidentyfikować fragment.
Teraz możesz wkleić poniższy kod do pola „Podgląd kodu”:
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
⚠️ Ważne: Nie zapomnij zastąpić /url/to/search-icon.png adresem URL obrazu, który skopiowałeś wcześniej.
Następnie musisz przełączyć przełącznik „Nieaktywny” na „Aktywny”.
Następnie nie zapomnij kliknąć przycisku „Zapisz fragment”.
I to wszystko!
Jeśli odwiedzisz swoją witrynę, zobaczysz swój formularz wyszukiwania z efektem przełączania w akcji.
Rozwiązywanie problemów z efektem przełączania formularza wyszukiwania
Powyższa metoda zadziałałaby z większością nowoczesnych motywów WordPress wykorzystujących bloki widżetów. Jednak w przypadku niektórych motywów ta metoda może nie zadziałać.
Może się to zdarzyć, jeśli formularz wyszukiwania w Twoim motywie WordPress nie ma klas wp-block-search__inside-wrapper i wp-block-search__input .
W takim przypadku będziesz musiał użyć narzędzia Narzędzie Inspektora, aby dowiedzieć się, jakie klasy CSS są używane przez Twój motyw WordPress.
Na przykład, na poniższym zrzucie ekranu, nasz przykładowy motyw używa tych klas CSS dla formularza wyszukiwania.
Teraz możesz zmodyfikować poniższy kod i zamiast tego użyć tych klas CSS.
Oto przykład:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Oto jak to wyglądało na naszej stronie testowej:
Dodatkowa wskazówka: Dodaj lepsze wyszukiwanie WordPress dla swojej strony internetowej
Efekt przełączania sprawia jedynie, że formularz wyszukiwania WordPress wygląda ładnie. Nie wpływa to na jakość wyników wyszukiwania Twojej witryny.
Domyślnie WordPress posiada bardzo podstawową funkcję wyszukiwania. Ta funkcja jest często powolna, niedokładna i może wyświetlać puste wyniki.
Tutaj właśnie pojawia się SearchWP, najlepszy plugin do wyszukiwania w WordPress. Pozwala on łatwo zastąpić domyślną funkcję wyszukiwania potężnym silnikiem wyszukiwania.
Przetestowaliśmy go, aby poznać wszystkie jego funkcje, i możesz zapoznać się z naszą pełną recenzją SearchWP, aby dowiedzieć się o nim więcej.
SearchWP automatycznie zastępuje formularze wyszukiwania, więc nie musisz edytować żadnych plików motywu. Szuka dopasowań wszędzie na Twojej stronie internetowej i drastycznie poprawia jakość wyników wyszukiwania.
Jest również wyposażony w rozszerzenie wyszukiwania na żywo, które natychmiast wyświetla wyniki podczas wpisywania zapytań przez użytkowników. Ponadto, posiada pełne wsparcie dla eCommerce, co pozwala na stworzenie inteligentnego wyszukiwania WooCommerce w Twoim sklepie internetowym.
Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem jak ulepszyć wyszukiwanie w WordPress za pomocą SearchWP.
FAQ: Dodawanie efektu przełącznika wyszukiwania w WordPress
Masz pytania dotyczące działania przełącznika wyszukiwania lub jego dostosowania na swojej stronie WordPress? Oto kilka często zadawanych pytań z jasnymi odpowiedziami, które Ci pomogą.
Czy muszę znać kodowanie, aby dodać efekt przełączania wyszukiwania?
Nie do końca. Chociaż podstawowa znajomość HTML lub CSS może pomóc, możesz postępować zgodnie z krokami w tym przewodniku bez żadnego doświadczenia w kodowaniu.
Co jeśli mój motyw nie wyświetla efektu przełączania poprawnie?
Niektóre motywy mogą wymagać dodatkowych dostosowań. Jeśli przełącznik nie wyświetla się poprawnie, możesz użyć narzędzia Inspekcja przeglądarki, aby znaleźć klasy CSS Twojego motywu i dostosować niestandardowy CSS, jak pokazano w samouczku.
Czy ten przełącznik wyszukiwania będzie działał na urządzeniach mobilnych?
Tak! Efekt przełączania jest responsywny i powinien dobrze działać zarówno na komputerach, jak i urządzeniach mobilnych. Upewnij się tylko, że przetestujesz go na różnych rozmiarach ekranu, aby potwierdzić, że wszystko wygląda dobrze.
Czy mogę użyć dowolnego obrazu jako ikony wyszukiwania?
Tak, ale najlepiej użyć przezroczystej ikony PNG, która będzie się wyróżniać na tle Twojej strony. Zalecamy, aby jej rozmiar nie przekraczał 50x50 pikseli, aby wyglądała ostro i ładowała się szybko.
Więcej poradników, aby ulepszyć wyszukiwanie w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać efekt przełączania wyszukiwania w WordPress. Następnie możesz uznać te przewodniki za pomocne:
- Jak dodać pasek wyszukiwania do menu WordPress
- Jak szukać według kategorii w WordPress
- Jak dodać wielojęzyczne wyszukiwanie w WordPress
- Jak uwzględnić niestandardowe typy postów w wynikach wyszukiwania WordPress
- Jak stworzyć przeszukiwalny katalog członków w WordPress
- Jak stworzyć przeszukiwalną bazę danych w WordPress
- Jak wykluczyć strony z wyników wyszukiwania WordPress
- Jak dodać funkcję wyszukiwania głosowego do swojej witryny WordPress
- Najlepsze wtyczki do wyszukiwania dla użytkowników 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.
Prad
Dzięki za to.
Domyślny interfejs bloku wyszukiwania jest dość nijaki. Podoba mi się ta implementacja. Jednak gdy wybrana jest opcja „Tylko przycisk”, po kliknięciu ikony wyszukiwania pasek wyszukiwania pojawia się po lewej stronie, przesuwając menu, co psuje interfejs. Czy jest sposób, aby pasek wyszukiwania pojawiał się pod przyciskiem wyszukiwania, jak na wielu stronach internetowych? Moim zdaniem takie podejście jest znacznie czystsze.
Dzięki.
Wsparcie WPBeginner
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
Mam taki efekt na stronie klienta.
Jedną z rzeczy, które należy wziąć pod uwagę przy wdrażaniu tej funkcji, jest doświadczenie mobilne.
Na mniejszych ekranach może być korzystne dostosowanie CSS, aby zapewnić, że rozszerzony pasek wyszukiwania nie będzie nakładał się na inne elementy.
Jiří Vaněk
Szukałem sposobu na zaoszczędzenie miejsca w moim głównym menu, gdzie pole wyszukiwania zajmowało sporo miejsca. Szczerze mówiąc, nie mogłem wymyślić, jak zaoszczędzić miejsce, ponieważ menu było dość długie. Więc spróbowałem zmniejszyć rozmiar pola wyszukiwania. Po przeczytaniu tego artykułu zastosowałem twoje rozwiązanie i jest to dokładnie to, czego szukałem. Wyszukiwanie na mojej stronie nie jest zbyt często używane, a to eleganckie rozwiązanie, aby zrobić miejsce na główne menu i zmniejszyć pole wyszukiwania do niezbędnych rozmiarów. Dobra robota.
Wsparcie WPBeginner
Cieszę się, że okazało się to pomocne!
Admin
James Burns
Dziękuję bardzo. Dokładnie te informacje, których potrzebowałem, przedstawione w łatwy do zrozumienia formacie.
Wsparcie WPBeginner
You’re welcome, glad you found our content helpful
Admin
Osh
Cześć,
Używam motywu potomnego, czy powinienem dodać te kody do plików motywu nadrzędnego?
Próbowałem to zrobić i nie działa, proszę o pomoc!!!
Dzięki
Wsparcie WPBeginner
Powinieneś dodać kod do swojego motywu potomnego
Admin
Benjamin Rutledge
Czy można to zaimplementować tylko na urządzeniach mobilnych? Mój motyw ma ładną animowaną funkcję wyszukiwania na komputerze, ale na urządzeniach mobilnych tylko przełącznik do pokazywania/ukrywania pola wyszukiwania w miejscu mojego logo.
Beth Terry
Cześć. Bardzo dziękuję za ten kod. Musiałem trochę pobawić się pozycjonowaniem, aby przycisk wyszukiwania pojawił się tam, gdzie chcę, a ponieważ chciałem, aby pojawił się tylko w wersji mobilnej, dodałem również CSS do zapytania medialnego dla ekranów o szerokości powyżej 800px, aby zamiast ikony wyświetlać pełne pole wyszukiwania. Udało mi się to świetnie, ale myślę, że jest to trochę skomplikowane dla osób, które chcą czegoś, co działa na zasadzie „podłącz i używaj”.
Wyniki można zobaczyć tutaj:
Wszystkim, którzy wątpią, JavaScript zdecydowanie nie jest potrzebny.
Beth Terry
Chciałbym również dodać, że używam motywu potomnego Twenty Twelve, który zawiera kod wyszukiwania HTML4. Dodanie obsługi HTML5 do functions.php nie rozwiązało problemu, więc skopiowałem i wkleiłem kod wyszukiwania HTML5, który opublikowałeś powyżej, do nagłówka mojego motywu, tam gdzie chciałem umieścić pole wyszukiwania.
Emily G
Cześć – implementuję to na stronie internetowej i chciałbym użyć FontAwesome zamiast obrazka. Nie mogę sprawić, żeby ikona się wyświetliła. Czy masz jakieś wskazówki? Dodaję czcionkę i rodzinę czcionek ikon: FontAwesome;
content: “\f002″; do .search-form input[type=”search”]
Dzięki!
Bradley
Spróbuj tego:
font: normal normal normal 1em/1 FontAwesome;
Steve
Miałem wielką nadzieję, że to zadziała. Wkleiłem kod w obszarze Dodatkowy CSS mojego motywu (twentytwelvechild), dodałem search-icon.png do folderu mojego motywu za pomocą FTM i dodałem add_theme_support(‘html5’, array(‘search-form’)); do pliku functions.php mojego motywu. Nie widzę żadnej zmiany i zastanawiam się, co przeoczyłem. Mam nadzieję, że ktoś mi coś podpowie. Dziękuję.
Harmandeep Singh
Nie działa.
Tłum
Dziękuję bardzo, działa jak marzenie.
Czy myślisz, że jest sposób, aby pole wyszukiwania pojawiało się od prawej do lewej (w przeciwieństwie do obecnego od lewej do prawej)?
Marimar
Wyrównaj tekst do prawej
text-align: right;
Przesuwa się na drugą stronę.
Tony López
Dzięki! Działa idealnie.
Cato
Tak… tak jak myślałem, to w ogóle nie działa. Jak to w ogóle ma działać bez JS?
Cato
Hmmm, to jest trochę stare, ale… czy to naprawdę nie wymaga javascriptu? Co to za czarna magia?
Wsparcie WPBeginner
Zamiast JS, ta technika wykorzystuje CSS.
Admin
SiRetu
Dzięki za kod… Czy to jest responsywne? Mam na myśli, że chcę, aby pole wyszukiwania było w pełni widoczne na urządzeniach mobilnych. Czy to możliwe?
Panfi
Not working for me and wonder why
Cassy
Działało mi to na Genesis, ale mój formularz wyszukiwania jest w moim pasku nawigacyjnym, a gdy szerokość ekranu jest stosunkowo mała, formularz wyszukiwania przesuwa się w dół.
Sohan
Działa!
Dziękuję bardzoooooooo!
Anur
Nie sądzę, żeby to działało na Genesis
Cassy
Udało mi się to uruchomić na Genesis. Musisz przenieść plik search-icon.png do folderu obrazów swojego motywu potomnego Genesis. Następnie, w zależności od tego, gdzie umieścisz formularz wyszukiwania (mój jest w pasku nawigacyjnym, więc jest nieco inny), dostosowujesz styl CSS do swoich upodobań. Musiałem zmodyfikować klasę „.genesis-nav-menu .search input”, aby to zadziałało.
Laura
Cześć Cassy, czy możesz podać więcej informacji o tym, jak zmodyfikowałeś klasę .genesis-nav-menu .search input? Nie mogę tego sprawić, żeby działało. Dzięki!
Maria
Cześć! Używam Genesis i nie mogę sprawić, by ten efekt działał. Czy masz jakieś wskazówki, dlaczego?
Anur
tak ten sam problem jestem na genesis z motywem enteprise pro nie działa.
Każdy, kto ma rozwiązanie, aby to zadziałało na genesis..
Roy
To jest naprawdę świetne! Czy jest możliwe, aby ikona pozostała statyczna po prawej stronie, podczas gdy formularz wysuwa się w lewo? Nie mogę tego rozgryźć!
Joshua Farr
Pozdrowienia – Dziękuję za ten świetny fragment kodu. Próbowałem wstawić go na stronę klienta, nad którą pracuję, używając wersji HTML5 kodu. Umieściłem dodatkowy fragment w functions.php i dodałem wszystkie style CSS. Dodałem ikonę wyszukiwania i formularz wyświetla się tak, jak chciałem na stronie – działa nawet efekt przełączania zgodnie z oczekiwaniami – ale kiedy wpisuję tekst, który chcę wyszukać, aby go przetestować, nie mogę przesłać wyszukiwania, aby zobaczyć wyniki. Używamy motywu WooCommerce, „Mystile”, który ma domyślny formularz wyszukiwania (który działa po wpisaniu), ale znacznie bardziej preferuję wygląd i funkcjonalność formularza, o którym mowa na tej stronie.
Próbowaliśmy umieścić kod formularza wyszukiwania wocommerce obok kodu, który podałeś powyżej, próbowaliśmy zamieniać fragmenty, aby „połączyć” te dwa… ale bez powodzenia.
Wszelkie rekomendacje byłyby niezwykle pomocne.
Dziękuję!
-Josh
Wsparcie WPBeginner
Może być wiele przyczyn tego problemu, nie jesteśmy w stanie pomóc w kwestiach związanych z kompatybilnością motywów.
Admin
Rajeesh Nair
Teraz to są ciekawe rzeczy. Chociaż jestem tylko początkującym i faktycznie używam opcji wyszukiwania, która jest domyślnie dostępna w motywie bloga, która jest jak wyskakujące okienko (choć nie dokładnie wyskakujące okienko, ponieważ jest to CSS, a nie JavaScript) i wyświetla pasek wyszukiwania.
Ale dokładnie tego szukam, jak wyświetlić wyszukiwanie Google wraz z wyszukiwaniem bloga, tak jak na popularnych blogach, takich jak ListVerse i inne. Proszę, poprowadź mnie przez to!
Wsparcie WPBeginner
Zapoznaj się z naszym przewodnikiem, jak dodać wyszukiwanie Google w WordPress.
Admin
adolf witzeling
Kolejny świetny tutorial. Dodam to na moją stronę – po prostu dlatego, że jest fajne.
alexisnicholson
Kod wygląda fantastycznie, doceniam Twoje wysiłki, na pewno wypróbuję to dla mojego projektu WordPress.
Codingbrains
Shahraar Khan
Pomocny byłby też przykład. Również, co oznacza użycie atrybutu role=\"search\" w tagu form, do czego służy atrybut \"role\"?
Susan Silver
Szukałem prostego tutorialu na ten temat. Dzięki! Czy zrobiłeś już jakiś na temat menu rozwijanych, takich jak w aplikacji mobilnej Facebooka? Te menu stają się bardzo popularne, nawet w aplikacjach na komputery.
Wsparcie WPBeginner
Właściwie mamy, sprawdź, jak dodać menu panelu przesuwnego w WordPress.
Admin