Comment ajouter une superposition de recherche en plein écran dans WordPress

Récemment, un de nos lecteurs nous a demandé si nous pouvions écrire un tutoriel sur la manière d’ajouter une superposition de recherche plein écran dans WordPress. Vous avez probablement déjà vu cela sur des sites populaires comme Wired. Lorsqu'un utilisateur clique sur l'icône de recherche, la boîte de recherche s'ouvre et couvre tout l'écran, ce qui peut améliorer l'expérience de l'utilisateur sur les appareils mobiles. Dans cet article, nous allons vous montrer comment ajouter une superposition de recherche plein écran dans WordPress..

La recherche en plein écran devient progressivement une tendance car elle améliore considérablement l'expérience de recherche pour les utilisateurs mobiles. Étant donné que les écrans mobiles sont très petits, en offrant une superposition plein écran, vous permettez aux utilisateurs de taper et de rechercher facilement sur votre site Web..

Lorsque nous avons reçu cette demande de tutoriel pour la première fois, nous savions que cela demanderait du code. WPBeginner a pour objectif de rendre les choses aussi simples que possible..

Une fois le tutoriel écrit, nous nous sommes rendu compte que le processus était trop compliqué et qu'il devrait plutôt être intégré à un simple plugin..

Pour vous simplifier la tâche, nous avons créé un didacticiel vidéo expliquant comment ajouter une incrustation de recherche plein écran que vous pouvez visionner ci-dessous..

Toutefois, si vous souhaitez simplement suivre les instructions textuelles, vous pouvez suivre notre didacticiel pas à pas pour savoir comment ajouter une superposition de recherche plein écran dans WordPress..

Ajouter la superposition de recherche plein écran dans WordPress

La première chose à faire est d’installer et d’activer le plugin WordPress Full Screen Search Overlay. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Le plug-in WordPress Full Screen Overlay Search fonctionne immédiatement, et vous n'avez aucun paramètre à configurer..

Vous pouvez simplement visiter votre site Web et cliquer sur le champ de recherche pour voir le plugin en action.

Veuillez noter que le plugin fonctionne avec la fonctionnalité de recherche par défaut de WordPress. Il fonctionne également très bien avec SearchWP, un plugin premium améliorant considérablement la recherche par défaut de WordPress..

Malheureusement, ce plugin ne fonctionne pas avec Google Custom Search..

Personnalisation de la superposition de recherche plein écran

Le plugin WordPress Full Screen Search Superlay vient avec sa propre feuille de style. Pour modifier l'apparence de la superposition de recherche, vous devez éditer le fichier CSS du plugin ou utiliser! Important en CSS..

Tout d'abord, vous devrez vous connecter à votre site Web à l'aide d'un client FTP. Si vous débutez avec FTP, consultez notre guide sur la façon de télécharger des fichiers vers WordPress via FTP..

Une fois connecté, vous devez localiser le dossier CSS du plugin. Vous le trouverez sous le chemin suivant:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Vous trouverez un fichier full-screen-search.css dans le dossier css. Vous devez télécharger ce fichier sur votre ordinateur.

