Jak dodać efekt przełączania wyszukiwania w WordPress

Czy widziałeś ikonę wyszukiwania z efektem przełączania na wielu popularnych stronach internetowych? Spójrz na nasz siostrzany projekt List25 jako przykład. Chodzi o to, aby wyświetlić prostą ikonę wyszukiwania, a gdy użytkownik kliknie na nią, formularze wyszukiwania wysuwają się, znane również jako efekt przełączania. Jest to schludny efekt, który również oszczędza miejsce i pozwala użytkownikom skupić się na treści. Nie wspominając o tym, że jest to idealne rozwiązanie dla responsywnych motywów mobilnych. W tym artykule pokażemy, jak dodać efekt przełączania wyszukiwania w motywach WordPress.

Uwaga: Ten poradnik jest dla średniozaawansowanych użytkowników z praktyczną znajomością znaczników szablonów WordPress, HTML i CSS. Początkujący użytkownicy powinni najpierw ćwiczyć na serwerze lokalnym.

Wyświetlanie Formularza Wyszukiwania WordPress

WordPress dodaje domyślne klasy CSS do HTML generowanego przez różne tagi szablonu wewnątrz motywu. Korzystanie z motywów WordPress <?php get_search_form(); ?> znacznik szablonu do wyświetlenia formularza wyszukiwania. Może wyprowadzać dwa różne formularze Wyszukiwania, jeden dla motywów HTML4 i jeden dla motywów z obsługą HTML5. Jeśli twój motyw ma add_theme_support ('html5', array ('search-form')) funkcje liniowe.plik php, a następnie ten znacznik szablonu wyświetli formularz wyszukiwania HTML5. W przeciwnym razie wyświetli formularz wyszukiwania HTML4.

Innym sposobem, aby dowiedzieć się, jaką formę generuje Twój motyw, jest spojrzenie na kod źródłowy formularza wyszukiwania.

To jest formularz get_search_form() znacznik szablonu będzie wyświetlany, gdy twój motyw nie obsługuje HTML5:

< form role= "search" method = " get "id =" searchform " action="<?php echo home_url( '/' ); ?>">
    <div> < label class="screen-reader-text" for="s">Szukaj:< / label>
        <input type = "text" value = ""name=" s "id = "s" / >
        <input type = "submit" id = "searchsubmit"value=" Search" />
    < / div>
< / form>

I to jest formularz, który wygeneruje dla motywu z obsługą HTML5.

< form role= "search" method= " get " class=" search-form"action="<?php echo home_url( '/' ); ?>">
	< label>
		< span class="screen-reader-text">Szukaj:< / span>
		<input type = "search" class = "search-field" placeholder= "Search ..." value = ""name =" s "title =" Search for:" / >
	< / label>
	<input type = "submit" class = "search-submit"value= "Search" / >
< / form>

Ze względu na ten samouczek użyjemy formularza wyszukiwania HTML5. Jeśli szablon generuje formularz wyszukiwania HTML4, dodaj tę linię kodu do funkcji szablonu.plik php:

add_theme_support ('html5', array ('search-form'));

Po upewnieniu się, że formularz wyszukiwania generuje formularz HTML5, następnym krokiem jest umieszczenie formularza wyszukiwania w miejscu, w którym chcesz go wyświetlić, z efektem przełączania.

Dodanie efektu przełączania do formularza wyszukiwania WordPress

Pierwszą rzeczą, której potrzebujesz, jest ikona wyszukiwania. Domyślny motyw Twenty Thirteen w WordPress jest wyposażony w bardzo ładną małą ikonę i będziemy go używać w naszym samouczku. Możesz jednak stworzyć własny w Photoshopie lub pobrać go z Internetu. Upewnij się tylko, że plik ma nazwę search-icon.png.

Teraz musisz przesłać tę ikonę wyszukiwania do folderu obrazów motywu. Połącz się z witryną za pomocą klienta FTP, takiego jak Filezilla, i otwórz katalog motywów.

Jest to ostatni i najważniejszy krok. Musisz dodać ten CSS do arkusza stylów motywu:

.site-header .search-form {
	pozycja: absolutna;
	right: 200px;
	top: 200px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url (images / search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	rozmiar tła: 24px 24px;
	obramowanie: brak;
	kursor: wskaźnik;
	wysokość: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	pozycja: względna;
	- webkit-Przejście: szerokość 400ms łatwość, tło 400ms łatwość;
	Przejście: szerokość 400ms łatwość, tło 400ms łatwość;
	Szerokość: 0;
}

.site-header .search-field: focus {
	background-color: # ffff;
	border: 2px solid #c3c0ab;
	kursor: tekst;
	zarys: 0;
	width: 230px;
}
.Szukaj-formularz
.search-submit { 
Wyświetlacz: Brak;
}

Ważną rzeczą, na którą należy zwrócić uwagę na ten CSS, są efekty przejścia CSS3, które pozwalają nam z łatwością tworzyć efekt przełączania. Pamiętaj również, że nadal będziesz musiał dostosować pozycjonowanie ikony wyszukiwania i formularza zgodnie z układem motywu.

Mamy nadzieję, że ten artykuł pomógł Ci dodać efekt przełączania wyszukiwania w motywie WordPress. Co sądzisz o przełączeniu formularza wyszukiwania? Coraz więcej stron korzysta z tego efektu. Zostaw swoją opinię i pytania w komentarzach poniżej lub dołącz do nas w rozmowie na Google+.