For anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.
Certaines personnes pourraient trouver ce petit smiley « mignon ». Les autres d'entre vous trouveront l'image du smiley disgracieuse (et potentiellement effrayante) et chercheront des moyens de la supprimer. Ce post couvrira :
- Tout d'abord, ce qu'il ne faut pas faire pour masquer le smiley
- Comment le masquer correctement, avec quelques astuces supplémentaires de positionnement absolu pour certains agencements
- Si vous préférez ne pas le masquer, comment centrer facilement l'image du smiley
Ce qu'il ne faut pas faire
N’utilisez jamais display:none pour masquer le WP Stats Smiley.
Tout d'abord, je veux aborder la seule chose que vous ne devriez pas faire en essayant de masquer le smiley des statistiques WP, et c'est d'utiliser : display:none. Oui, je l'ai dit deux fois, mais je voulais juste m'assurer que vous ne le manquiez pas.
Oui, c’est le même code que vous pouvez utiliser pour obtenir un effet de interrupteur CSS, mais ce n’est certainement pas quelque chose que vous voulez utiliser pour ne pas afficher une image, qui doit être chargée pour afficher avec précision les statistiques.
Que faire à la place
Selon ce billet, le développeur recommande d’ajouter le code suivant à votre feuille de style (c’est-à-dire style.css) si vous souhaitez masquer le smiley :
img#wpstats{width:0px;height:0px;overflow:hidden}Quelque chose de similaire au code ci-dessus serait le suivant :
img#wpstats{visibility:hidden}La différence entre visibility:hidden et display:none est que visibility:hidden occupera toujours de l’espace dans la conception, tandis que display:none n’en occupera pas (et rappelez-vous, vous ne pouvez pas utiliser display:none à moins que vous ne vouliez que votre suivi des statistiques soit détraqué).
Sur certains agencements, il y a un petit problème avec ce code qui prend de l'espace sous le pied de page, j'ai donc pensé à une solution plus créative.
Voici un exemple de ce dont je parle, remarquez le smiley en bas à gauche qui fait planter la mise en page du pied de page.
Avec les deux exemples ci-dessus, l'image, bien que non visible, occuperait toujours de l'espace dans la mise en page, provoquant l'apparition de cette barre gris clair (qui est la couleur de fond) dans le pied de page.
Positionnement absolu
Une combinaison de positionnement absolu et du code ci-dessus est un bon moyen d'éliminer ce problème. Vous pourriez essayer quelque chose comme ceci :
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centrer l'image
Selon votre mise en page, au lieu de la cacher, il pourrait être un peu mieux si l'image du smiley était centrée. Vous pouvez facilement le faire avec l'extrait de code suivant.
img#wpstats{display:block;margin: 0 auto}Explication :
- Définit l'image pour qu'elle s'affiche en bloc (au lieu d'en ligne, par défaut).
- Définit les marges gauche et droite sur automatique pour centrer efficacement l'image maintenant en bloc.
Vous pouvez utiliser ce CSS pour centrer correctement à peu près n'importe quelle balise "img" sans utiliser de balisage supplémentaire.
Conclusion
Soit dit en passant, si vous utilisez le plugin WP Stats Smiley Remover, ne le faites pas. Parce que tout ce qu’il fait, c’est ajouter le CSS « display:none » à votre en-tête. Exactement ce que vous ne devez pas faire.
J’espère que vous avez aimé l’astuce WordPress/CSS. Comme la dernière, je sais que c’était relativement simple. Je peux en faire des plus avancées, donc si vous avez des demandes pour des astuces CSS rapides comme celle-ci, faites-le moi savoir dans les commentaires.
J'ai essayé votre méthode de positionnement absolu et elle a fonctionné pour moi. Ensuite, j'ai vu le commentaire sur la désactivation du smiley. Ensuite, j'ai essayé cela et cela a fonctionné pour moi. J'ai donc décidé de ne pas passer par la voie du codage.
Au lieu de cela, j'ai fait ceci
jetpack>stats du site>configurer>Masquer l'image du smiley des statistiques
Cela a fonctionné pour moi. Quoi qu'il en soit, merci pour votre article, afin que je puisse trouver cette solution.
Merci… cela a résolu le problème pour moi, en utilisant CSS. Malheureusement, l'option « masquer le smiley » dans la zone de configuration des statistiques du site n'a pas fonctionné.
comment puis-je spécifier la dimension de l'image pour satisfaire aux exigences de GTmetrics ?
3 ans plus tard… merci pour l'aide Leland ! Ça m'a dépanné.
Merci Mark !
Juste pour mettre à jour le post, vous voudrez peut-être vérifier si l'image se charge réellement avant d'utiliser l'une des méthodes ci-dessus.
Certains navigateurs pourraient ne pas charger les images de 0px/0px, par exemple, et cela affectera la précision des statistiques.
Bonjour… Je voulais juste passer dire MERCI ! La méthode « Positionnement Absolu » a parfaitement fonctionné pour moi. Les autres méthodes n'ont pas fonctionné pour moi car elles faisaient apparaître la couleur de fond après la barre de pied de page.
Alors, que se passe-t-il réellement avec la méthode « Positionnement Absolu » ? Où est allé le smiley ? LOL…
Chris M:
C’est juste sorti de l’écran.
Vous seriez surpris de voir à quel point cette technique est souvent utilisée pour différentes raisons 😉
Y a-t-il un moyen possible de changer son emplacement. Mon problème avec cela est que je l'ai installé sur le blog d'un ami et qu'il s'est inséré juste après l'image du pied de page, il y a donc un espace blanc sous le pied de page et cela n'est pas du tout attrayant 🙁
J'ai abordé ce problème dans le post, lisez la partie sur le « Positionnement Absolu ».
Oups ! C’est ma faute. Je vais essayer ça et voir si ça résout le problème. Désolé, mes yeux ont un peu sauté cette partie. 😉
Passez une excellente semaine.
Wow, je ne savais pas que display:none était mauvais. Merci, je prends le CSS maintenant 🙂
Merci – si rapide et facile. Heureux de savoir comment le faire d'une manière qui ne gâche rien d'autre.
HAHA, cela vous dérangeait vraiment, n'est-ce pas mon ami. Je pense que la plupart du problème vient du fait que quelqu'un a juste utilisé le mauvais code pour commencer et que le mot s'est répandu sur la façon de le faire avant que quiconque n'ait vraiment examiné le problème. Un peu de bon sens devrait dire à quiconque que si vous cachez quelque chose, cela ne fonctionnera pas correctement.
À bientôt sur Twitter mon ami.
Oui, ce serait tellement simple si ce n'était qu'une image transparente de 1×1.
merci leland !
Je trouve que le smiley est plutôt mignon. Je ne vois pas pourquoi quelqu'un voudrait le cacher.
Heather, tu serais surprise de voir combien de personnes cherchent à cacher le smiley.
Malheureusement, beaucoup de gens le font de la mauvaise manière (display:none) et obtiennent des statistiques erronées.
c'est une information géniale ! je me demandais ce que c'était. je l'ai juste ignoré jusqu'à ce que je lise ce post. je vais l'ajouter à ma liste de choses à faire pour la semaine.
J'ai consulté votre site, personnalisation vraiment géniale du thème Metro par StudioPress !
Essayez d'ajouter ce code à votre feuille de style, je pense avoir trouvé un moyen de le fondre dans le fond noir de votre pied de page.
img#wpstats { display: block; margin: 0 auto; position: relative; top: -21px; }Fonctionne dans Firefox, il faudra peut-être le tester dans d'autres navigateurs aussi.
« Selon ce post, le développeur recommande d'utiliser le code suivant si vous souhaitez cacher le smiley : »
L'ajouter où ?
Cette ligne de CSS devrait être ajoutée à votre feuille de style, généralement dans style.css.
Désolé si ce n'était pas clair, je viens de mettre à jour le post.