{"id":14532,"date":"2020-05-22T21:46:11","date_gmt":"2020-05-22T21:46:11","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-un-effet-de-bascule-de-recherche-dans-wordpress\/"},"modified":"2020-05-22T21:46:11","modified_gmt":"2020-05-22T21:46:11","slug":"comment-ajouter-un-effet-de-bascule-de-recherche-dans-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-un-effet-de-bascule-de-recherche-dans-wordpress\/","title":{"rendered":"Comment ajouter un effet de bascule de recherche dans WordPress"},"content":{"rendered":"

Avez-vous vu l’ic\u00f4ne de recherche \u00e0 bascule sur de nombreux sites Web populaires? Jetez un \u0153il \u00e0 notre projet s\u0153ur List25 pour voir un exemple. L’id\u00e9e est d’afficher une simple ic\u00f4ne de recherche, et lorsque l’utilisateur clique dessus, les formulaires de recherche glissent, \u00e9galement connus sous le nom d’effet de bascule. C’est un effet soign\u00e9 qui \u00e9conomise \u00e9galement de l’espace et permet aux utilisateurs de se concentrer sur le contenu. Sans oublier, c’est id\u00e9al pour les sujets qui r\u00e9pondent aux appareils mobiles. Dans cet article, nous vous montrerons comment ajouter un effet de bascule de recherche dans les th\u00e8mes WordPress. <\/p>\n

\"Recherchez<\/p>\n

Remarque:<\/strong> Ce tutoriel est destin\u00e9 aux utilisateurs interm\u00e9diaires ayant une connaissance pratique des balises de mod\u00e8le WordPress, HTML et CSS. Les utilisateurs de niveau d\u00e9butant sont encourag\u00e9s \u00e0 s’exercer d’abord sur le serveur local. <\/p>\n

<\/span>Afficher le formulaire de recherche WordPress<\/span><\/h4>\n

WordPress ajoute des classes CSS par d\u00e9faut au code HTML g\u00e9n\u00e9r\u00e9 par diverses balises de mod\u00e8le au sein d’un th\u00e8me. Utilisez le mod\u00e8le de balise de th\u00e8me WordPress pour afficher le formulaire de recherche. Vous pouvez g\u00e9n\u00e9rer deux formulaires de recherche diff\u00e9rents, un pour les th\u00e8mes HTML4 et un pour les th\u00e8mes pris en charge HTML5. Si votre th\u00e8me a la ligne add_theme_support (\u2018html5\u2019, array (\u2018search-form\u2019)) dans le fichier functions.php, cette balise de mod\u00e8le g\u00e9n\u00e9rera un formulaire de recherche HTML5. Sinon, il g\u00e9n\u00e9rera le formulaire de recherche HTML4. <\/p>\n

Une autre fa\u00e7on de d\u00e9couvrir le formulaire g\u00e9n\u00e9r\u00e9 par votre sujet consiste \u00e0 consulter le code source du formulaire de recherche. <\/p>\n

Voici la balise de mod\u00e8le de formulaire get_search_form () qui sera affich\u00e9e lorsque votre th\u00e8me ne prend pas en charge HTML5: <\/p>\n

<\/pre>\n
Et c’est ainsi qu’il va g\u00e9n\u00e9rer pour un th\u00e8me avec prise en charge HTML5. <\/p>\n
<\/pre>\n
Pour les besoins de ce tutoriel, nous utiliserons le formulaire de recherche HTML5. Si votre th\u00e8me g\u00e9n\u00e8re un formulaire de recherche HTML4, ajoutez cette ligne de code dans le fichier functions.php de votre th\u00e8me: <\/p>\n
add_theme_support('html5', array('search-form'));\r\n<\/pre>\n
Une fois que vous vous \u00eates assur\u00e9 que votre formulaire de recherche g\u00e9n\u00e8re un formulaire HTML5, l’\u00e9tape suivante consiste \u00e0 placer le formulaire de recherche l\u00e0 o\u00f9 vous souhaitez l’afficher avec l’effet de bascule. <\/p>\n
<\/span>Ajouter un effet de bascule au formulaire de recherche WordPress<\/span><\/h4>\n
La premi\u00e8re chose dont vous aurez besoin est une ic\u00f4ne de recherche. Le th\u00e8me Twenty Thirteen par d\u00e9faut dans WordPress est livr\u00e9 avec une tr\u00e8s jolie petite ic\u00f4ne, et nous l’utiliserons dans notre tutoriel. Cependant, n’h\u00e9sitez pas \u00e0 cr\u00e9er le v\u00f4tre dans Photoshop ou \u00e0 en t\u00e9l\u00e9charger un \u00e0 partir du Web. Assurez-vous simplement que le fichier est nomm\u00e9 search-icon.png. <\/p>\n
Vous devez maintenant charger cette ic\u00f4ne de recherche dans le dossier d’images de votre th\u00e8me. Connectez-vous \u00e0 votre site Web \u00e0 l’aide d’un client FTP comme Filezilla et ouvrez votre r\u00e9pertoire de th\u00e8mes. <\/p>\n
Maintenant, c’est l’\u00e9tape finale et la plus cruciale. Vous devez ajouter ce CSS \u00e0 la feuille de style de votre th\u00e8me: <\/p>\n
\r\n.site-header .search-form {\r\n\tposition: absolute;\r\n\tright: 200px;\r\n\ttop: 200px;\r\n}\r\n\r\n.site-header .search-field {\r\n\tbackground-color: transparent;\r\n\tbackground-image: url(images\/search-icon.png);\r\n\tbackground-position: 5px center;\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-size: 24px 24px;\r\n\tborder: none;\r\n\tcursor: pointer;\r\n\theight: 37px;\r\n\tmargin: 3px 0;\r\n\tpadding: 0 0 0 34px;\r\n\tposition: relative;\r\n\t-webkit-transition: width 400ms ease, background 400ms ease;\r\n\ttransition:         width 400ms ease, background 400ms ease;\r\n\twidth: 0;\r\n}\r\n\r\n.site-header .search-field:focus {\r\n\tbackground-color: #fff;\r\n\tborder: 2px solid #c3c0ab;\r\n\tcursor: text;\r\n\toutline: 0;\r\n\twidth: 230px;\r\n}\r\n.search-form\r\n.search-submit { \r\ndisplay:none;\r\n}\r\n\r\n<\/pre>\n
La chose importante \u00e0 garder \u00e0 l’esprit \u00e0 propos de ce CSS est les effets de transition CSS3 qui nous permettent de cr\u00e9er facilement l’effet de bascule. Notez \u00e9galement que vous devrez toujours ajuster la position de l’ic\u00f4ne de recherche et du formulaire en fonction de la conception de votre th\u00e8me. <\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 ajouter un effet de bascule de recherche \u00e0 votre th\u00e8me WordPress. Que pensez-vous du formulaire de recherche \u00e0 bascule? Nous voyons de plus en plus de sites utiliser cet effet. Laissez vos commentaires et questions dans les commentaires ci-dessous ou rejoignez-nous dans la conversation sur Google+.   <\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n