Hoe u een Search Toggle-effect in WordPress kunt toevoegen

Heb je het zoekpictogram met schakeleffect op veel populaire websites gezien? Neem een ​​kijkje in ons zusterproject List25 voor een voorbeeld. Het idee is om een ​​eenvoudig zoekpictogram weer te geven en wanneer de gebruiker erop klikt, schuift het zoekformulier naar buiten, ook wel het toggle-effect genoemd. Het is een mooi effect dat ook ruimte bespaart en uw gebruikers toestaat om zich op de inhoud te concentreren. Om nog maar te zwijgen, dit is geweldig voor mobiele responsieve thema's. In dit artikel laten we u zien hoe u een zoekschakeleffect toevoegt in WordPress Thema's.

Notitie: Deze tutorial is bedoeld voor intermediaire gebruikers met praktische kennis van WordPress-sjabloonlabels, HTML en CSS. Gebruikers op beginnersniveau wordt aangeraden eerst op de lokale server te oefenen.

WordPress-zoekformulier weergeven

WordPress voegt standaard CSS-klassen toe aan HTML gegenereerd door verschillende sjabloontags in een thema. WordPress-thema's gebruiken sjabloon tag om zoekformulier weer te geven. Het kan twee verschillende zoekvormen uitvoeren, één voor HTML4-thema's en één voor thema's met HTML5-ondersteuning. Als je thema heeft add_theme_support ('html5', array ('zoek-formulier')) line in functions.php file, dan zal deze template tag een HTML5 zoekformulier uitvoeren. Anders zal het HTML4-zoekformulier uitvoeren.

Een andere manier om erachter te komen welke vorm uw thema genereert, is door naar de broncode van het zoekformulier te kijken.

Dit is het formulier get_search_form () sjabloon tag zal worden weergegeven wanneer uw thema geen HTML5-ondersteuning heeft:

 
 Zoeken:     

En dit is het formulier dat wordt gegenereerd voor een thema met HTML5-ondersteuning.

   Zoeken:     

In het belang van deze zelfstudie gebruiken we het HTML5-zoekformulier. Als uw thema een HTML4-zoekformulier genereert, voegt u deze regel code toe aan het functie.php-bestand van uw thema:

 add_theme_support ('html5', array ('zoek-formulier')); 

Nadat u ervoor heeft gezorgd dat uw zoekformulier HTML5-formulier genereert, is de volgende stap om het zoekformulier te plaatsen waar u het wilt weergeven met het toggle-effect.

Het toggle-effect toevoegen aan het WordPress-zoekformulier

Het eerste dat u nodig heeft, is een zoekpictogram. Het standaard Twenty Thirteen-thema in WordPress wordt geleverd met een heel leuk klein pictogram en we zullen dat in onze tutorial gebruiken. U kunt echter uw eigen foto's maken in Photoshop of deze downloaden van internet. Zorg ervoor dat het bestand de naam search-icon.png heeft.

Nu moet je dit zoekpictogram uploaden naar de map met afbeeldingen van je thema. Maak verbinding met uw website met behulp van een FTP-client zoals Filezilla en open uw themamap.

Dit is nu de laatste en meest cruciale stap. U moet deze CSS toevoegen aan de stylesheet van uw thema:

 .site-header .search-vorm positie: absoluut; rechts: 200px; top: 200px;  .site-header .search-field background-color: transparent; background-image: url (images / search-icon.png); achtergrondpositie: 5px midden; achtergrondherhaling: geen herhaling; achtergrondgrootte: 24 px 24 px; rand: geen; cursor: pointer; hoogte: 37px; marge: 3px 0; opvulling: 0 0 0 34px; positie: relatief; -webkit-overgang: breedte 400ms gemak, achtergrond 400ms verlichting; overgang: breedte 400ms gemak, achtergrond 400ms verlichting; breedte: 0;  .site-header .zoek-field: focus background-color: #fff; border: 2px solid # c3c0ab; cursor: tekst; overzicht: 0; breedte: 230 px;  .search-form .search-submit display: none;  

Het belangrijkste om op te merken over deze CSS, zijn de CSS3 overgangseffecten waarmee we het toggle-effect met gemak kunnen creëren. Merk ook op dat u de positie van het zoekpictogram en -formulier nog steeds moet aanpassen aan de lay-out van uw thema.

We hopen dat dit artikel u heeft geholpen bij het toevoegen van het zoekschakeleffect in uw WordPress-thema. Wat vindt u van het toggle-zoekformulier? We zien dat steeds meer sites dit effect gebruiken. Laat uw feedback en vragen achter in de reacties hieronder of neem deel aan het gesprek bij Google+.