Czy chcesz dodać efekt przełączania wyszukiwania w WordPress?
Efekt przełączania wyszukiwania umożliwia wyświetlanie ikonki wyszukiwania zamiast formularza. Kliknięcie ikonki powoduje wyświetlenie formularza wyszukiwania z subtelną animacją wysuwania.
W tym artykule pokażemy, jak łatwo dodać efekt przełączania wyszukiwania w WordPress.
Czym jest efekt przełączania wyszukiwania w WordPress?
Efekt przełączania wyszukiwania jest techniką projektowania stron internetowych mającą na celu poprawę komfortu wyszukiwania na witrynie internetowej WordPress.
Zamiast wyświetlać formularz wyszukiwania, wyświetlana będzie ikonka wyszukiwania. Gdy użytkownik ją kliknie, pojawi się formularz wyszukiwania z wysuwaną animacją.
Domyślny formularz wyszukiwania WordPress nie wygląda zbyt dobrze. Wiele topowych motywów WordPress zastępuje już domyślny formularz swoimi stylami.
Jeśli jednak twój motyw nadal wykorzystuje statyczny, zwykły formularz wyszukiwania, możesz skorzystać z tego poradnika, aby uczynić go bardziej przyjaznym dla użytkownika.
Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo dodać efekt przełączania wyszukiwania w WordPress.
Uwaga: Ten poradnik jest przeznaczony dla średnio zaawansowanych i zaawansowanych użytkowników, ponieważ wymaga podstawowej znajomości HTML / CSS.
Dodawanie efektu przełączania wyszukiwania w WordPress
Aby dodać efekt przełączania wyszukiwania w WordPress, musisz umieścić blok formularza wyszukiwania lub widżet na swojej witrynie internetowej, a następnie dodać niestandardowy kod CSS.
Po pierwsze, musisz upewnić się, że do twojej witryny internetowej dodano formularz wyszukiwania.
Dodawanie formularza wyszukiwania w motywie blokowym z pełną edycją witryny
Jeśli korzystasz z nowszego motywu blokowego WordPress z funkcją pełnej edycji witryny, to właśnie w ten sposób dodasz formularz wyszukiwania do twojej witryny internetowej.
Wystarczy przejść na stronę Wygląd ” Edytor. Na ekranie edycji dodaj blok „Szukaj”, w którym chcesz wyświetlić formularz wyszukiwania.
Następnie nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać twoje zmiany.
Dodawanie formularza wyszukiwania w innych motywach WordPress
W przypadku motywów WordPress bez funkcji pełnej edycji witryny możesz dodać blok wyszukiwania lub widżet do panelu bocznego lub dowolnego obszaru obsługującego widżety.
Przejdź do strony Wygląd ” Widżety i dodaj blok/widżet „Szukaj” do panelu bocznego, w którym chcesz wyświetlać formularz wyszukiwania.
Następnie należy znaleźć przezroczysty obrazek dla ikonki wyszukiwania.
Na potrzeby tego poradnika użyjemy tego obrazka. Nadaje się on do ciemnych teł (nie krępuj się użyć go na twojej witrynie internetowej).
Jeśli chcesz stworzyć swoją własną ikonkę wyszukiwania, dobrym rozwiązaniem będzie stworzenie przezroczystego obrazka PNG o wymiarach nie większych niż 50×50 pikseli.
Gdy masz już ikonkę z obrazkiem, musisz wgrać ją na swoją witrynę internetową. Przejdź do strony Media ” Dodaj utwórz nowy i prześlij swój obrazek ikonki wyszukiwania.
Po przesłaniu kliknij przycisk „Kopiuj adres URL do schowka”, a następnie wklej ten adres URL do zwykłego edytora tekstu, takiego jak Notatnik lub TextEdit.
Teraz, gdy wszystko jest na swoim miejscu, musisz dodać niestandardowy CSS do twojej witryny internetowej WordPress.
Na potrzeby tego poradnika zalecamy użycie wtyczki WPCode do zapisania twojego własnego CSS.
WPCode umożliwia łatwe dodawanie własnych fragmentów kodu w WordPress. Jest łatwy w użyciu, a twój kod nie będzie miał wpływu na aktualizacje motywu lub po przejściu na inny motyw.
Najpierw należy zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy przejść na stronę fragmentów kodu w twoim panelu administracyjnym WordPress. Następnie wystarczy kliknąć przycisk „Utwórz nowy” u góry.
Na następnym ekranie należy najpierw podać tytuł tego fragmentu kodu. Może to być cokolwiek, co pomoże ci zidentyfikować ten fragment kodu.
Następnie zmień „Rodzaj kodu” na „Fragment kodu HTML”. Będziemy wczytywać nasz własny CSS w nagłówku witryny internetowej za pomocą HTML.
Teraz należy wkleić poniższy kod w polu „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 obrazka, który skopiowałeś wcześniej.
Następnie należy przełączyć przełącznik „Nieaktywny” na „Aktywny”, a następnie kliknąć przycisk „Zapisz fragment kodu”.
Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć Twój formularz wyszukiwania z efektem przełączania w działaniu.
Rozwiązywanie problemów z efektem przełączania formularza wyszukiwania
Powyższa metoda będzie działać z większością nowoczesnych motywów WordPress, które używają bloków widżetów.
Jednak w przypadku niektórych motywów ta metoda może nie działać.
Może się tak 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 inspect, aby dowiedzieć się, które klasy CSS są używane przez twój motyw WordPress.
Na przykład na poniższym zrzucie ekranu nasz motyw demonstracyjny 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 testowej witrynie internetowej.
Wskazówka bonusowa: Dodaj lepszą wyszukiwarkę WordPress dla twojej witryny internetowej
Efekt przełączania sprawia, że Twój formularz wyszukiwania WordPress wygląda ładnie. Nie ma on wpływu na jakość wyników wyszukiwania na twojej witrynie internetowej.
Domyślnie WordPress posiada bardzo podstawową funkcję wyszukiwania. Ta funkcja wyszukiwania jest powolna, niedokładna i często pokazuje puste wyniki.
W tym miejscu z pomocą przychodzi SearchWP.
Jest to najlepsza wtyczka wyszukiwania WordPress na rynku i pozwala łatwo zastąpić domyślną funkcję wyszukiwania potężną wyszukiwarką.
SearchWP automatycznie zastępuje formularze wyszukiwania, dzięki czemu nie trzeba edytować żadnych plików motywu. Szuka dopasowań wszędzie na twojej witrynie 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łną obsługę e-handlu, co pozwala na stworzenie inteligentnego środowiska wyszukiwania WooCommerce w twoim sklepie internetowym.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać efekt przełączania wyszukiwania w WordPress. Możesz również zapoznać się z naszym przewodnikiem po śledzeniu konwersji WordPress lub dowiedzieć się, jak znaleźć najpopularniejsze wpisy na twojej witrynie.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
James Burns says
Thank you so much. Exactly the info I needed, presented in an easy-to-understand format.
WPBeginner Support says
You’re welcome, glad you found our content helpful
Administrator
Osh says
Hi,
I’m using a child theme, should i add those codes to the parent theme’s files?
I tried to do that and it is not working, please help !!!
Thanks
WPBeginner Support says
You would want to add the code to your child theme
Administrator
Benjamin Rutledge says
Is it possible to implement this only on mobile? My theme has a nice animated search function on desktop, but only a toggle to show/hide search box in place of my logo on mobile.
Beth Terry says
Hi. Thank you very much for this code. I did have to play around with the positioning to get the search button to appear where I want it, and since I only wanted it to appear in the mobile version, I also added css to the media query for over 800px screens to show the full search field instead of the icon. I got it working great, but I do think it’s a little complicated for folks who just want something to basically plug and play.
You can view the results here:
To everyone who doubts, javascript is definitely not needed.
Beth Terry says
Also, I want to add that I am using a Twenty Twelve child theme, which comes with the HTML4 search code. Adding the HTML5 support to the functions.php did not fix it, so I copied and pasted the HTML5 search code that you posted above into my theme header where I wanted to search box to be.
Emily G says
Hi there – implementing this on a website and would like to use FontAwesome instead of an image. I cannot get the icon to show yup, however. Do you have any tips? I am adding the font and icon font-family: FontAwesome;
content: „\f002″; to the .search-form input[type=”search”]
Thanks!
Bradley says
Try this:
font: normal normal normal 1em/1 FontAwesome;
Steve says
I was so hoping this would work for me. I pasted in the code in the Additional CSS area of my theme (twentytwelvechild), added the search-icon.png to my theme folder using FTM and added add_theme_support(’html5′, array(’search-form’)); to my theme’s functions.php file. I see no change and wonder what I have missed. I hope someone can offer me a clue. thank you.
Harmandeep Singh says
Its not working.
Crowd says
Thank you very much, works like a charm.
Do you think there’s a way to make the search field appear from right to left (unlike from left to right like now)?
Marimar says
Align the text to the right
text-align: right;
It slides to the other side.
Tony López says
Thanks! It work perfectly.
Cato says
Yeah… just like I thought, this doesn´t work at all. How is it supossed to work with no JS anyway?
Cato says
Hmmm this is kind of old but… no javascript required here really? what kind of dark magic is this?
WPBeginner Support says
Instead of JS, this technique uses CSS.
Administrator
SiRetu says
Thanks for the code… Is this responsive? I mean, I want the search field is fully showed when in mobile. Is it possible?
Panfi says
Not working for me and wonder why
Cassy says
I got this working on genesis but my search form is in my nav bar, and when the screen width is relatively too small, the search form moves down.
Sohan says
It works!
Thank you soooooooooooooo much!
Anur says
I dont think this works on Genesis
Cassy says
I got it working on Genesis. You have to move the search-icon.png into your genesis child theme images folder. Then, depending on where you put your search form, mine is in the nav bar so it is slightly different, you adjust the css style to your likes. I had to modify the „.genesis-nav-menu .search input” class to get it working.
Laura says
Hi Cassy, Can you give a little more info on how you modified the .genesis-nav-menu .search input class? I can’t seem to get it working. Thanks!
Maria says
Hi! I’m using Genesis and I can’t get this effect to work. Any tips as to why?
Anur says
yea the same problem im on genesis with enteprise pro theme doesnt work.
Anyone who has solution to make this work on genesis..
Roy says
this is really great! Is it possible to get the icon to sit static at the right while the form slides out to the left? I can’t seem to figure it out!
Joshua Farr says
Greetings – Thank you for this great bit of code. I’ve tried inserting it into a client’s site that I’m working, using the HTML5 version of the code, I placed the extra bit into functions.php and added all of the css. I put in a search icon and got the form to show up how I want on the site – it will even do all of the toggle-ing effect as desired – but when I enter text that I want to search to test it out, I can not submit the search to view search results. We are using a woocommerce theme, „Mystile”, which has a default search form (which works when entered) but I much prefer the looks and functionality of the form as mentioned on this page.
We tried putting the wocommerce search form code side by side with the code you gave above, tried swapping out bits and pieces to „merge” the two…but no luck.
Any reccomendations would be extremely helpful.
Thank you!
-Josh
WPBeginner Support says
There could be many things that may cause this, it is not possible for us to help out with theme compatibility issues.
Administrator
Rajeesh Nair says
Now that’s some interesting stuff there. Though I am a mere beginner and I actually use the search option that has come default with the blog theme which is like a pop-up (not exactly a pop-up though as its CSS and not javascript) and displays search bar.
But what I am exactly looking for is that how to display Google Search along with Blog search as found in popular blogs like ListVerse and others. Please guide me through this!
WPBeginner Support says
Take a look at our guide on how to add Google search in WordPress.
Administrator
adolf witzeling says
Another great tutorial. I will add this to my site-just because it’s cool.
alexisnicholson says
Code looks fabulous , I appreciate your efforts , surely gonna try this one for my word press project .
Codingbrains
Shahraar Khan says
A demo would be helpful.. Also what does the use of role=”search” attribute in the form tag, what is the attribute „role” used for?
Susan Silver says
I have been looking for a simple tutorial on this. Thanks! Have you done one yet on the sliding menus like those on the Facebook mobile app? These menus are becoming very popular, even for desktop apps.
WPBeginner Support says
Actually we have, checkout how to add a slide panel menu in WordPress.
Administrator