Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Créer une barre de recherche avec Effet Toggle sous Wordpress

Màj le 7 juin 2014

Vous avez bien remarqué sur de nombreux sites populaires une barre de recherche avec effet Toggle, c’est à dire une icône de recherche  simple qui s’affiche,mais lorsque l’utilisateur clique sur elle une barre de recherche glisse automatiquement pour afficher le champs de saisie.

Dans cet article, nous allons vous montrer comment ajouter un effet « Toggle »  à votre formulaire de recherche de WordPress.

effet-toggle

Afficher le formulaire de recherche dans Wordpress

Les Thèmes de  WordPress utilisent <?php get_search_form(); ?> pour afficher le formulaire de recherche. Il peut produire deux formulaires de recherche différents, l’un pour les thèmes HTML4 et un  autre pour les thèmes HTML5.

Si votre thème avait cette ligne dans le fichier functions.php : add_theme_support('html5', array('search-form')) , alors elle va afficher un formulaire de recherche en HTML5. Sinon, il va afficher un  formulaire de recherche en HTML4.

Une autre façon de savoir quelle formulaire utilisé par votre thème, c’est de voir le code source du formulaire de recherche en utilisant une extension comme « firebug » .

Si votre thème ne prend pas en charge HTML5 , vous allez trouver ce code:

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

Si votre thème prend en charge HTML5 , vous allez trouver ce code:

 <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</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>

Dans ce tutoriel nous allons utiliser le formulaire de recherche en HTML5. Si votre thème génère un formulaire de recherche en HTML4 , il faut ajoutez cette ligne dans le fichier functions.php de votre thème:

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

Une fois terminé, on va passer à la prochaine étape pour afficher le formulaire de recherche où vous le souhaitez :

Créer une barre de recherche avec Effet Toggle

Maintenant il faut chercher une icône de recherche, ou bien utilisez l’une des deux icones ci-dessous (clique droit et télécharger):

icone-de-recherche                      search-icon-2

Toutefois, n’hésitez pas à créer votre propre icône en utilisant un logiciel comme Photoshop ou la télécharger en cherchant sur internet.

Assurez-vous que l’icône est nommée search-icon.png.

Maintenant, vous devez envoyer cette  icône dans le dossier images de votre thème. Connectez-vous à votre site en utilisant un client FTP comme Filezilla.

Maintenant, c’est la dernière étape et la plus importante. Vous devez ajouter cette CSS à la feuille de style de votre thème:

.site-header .search-form {
	position: absolute;
	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;
	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;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}
 

Notez que vous aurez encore à régler le positionnement de l’icône de recherche selon la disposition de votre thème.


Vous aimerez également...

  • Ajouter 728×90 Bannière Adsense En tête de thèmes StudioPress
  • Ajouter une pop-up Facebook à votre blog Wordpress sans plugin
  • Comment supprimer Post Meta et Post Info sous Wordpress
  • Comment ajouter un ruban à votre blog Wordpress
  • Télécharger Genesis sample [3.4.1]: thème enfant dernière version 2021
  • Créer un logo pour son blog facilement

Classé sous :Thèmes Balisé avec :wordpress design

Accueil / Thèmes / Créer une barre de recherche avec Effet Toggle sous Wordpress

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact