Sommaire
Une recherche en plein écran est un bon moyen de concentrer l’utilisateur sur un contenu spécifique. Essentiellement, les utilisateurs verront une seule page centrée sur le champ de recherche et est souvent considérée comme esthétiquement agréable.
Bien qu’il n’améliore pas la capacité du site web à effectuer des recherches de contenu, il donne un aspect et une sensation agréables au comportement du site. Il peut s’agir d’une excellente méthode pour séparer votre site des innombrables autres sur Internet.
Aujourd’hui, je vais vous montrer comment configurer et personnaliser la fenêtre de recherche WordPress pour améliorer l’apparence de votre site.
Utilisation de la recherche plein écran de WordPress en superposition
Dans ce tutoriel, je vais présenter la superposition de recherche plein écran de WordPress. C’est un peu un ancien plugin, mais j’ai vérifié qu’il fonctionne avec WordPress 4.8.
Tout d’abord, vous devez installer le plugin de superposition. Allez dans la zone Plugins de WordPress et cliquez sur le bouton “Ajouter nouveau”.
Recherchez, installez et activez “WordPress Full Screen Search Overlay”.
Une fois le plugin installé, vous pouvez consulter votre site web et cliquer sur sa fonction de recherche. Ce plugin fonctionne avec quelques autres outils comme SearchWP, un plugin premium. Cependant, il ne fonctionne pas avec la plateforme de recherche personnalisée de Google et d’autres outils.
Visitez votre site web et cliquez sur votre champ de recherche pour rechercher du contenu. Une nouvelle fenêtre s’ouvrira automatiquement avant que vous puissiez commencer à taper.
Malheureusement, le plugin ne fonctionne pas si bien dans un environnement mobile. En fait, je n’ai pas pu le faire fonctionner sur un smartphone LG G4. Cependant, il fonctionne parfaitement pour les écrans d’ordinateurs de bureau et portables.
Comment personnaliser la superposition de la recherche plein écran
Ce plugin n’a pas de paramètres dans le panneau d’administration de WordPress pour effectuer des modifications personnalisées. Cependant, il est possible de lui donner un certain aspect en plongeant dans le fichier CSS du plugin.
Pour effectuer ces changements, vous devrez connaître certaines des bases du codage en CSS. Si vous n’êtes pas sûr de savoir comment faire, je vous suggère de jeter un coup d’œil aux écoles du W3 car elles proposent des cours gratuits pour divers langages de programmation.
Sinon, vous pouvez éviter d’apporter des modifications personnalisées au code. Il est relativement facile de casser un plugin si vous ne savez pas ce que vous faites.
N’oubliez pas que si ce plugin est mis à jour, vous devrez peut-être modifier à nouveau votre code personnalisé. En effet, les mises à jour écrasent souvent les fichiers dans WordPress, selon le développeur.
La façon la plus simple de modifier votre fichier CSS est peut-être d’utiliser le gestionnaire de fichiers de cPanel. Cependant, les programmes FTP comme FileZilla sont exceptionnels pour modifier WordPress ainsi que pour diverses autres tâches.
Aujourd’hui, restons sur la solution la plus simple.
Cliquez sur l’outil Gestionnaire de fichiers dans votre tableau de bord cPanel.
Accédez à votre site WordPress en cliquant dans le répertoire “public_html”.
Allez dans le répertoire “wp-content” de votre site web.
Maintenant, accédez au répertoire “plugins” pour afficher la liste de ce que vous avez actuellement installé.
Cherchez “recherche plein écran – superposition” dans la liste et cliquez dessus.
Ce plugin particulier stocke ses fichiers dans un dossier séparé appelé “assets”. Il est important de noter que tous les plugins ne pratiquent pas cette forme de hiérarchie. En fait, beaucoup d’entre eux stockent les fichiers CSS dans ce dossier principal.
Accédez au répertoire “actifs”.
On y est presque. Allez dans le répertoire CSS pour afficher le fichier dont vous aurez besoin.
Maintenant, cliquez une fois sur le fichier .css en plein écran pour le sélectionner et cliquez sur “Modifier”.
Lorsque l’écran d’option “Modifier” apparaît, cliquez sur le bouton “Modifier”.
C’est ici que vous devrez connaître un peu le CSS pour faire des changements. Dans ce fichier, vous pouvez tout contrôler, des couleurs à la taille des polices. Les bordures, le positionnement, les ombres et bien d’autres choses encore peuvent être réalisés dans la fenêtre de recherche à partir de ce fichier.
Une fois que vous avez effectué vos entrées personnalisées, cliquez sur le bouton “Enregistrer les modifications”.
Personnalisation de votre site web
La recherche en plein écran n’est qu’une des milliers de façons de personnaliser votre site web hébergé par WordPress. Bien que ce plugin particulier soit assez simple dans sa conception, il existe plusieurs façons d’accentuer le champ de recherche avec d’autres fonctionnalités. WordPress étant très flexible, il existe un grand nombre de façons de le personnaliser pour répondre à vos besoins.
Quel type d’éléments personnalisés utilisez-vous sur votre site ? Trouvez-vous utile d’avoir un champ de recherche riche en fonctionnalités, ou préférez-vous la fonction de base de WordPress ?
