Comment ajouter un effet de bascule de recherche dans WordPress

Avez-vous vu l'icône de recherche avec effet de bascule sur de nombreux sites Web populaires? Jetez un coup d'oeil à notre projet sœur List25 pour un exemple. L'idée est d'afficher une simple icône de recherche. Lorsque l'utilisateur clique dessus, les formulaires de recherche s'affichent également sous le nom d'effet de basculement. C'est un effet soigné qui économise également de l'espace et permet à vos utilisateurs de se concentrer sur le contenu. Sans parler de cela, c'est génial pour les thèmes réactifs mobiles. Dans cet article, nous allons vous montrer comment ajouter un effet de bascule de recherche dans les thèmes WordPress..

Remarque: Ce tutoriel est destiné aux utilisateurs de niveau intermédiaire ayant une connaissance pratique des balises de modèle WordPress, HTML et CSS. Les utilisateurs de niveau débutant sont invités à s'exercer d'abord sur le serveur local.

Affichage du formulaire de recherche WordPress

WordPress ajoute des classes CSS par défaut au HTML généré par divers tags de modèles dans un thème. Thèmes WordPress utilisent balise de modèle pour afficher le formulaire de recherche. Il peut générer deux formulaires de recherche différents, l'un pour les thèmes HTML4 et l'autre pour les thèmes avec prise en charge de HTML5. Si votre thème a add_theme_support ('html5', array ('formulaire de recherche')) dans le fichier functions.php, cette balise de modèle générera un formulaire de recherche HTML5. Sinon, il va sortir le formulaire de recherche HTML4.

Une autre façon de savoir quelle forme génère votre thème consiste à consulter le code source du formulaire de recherche..

C'est la forme que la balise de modèle get_search_form () s'affichera lorsque votre thème ne sera pas pris en charge en HTML5:

 
 Rechercher:     

Et c'est la forme qu'il va générer pour un thème avec support HTML5.

   Rechercher:     

Pour les besoins de ce didacticiel, nous allons utiliser le formulaire de recherche HTML5. Si votre thème génère un formulaire de recherche HTML4, ajoutez cette ligne de code dans le fichier functions.php de votre thème:

 add_theme_support ('html5', array ('formulaire de recherche')); 

Une fois que vous vous êtes assuré que votre formulaire de recherche générait un formulaire HTML5, l'étape suivante consiste à placer le formulaire de recherche à l'endroit où vous souhaitez l'afficher avec l'effet de bascule..

Ajout de l’effet de basculement au formulaire de recherche WordPress

La première chose dont vous aurez besoin est une icône de recherche. Le thème par défaut Twenty Treize dans WordPress est livré avec une très jolie petite icône, que nous utiliserons dans notre tutoriel. Cependant, n'hésitez pas à créer le vôtre dans Photoshop ou à en télécharger un à partir du Web. Assurez-vous simplement que le fichier s'appelle search-icon.png.

Vous devez maintenant télécharger cette icône de recherche dans le dossier des images de votre thème. Connectez-vous à votre site Web à l'aide d'un client FTP tel que Filezilla et ouvrez votre répertoire de thèmes..

Maintenant, c'est l'étape finale et la plus cruciale. Vous devez ajouter ce CSS à la feuille de style de votre thème:

 .en-tête de site .search-form position: absolute; à droite: 200px; en haut: 200px;  .site-header .search-field background-color: transparent; background-image: url (images / search-icon.png); position de fond: centre 5px; répétition de fond: non répétée; taille de l'arrière-plan: 24px 24px; bordure: aucune; curseur: pointeur; hauteur: 37px; marge: 3px 0; remplissage: 0 0 0 34px; position: relative; -webkit-transition: largeur 400ms facilité, fond 400ms facilité; transition: largeur 400ms facilité, fond 400ms facilité; largeur: 0;  .site-header .search-field: focus background-color: #fff; bordure: solide 2px # c3c0ab; curseur: texte; contour: 0; largeur: 230px;  .search-form .search-submit display: none;  

La chose importante à noter à propos de ce CSS, ce sont les effets de transition CSS3 qui nous permettent de créer facilement l’effet de bascule. Notez également que vous devrez toujours ajuster le positionnement de l'icône de recherche et du formulaire en fonction de la disposition de votre thème..

Nous espérons que cet article vous a aidé à ajouter un effet de bascule de recherche dans votre thème WordPress. Quelles sont vos pensées sur le formulaire de recherche à bascule? Nous voyons de plus en plus de sites utilisant cet effet. Laissez vos commentaires et questions dans les commentaires ci-dessous ou rejoignez-nous dans la conversation sur Google+.