Ouvrez le fichier que vous venez de télécharger dans un éditeur de texte tel que Notepad. Vous pouvez apporter des modifications à ce fichier. Par exemple, nous voulions changer l’arrière-plan et la couleur de la police pour correspondre à notre site Web de démonstration..

 / ** * Reset * - Empêche les thèmes et les autres plug-ins d'appliquer leurs propres styles à notre recherche plein écran * / # recherche en plein écran, # bouton de recherche en plein écran, # bouton de recherche en plein écran.close, # formulaire de recherche plein écran, # formulaire de recherche plein écran div, # formulaire de recherche plein écran, entrée de div, # formulaire de recherche de plein écran div input.search font-family: Arial, sans-serif; fond: aucun; bordure: 0 aucune; rayon de bordure: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: aucun; taille de police: 100%; hauteur: auto; espacement des lettres: normal; style de liste: aucun; contour: aucun; position: statique; texte-décoration: aucun; retrait du texte: 0; texte-ombre: aucun; transformation de texte: aucune; largeur: auto; visibilité: visible; débordement: visible; marge: 0; rembourrage: 0; hauteur de ligne: 1; taille de la boîte: boîte-frontière; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; -webkit-box-shadow: aucun; -moz-box-shadow: aucun; -ms-box-shadow: aucun; -o-box-shadow: aucun; boîte-ombre: aucune; -webkit-apparence: aucun; transition: aucune; -webkit-transition: aucun; -moz-transition: aucune; -o-transition: aucune; -ms-transition: none;  / ** * Arrière-plan * / # Recherche plein-écran Visibilité: masqué; opacité: 0; z-index: 999998; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; arrière-plan: # 1bc69e; / ** * Ajoute quelques transitions CSS3 pour afficher la recherche plein écran * / transition: opacité 0.5s linéaire;  / ** * Afficher la recherche en plein écran à l'ouverture * / # full-screen-search.open / ** * Étant donné que nous utilisons la visibilité et l'opacité pour la prise en charge de la transition CSS, * nous définissons position: fixed; afin que la recherche plein écran ne bloque pas * les éléments HTML sous-jacents quand ils ne sont pas ouverts * / position: fixed; visibilité: visible; opacité: 1;  / ** * Formulaire de recherche * / # formulaire de recherche plein écran position: relative; largeur: 100%; hauteur: 100%;  / ** * Bouton Fermer * / # bouton de recherche plein écran.close position: absolute; z-index: 999999; en haut: 20px; à droite: 20px; taille de police: 30px; poids de la police: 300; couleur: # 999; curseur: pointeur;  / ** * Formulaire de recherche Div * / # formulaire de recherche plein écran div position: absolute; largeur: 50%; hauteur: 100px; en haut: 50%; à gauche: 50%; marge: -50px 0 0 -25%;  / ** * Couleur du masque de saisie du formulaire de recherche * / # formulaire de recherche plein écran div input :: - webkit-input-placeholder font-family: Arial, sans-serif; couleur: #ccc;  # formulaire de recherche plein écran, entrée div: -moz-placeholder font-family: Arial, sans-serif; couleur: #ccc;  # formulaire de recherche plein écran div input :: - moz-placeholder font-family: Arial, sans-serif; couleur: #ccc;  # formulaire de recherche plein écran div input: -ms-input-placeholder font-family: Arial, sans-serif; couleur: #ccc;  / ** * Entrée du formulaire de recherche * / # formulaire de recherche en plein écran div input width: 100%; hauteur: 100px; fond: #eee; rembourrage: 20px; taille de la police: 40px; hauteur de ligne: 60px; / * Nous avons ajouté notre propre couleur de police ici * / color: # 50B0A6;  

Dans ce code, nous n'avons changé que la couleur d'arrière-plan à la ligne 62 et ajouté la couleur de la police à la ligne 150. Si vous maîtrisez bien CSS, n'hésitez pas à modifier d'autres règles de style..

Une fois que vous avez terminé, vous pouvez télécharger ce fichier dans le dossier CSS du plugin via FTP. Vous pouvez maintenant voir vos modifications en visitant votre site web.

Note importante:

Si vous utilisez cela dans votre propre thème, il est préférable d’utiliser des balises! Important afin que les mises à jour du plugin ne remplacent pas les modifications..

Pour les développeurs et les consultants, vous pouvez simplement renommer le plugin et l'intégrer dans votre thème ou vos services..

Nous avons uniquement créé ce plugin car toutes les autres façons d’écrire ce tutoriel auraient été trop compliquées pour les utilisateurs débutants..

Nous espérons que cet article vous a aidé à ajouter une superposition de recherche plein écran à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide sur la manière d’ajouter un effet de bascule de recherche dans WordPress

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.