Lorsque vous créez un site WordPress qui fonctionne bien sur les téléphones, vous vous concentrez probablement sur le fait de vous assurer que tout s'adapte à l'écran et se charge rapidement.
Mais il existe un autre petit détail qui peut améliorer l'expérience mobile de votre site : changer la couleur de la barre d'adresse dans un navigateur mobile pour qu'elle corresponde à votre site WordPress.
Cela donne à votre site Web un aspect plus soigné, professionnel et cohérent avec votre marque.
Nous avons aidé de nombreux propriétaires de sites WordPress à améliorer leur conception mobile, et c'est l'une de ces modifications simples qui peut faire une différence notable.
Dans ce guide, nous vous montrerons la manière la plus simple de changer la couleur de la barre d'adresse dans un navigateur mobile pour qu'elle corresponde à la conception de votre site WordPress.
💡 TL;DR : Vous pouvez changer la couleur de la barre d'adresse du navigateur mobile dans WordPress en utilisant le plugin WPCode. Créez simplement un nouveau fragment de code HTML, ajoutez la balise méta theme-color avec votre couleur hexadécimale préférée, configurez-la pour qu'elle s'insère automatiquement, et activez le fragment de code pour appliquer les modifications sur l'ensemble de votre site.
Pourquoi changer la couleur de la barre d'adresse dans un navigateur mobile ?
Changer la couleur de la barre d'adresse dans un navigateur mobile aide votre site WordPress à paraître plus soigné et visuellement cohérent.
Cela crée une expérience mobile plus fluide en faisant correspondre l'interface du navigateur avec la marque et la conception de votre site Web.
Voici quelques-uns des plus grands avantages :
- Crée une cohérence visuelle : Faire correspondre la couleur de la barre d'adresse à la conception de votre site donne à votre site Web une apparence plus épurée et plus unifiée.
- Améliore l'expérience mobile : Cela aide votre site Web à paraître plus soigné et semblable à une application sur les appareils mobiles.
- Renforce votre image de marque : L'utilisation des couleurs de votre marque dans l'interface du navigateur rend votre site Web plus professionnel et reconnaissable.
- Donne une impression de modernité à votre site : Une couleur de navigateur mobile personnalisée peut faire ressortir votre site Web par rapport aux pages mobiles génériques.
Bien qu'il s'agisse d'un petit changement de conception, il peut rendre votre site WordPress beaucoup plus raffiné pour les visiteurs mobiles.
Prise en charge par les navigateurs des couleurs de la barre d'adresse mobile
Avant de changer la couleur de la barre d'adresse de votre navigateur mobile, il est important de savoir que la prise en charge peut varier en fonction du navigateur et de l'appareil utilisé.
Voici un bref aperçu de la manière dont les navigateurs mobiles populaires gèrent la balise méta theme-color :
| Navigateur/Plateforme | Statut de la prise en charge | Notes |
|---|---|---|
| Google Chrome (Android) | Prise en charge complète | Change la couleur de la barre d'adresse pour un look cohérent. |
| Safari (iOS) | Aucune prise en charge directe de la couleur de la barre d'adresse | Gère theme-color pour les manifestes PWA et les éléments d'interface du navigateur, mais pas la barre d'adresse générale. |
| Firefox (Android) | Partielle/Variable | La prise en charge peut varier selon la version spécifique et les paramètres du thème du navigateur. |
| Navigateurs anciens/non pris en charge | Non pris en charge | Ignore gracieusement le paramètre sans causer de problèmes sur votre site. |
Pour changer la couleur de la barre d'adresse, les navigateurs mobiles utilisent un petit extrait de code HTML appelé balise méta theme-color. Cela indique aux navigateurs compatibles quelle couleur utiliser pour les éléments de l'interface tels que la barre d'adresse.
Vous pouvez ajouter ce code à votre site WordPress en insérant la balise méta dans la section <head> de votre thème.
Cela dit, voyons comment faire correspondre facilement la barre d'adresse du navigateur mobile à votre thème WordPress.
Comment changer la couleur de la barre d'adresse dans le navigateur mobile pour qu'elle corresponde à votre site WordPress
Vous pouvez facilement changer la couleur de la barre d'adresse dans le navigateur mobile en ajoutant du code personnalisé au fichier header.php de votre thème ou de votre thème enfant, juste avant la balise de fermeture </head>.
Bien que la moindre erreur puisse casser votre site web et le rendre inaccessible.
C'est pourquoi nous recommandons d'utiliser WPCode. Après des tests approfondis, nous avons conclu que c'est le meilleur plugin d'extraits de code WordPress et le moyen le plus sûr d'ajouter du code à votre site Web.
Pour plus de détails sur le plugin, vous pouvez consulter notre avis sur WPCode.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour des instructions détaillées, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Remarque : Le plugin WPCode dispose également d'une version gratuite que vous pouvez utiliser pour ce tutoriel. Cependant, la mise à niveau vers le plan payant vous donnera accès à des fonctionnalités telles que la bibliothèque d'extraits de code, la logique conditionnelle, et plus encore.
Après activation, visitez la page Extraits de code » + Ajouter un extrait dans la barre latérale d'administration de WordPress.
Ici, cliquez sur le bouton « Utiliser le snippet » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».
Cela vous mènera à la page « Créer un extrait personnalisé », où vous pourrez commencer par ajouter un nom pour l'extrait de code. Ce nom ne sera pas affiché sur le front-end et sert uniquement à votre identification.
Ensuite, sélectionnez « Extrait HTML » comme type de code dans l'invite qui apparaît.
Maintenant, tout ce que vous avez à faire est de copier et coller l'extrait de code suivant dans la boîte « Aperçu du code » :
<meta name="theme-color" content="#ff6600" />
Une fois que vous avez fait cela, vous pouvez ajouter le code hexadécimal de la couleur de votre choix à côté de la ligne content= dans le code.
Cette couleur sera ensuite utilisée pour votre barre d'adresse dans le navigateur mobile.
Astuce de pro : Vous pouvez obtenir la valeur HEX d'une couleur en utilisant n'importe quel logiciel de retouche d'image tel que Adobe Photoshop ou Gimp.
Pour une méthode plus rapide qui ne nécessite aucun logiciel spécial, vous pouvez utiliser un sélecteur de couleur en ligne gratuit ou même l'outil « Inspecter » intégré à votre navigateur Web pour trouver le code hexadécimal exact de votre site.
Après cela, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique ».
De cette façon, le code sera automatiquement exécuté sur votre site Web lors de l'activation.
Enfin, faites défiler vers le haut et basculez le commutateur « Inactif » sur « Actif ».
Ensuite, cliquez sur le bouton « Enregistrer le snippet » pour stocker vos paramètres et exécuter le code.
Conseils bonus pour créer un site WordPress adapté aux mobiles
Changer la couleur de la barre d'adresse est un bon début, mais créer un site Web véritablement adapté aux mobiles implique quelques étapes supplémentaires.
Étant donné que les moteurs de recherche comme Google privilégient l'indexation mobile-first, une bonne expérience mobile est essentielle pour votre SEO. En fait, les appareils mobiles représentent la majorité du trafic Internet.
Voici quelques autres conseils pour améliorer votre site pour ces visiteurs :
- Utilisez un thème ou un constructeur de pages responsive : Votre base doit être un thème WordPress responsive qui s'adapte aux différentes tailles d'écran. Pour encore plus de contrôle, si vous êtes débutant et souhaitez créer des mises en page personnalisées sans code, vous pouvez utiliser un plugin comme SeedProd. C'est un constructeur de pages visuel par glisser-déposer, utilisé par plus d'un million d'utilisateurs, vous permettant de créer facilement des mises en page personnalisées adaptées aux mobiles.
- Créez des formulaires prêts pour mobile : Assurez-vous que vos formulaires de contact, de connexion et vos sondages sont faciles à remplir sur un petit écran. Nous recommandons un plugin comme WPForms. C'est un constructeur de formulaires facile à utiliser, utilisé par plus de 6 millions de sites web et noté 4,9/5 étoiles. Son interface par glisser-déposer et ses modèles optimisés facilitent grandement la création de formulaires prêts pour mobile.
- Optimisez les images et les médias : Les images volumineuses peuvent ralentir votre site sur les connexions mobiles. Assurez-vous de redimensionner et de compresser vos images pour le Web avant de les télécharger.
- Concentrez-vous sur la vitesse du site : Au-delà des images, vous pouvez accélérer votre site en utilisant un hébergeur WordPress rapide, en activant le chargement différé pour les commentaires et en utilisant un plugin de mise en cache.
Pour en savoir plus, consultez notre tutoriel complet sur les moyens de créer un site WordPress adapté aux mobiles.
Pourquoi mon site WordPress s'affiche-t-il différemment sur différents navigateurs ?
Il est tout à fait normal que votre site WordPress s'affiche légèrement différemment sur des navigateurs comme Chrome, Firefox, Safari ou Edge. Dans la plupart des cas, cela ne signifie pas que quelque chose est cassé.
Les différents navigateurs affichent simplement les sites web de manière légèrement différente. Voici quelques raisons courantes pour lesquelles cela se produit :
- Les navigateurs utilisent différents moteurs de rendu : Chaque navigateur traite le HTML, le CSS et le JavaScript différemment, ce qui peut affecter la mise en page et le style.
- Les styles par défaut des navigateurs peuvent varier : Les navigateurs appliquent leurs propres styles par défaut aux éléments tels que les titres, les boutons et les formulaires.
- Les appareils et les systèmes d'exploitation affectent l'apparence : La taille de l'écran, le rendu des polices et les paramètres du système d'exploitation peuvent modifier l'apparence de votre site.
- La mise en cache peut afficher du contenu plus ancien : Un navigateur peut encore afficher une version mise en cache de votre site web tandis qu'un autre affiche les dernières mises à jour.
- Les paramètres de l'utilisateur peuvent modifier l'affichage : Les niveaux de zoom, les polices personnalisées ou les paramètres d'accessibilité peuvent affecter la façon dont les visiteurs voient votre site.
Pour réduire ces différences, nous vous recommandons d'utiliser un thème WordPress responsive et de tester votre site sur plusieurs navigateurs et appareils avant de publier des modifications majeures.
Nous espérons que cet article vous a aidé à apprendre comment changer la couleur de la barre d'adresse dans un navigateur mobile pour qu'elle corresponde à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment personnaliser les couleurs sur votre site WordPress et nos meilleurs choix pour les meilleurs plugins de constructeur de pages pour WordPress.
Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Julie
J'adore l'apparence de l'onglet mobile qui correspond à l'en-tête tout en haut d'un site web, j'ai donc cherché un moyen de le faire. J'ai suivi toutes ces instructions, mais rien n'a changé lorsque j'ai consulté mon site sur mobile. Des suggestions ?
Support WPBeginner
Votre téléphone utilise-t-il le mode sombre ou un autre style qui remplace le style défini par le thème de votre site ? C'est la raison la plus courante pour laquelle le style ne correspond pas à ce que vous avez défini en utilisant cette méthode, car votre téléphone aura la priorité sur ce que votre site a défini.
Admin
Pragati kumar sheel
C'est cool. Pourriez-vous nous aider à changer aussi la barre de navigation ? J'ai vu quelques sites l'implémenter aussi.
Support WPBeginner
Vous devriez d'abord vérifier auprès du support de votre thème spécifique, car chaque thème a son propre design et ses propres paramètres pour sa barre de navigation.
Admin
Dennis Muthomi
Je me souviens avoir implémenté cela à l'époque. Les choses ont changé de nos jours, l'interface utilisateur est maintenant complètement différente d'avant.
Mrteesurez
Je cherchais des moyens de faire cela depuis que je l'ai découvert dans ce post. Je suis surpris que ce ne soit qu'une seule ligne de code qui fasse la magie. Je vais l'appliquer à mon site car j'aime la fonctionnalité.
Jiří Vaněk
Merci pour les instructions. Je les ai utilisées sur mon site web et cela fonctionne très bien. Dommage que cela ne fonctionne que sur Chrome mobile.
Support WPBeginner
Peut-être qu'à l'avenir, ce sera plus probable pour la navigation sur ordinateur.
Admin
Jiří Vaněk
Merci pour les instructions. Je les ai utilisées sur mon site web, et maintenant le navigateur Chrome sur mobile l'affiche avec les couleurs de l'en-tête du site web. Cela rend beaucoup mieux. C'est juste dommage que, très probablement, aucun autre navigateur que Chrome mobile ne le prenne en charge.
Support WPBeginner
D'autres navigateurs mobiles commencent à l'adopter, donc cela devrait, espérons-le, être vu plus souvent
Admin
Jiří Vaněk
J'espère que davantage de navigateurs le prendront en charge avec le temps, car jusqu'à présent, je n'ai vérifié cette fonction que sur Chrome mobile. Ce serait incroyable si tous les navigateurs mobiles pouvaient le faire, car non seulement cela rend le web plus beau, mais comme peu de gens l'utilisent, cela ajoute également une touche unique. J'espère que nous verrons cela dans plus de navigateurs à l'avenir.
Mrteesurez
Exactement ! cela ajoute une touche unique aux sites et les rend plus professionnels et attrayants pour les visiteurs. Bien que Chrome ait été le premier à l'adopter, j'ai maintenant remarqué que d'autres navigateurs, comme Vivaldi, l'adoptent également. Merci pour votre observation.
Ankit Sahu
Absolument fonctionnel
Merci pour ça
Support WPBeginner
Heureux que notre guide vous ait été utile !
Admin
Sarah
Cela semble ne plus fonctionner… Je l'ai implémenté sur mon site en février et je viens de l'appliquer à un autre… en vérifiant, le nouveau ne fonctionne pas et l'ancien non plus ! Quelque chose a changé ici dans l'application mobile Chrome ?
Support WPBeginner
Si vous utilisez le mode sombre pour votre navigateur, Chrome outrepassera ce paramètre.
Admin
Naveen Rana
Où trouver le fichier header.php du thème ou du thème enfant ?
Support WPBeginner
Vous trouverez les fichiers de votre thème sous Apparence > Éditeur de thème, en utilisant le gestionnaire de fichiers de votre hébergeur, ou en utilisant un outil FTP en suivant notre guide ci-dessous :
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Pour FTP ou le gestionnaire de fichiers de votre hébergeur, vous devrez aller dans wp-content > Themes et trouver le dossier portant le même nom que votre thème actif.
Admin
Manshant Singh
Excellent article et ça fonctionne mais pas sur la page de catégorie et quand j'ouvre un article.
Support WPBeginner
Vous devriez vérifier auprès du support de votre thème spécifique qu'il n'y a pas un style d'en-tête différent attribué à ces pages.
Admin
Aditya Savita
Tout d'abord, merci pour ce super tutoriel, mais je rencontre maintenant un problème : la couleur de la barre d'adresse ne s'affiche pas sur la page d'accueil de mon site. Elle s'affiche parfaitement sur toutes les autres pages et articles de mon site, sauf sur la page d'accueil.
Que dois-je faire maintenant ? S'il vous plaît, aidez-moi !
Support WPBeginner
Vous pourriez vouloir vérifier auprès du support de votre thème spécifique qu'il n'est pas défini sur le modèle de page d'accueil qui pourrait outrepasser vos paramètres.
Admin
Almesh
J'ai réussi du premier coup. merci
Support WPBeginner
Nous sommes heureux que notre guide vous ait été utile
Admin
Craige Wilson
Faut-il du temps pour que la mise à jour s'effectue ?
Support WPBeginner
Cela peut arriver et la mise en cache du navigateur pourrait également retarder le changement.
Admin
Ebrahim Talebi
Merci beaucoup.
Cependant, sachez que cette astuce ne fonctionnera pas si l'utilisateur a activé le mode sombre sur son téléphone, car il remplace tout le reste. (Certains téléphones ont une option appelée mode sombre)
Support WPBeginner
Merci d'avoir partagé cela au cas où quelqu'un rencontrerait ce problème
Admin
Arif
Époustouflant et le plus simple
Support WPBeginner
Nous sommes heureux que notre guide vous ait été utile
Admin
kafi
J'avais juste besoin de dire mec,
vous êtes les MEILLEURS.
Support WPBeginner
Merci, nous sommes heureux que vous aimiez notre contenu
Admin
Fred
Un autre tutoriel très facile de votre équipe !
J'aimerais ajouter une couleur dégradée à la barre d'adresse.
Est-ce possible ?
Support WPBeginner
Pas pour le moment avec cette méthode.
Admin
Fred
Merci pour votre réponse
Valli M
Merci beaucoup :)
Support WPBeginner
De rien
Admin
Amit Ayalon
Fonctionne très bien ! super facile à installer.
Merci beaucoup !
Support WPBeginner
De rien, heureux que notre guide ait pu être utile
Admin
Rafael
Fonctionne parfaitement !
merci
Support WPBeginner
Nous sommes heureux que notre guide vous ait été utile
Admin
Sunil Ilanthila
La couleur de la barre d'adresse a changé mais le texte est en noir, je le veux en blanc, comment ?
Support WPBeginner
Sauf avis contraire, cela est décidé par le navigateur mobile, pas par une couleur que vous définissez.
Admin
Deborah
Merci. Très rapide et facile à faire, et donne à mon site web un look plutôt chic.
Support WPBeginner
Nous sommes heureux que notre tutoriel ait pu aider
Admin
Rohit
Quelqu'un peut m'aider, est-ce que ça fonctionne uniquement sur Chrome et peut-on l'utiliser aussi pour asp.net ?
Support WPBeginner
Pour le moment, cela ne fonctionnera que sur Chrome.
Admin
Nasim
Si vous utilisez Elementor Page Builder, comment faire ?
Syaz Amirin
C'est pareil. Le même processus, je veux dire, même en utilisant Elementor.
M.Surana
Un extrait pour ça ?
Philarpy
Merveilleux, ça fonctionne aussi pour moi. Merci.
Mark
Brillant, travail de 2 minutes et ça marche à merveille ! Merci
Phil Duffney
Merci beaucoup, c'était d'une grande aide !
Nitish
Ça fonctionne aussi sur Android Kit Kat… je pense qu'ils ont mis à jour Chrome…
JEEiEE
Merci
mais qu'en est-il de l'iPhone et de Windows
Craig Jon Smith
Ça a très bien fonctionné pour moi sur Weebly. Au lieu de toucher au code, allez simplement dans les paramètres et déposez-le dans la section qui dit littéralement "code d'en-tête". Je l'ai fait sur deux sites maintenant. Il en reste un.
Diego
Très bien… et ça marche ! Mais comment faire pour que le texte devienne blanc ?
Taylor
Merci beaucoup ! Juste ce que je cherchais et ça a fonctionné exactement comme vous l'avez décrit dans sa configuration !
Akash gupta
Ajoutez simplement ce code dans le fichier header.php de votre thème ou thème enfant, juste avant la balise de fermeture .
mais ça ne fonctionne pas sur un site web. pourquoi ?
ethann
il semble que cela fonctionne sur Android version 5.0 et supérieure
enack
Super astuce, ça a très bien fonctionné pour mon site (comme votre site le fait toujours). Faites-moi savoir si vous obtenez le code pour les iPhones aussi, mais dans tous les cas, je ne peux pas me plaindre. Merci !
Irfan abbas
Cette méthode peut-elle fonctionner sur les thèmes Newspaper 7 ?
Hamid Roshaan
Exactement ce que je veux savoir
Thomyum
Tu déchires !
zakaria
Bonjour, merci pour cette astuce, mais est-ce que cela fonctionne sur les modèles Blogger ? Si oui, comment l'ajouter ? J'ai essayé plusieurs fois mais Blogger affiche toujours une erreur.
Saikot Hc
Super patron ! Merci... !!
Xaif
Ça n'a pas fonctionné pour moi. J'avais le thème enfant eleven40 mais ça ne fonctionne pas
Queven
Salut ! Sur quels navigateurs est-ce pris en charge ?
Support WPBeginner
Google Chrome sur les appareils Android.
Admin
Terri
J'adore ça ! Merci pour l'astuce
dhiravat
Astuce très applicable. Merci !
Alessio
C'est vraiment super ! Merci !
Gerard Jimenez
Super information, je viens de changer mon site.
Bobby
Bon conseil. Voyons comment faire cela pour tous les navigateurs sur mobile.
Shu
Merci. Beaucoup apprécié
jehangir
Très informatif.
Ahmad Fatah
Wow, ça a l'air simple... Je vais essayer sur mon blog.
Terima Kasih