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.
Algunas personas podrían pensar que esta pequeña carita sonriente es “linda”. El resto de ustedes encontrarán la imagen sonriente antiestética (y posiblemente de aspecto malvado) y buscarán formas de eliminarla. Esta publicación cubrirá:
- Primero, qué no hacer al ocultar el smiley
- Cómo ocultarlo correctamente, con algo de posicionamiento absoluto adicional para ciertos diseños
- Si prefiere no ocultarlo, cómo centrar fácilmente la imagen sonriente
Qué no hacer
Nunca uses display:none para ocultar el WP Stats Smiley.
Primero, quiero repasar la única cosa que no deberías hacer al intentar ocultar el WP Stats Smiley, y eso es usar: display:none. Sí, lo dije dos veces, pero solo me aseguraba de que no te lo perdieras.
Sí, ese es el mismo código que puedes usar para obtener un efecto de interruptor de apagado CSS, pero definitivamente no es algo que quieras usar para no mostrar una imagen, que necesita cargarse para mostrar las estadísticas con precisión.
Qué hacer en su lugar
Según esta publicación, el desarrollador recomienda usar el siguiente código en tu hoja de estilos (es decir, style.css) si deseas ocultar el smiley:
img#wpstats{width:0px;height:0px;overflow:hidden}Algo similar al código anterior sería lo siguiente:
img#wpstats{visibility:hidden}La diferencia entre visibility:hidden y display:none es que visibility:hidden seguirá ocupando espacio en el diseño, mientras que display:none no lo hará (y recuerda, no puedes usar display:none a menos que quieras que tu seguimiento de estadísticas se arruine).
En ciertos diseños, hay un pequeño problema con este código que ocupa espacio debajo del pie de página, así que he pensado en una solución más creativa.
Aquí tienes un ejemplo de lo que quiero decir, nota el emoji en la esquina inferior izquierda que está rompiendo el diseño del pie de página.
Con los dos ejemplos anteriores, la imagen, aunque no fuera visible, seguiría ocupando espacio en el diseño, haciendo que esa barra gris claro (que es el color de fondo) apareciera en el pie de página.
Posicionamiento Absoluto
Una combinación de posicionamiento absoluto más el código anterior es una buena manera de eliminar este problema. Podrías intentar algo como esto:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centrar la Imagen
Dependiendo de tu diseño, en lugar de ocultarla, podría verse un poco mejor si la imagen del emoji estuviera centrada. Puedes hacer esto fácilmente con el siguiente fragmento de código.
img#wpstats{display:block;margin: 0 auto}Explicación:
- Establece la imagen para que se muestre como bloque (en lugar de en línea, por defecto).
- Establece los márgenes izquierdo y derecho en automático para centrar efectivamente la imagen ahora en bloque.
Puedes usar este CSS para centrar correctamente casi cualquier etiqueta "img" sin usar marcado adicional.
Conclusión
Por cierto, si usas el plugin WP Stats Smiley Remover, no lo hagas. Porque lo único que hace es añadir el CSS "display:none" a tu encabezado. Exactamente lo que no deberías hacer.
Espero que te haya gustado el consejo de WordPress/CSS. Como el anterior, sé que este fue relativamente simple. Puedo hacer cosas más avanzadas, así que si tienes alguna solicitud de consejos rápidos de CSS como este, házmelo saber en los comentarios.
Probé tu método de posicionamiento absoluto y me funcionó. Luego vi el comentario sobre desactivar la carita sonriente. Luego lo probé y me funcionó. Así que decidí no tomar la ruta del código.
En cambio, hice esto
jetpack>estadísticas del sitio>configurar>Ocultar la imagen de la carita sonriente de estadísticas
Me funcionó. De todos modos, gracias por tu publicación, para que pudiera encontrar esta solución.
Gracias… esto resolvió el problema para mí, usando CSS. Desafortunadamente, la opción “ocultar carita” en el área de configuración de Estadísticas del sitio no funcionó.
¿cómo puedo especificar la dimensión de la imagen para satisfacer el requisito de GTmetrics?
3 años después… ¡gracias por la ayuda Leland! Me solucionó.
¡Gracias Mark!
Como actualización de la publicación, es posible que desees verificar si la imagen se está cargando antes de usar cualquiera de los métodos anteriores.
Algunos navegadores podrían no cargar imágenes de 0px/0px, por ejemplo, y esto afectará la precisión de las estadísticas.
Hola… ¡Solo quería pasar y decir GRACIAS! El método de “Posicionamiento Absoluto” funcionó perfectamente para mí. Los otros métodos no me funcionaron porque hicieron que el color de fondo se mostrara después de la barra del pie de página.
Entonces, ¿qué está pasando realmente con el método de “Posicionamiento Absoluto”? ¿A dónde se fue realmente la carita sonriente? LOL…
Chris M:
Simplemente se sale de la pantalla.
Te sorprendería saber con qué frecuencia se usa esta técnica por diferentes motivos 😉
¿Hay alguna forma posible de cambiar su ubicación? Mi problema con él es que lo instalé en el blogger de un amigo y se insertó justo después de la imagen del pie de página, por lo que hay un espacio en blanco debajo del pie de página y no se ve atractivo en absoluto 🙁
Abordé este problema en la publicación, lee la parte sobre “Posicionamiento Absoluto”.
¡Uy! Mi error. Intentaré eso y veré si resuelve el problema. Perdón, como que mis ojos se saltaron esa parte. 😉
¡Que tengas una excelente semana!
Vaya, no sabía que `display:none` es malo. Gracias, me llevo el CSS ahora 🙂
Gracias – tan rápido y fácil. Me alegra saber cómo hacerlo de una manera que no arruine nada más.
JAJA, esto realmente te estaba molestando, ¿verdad, amigo? Creo que la mayor parte del problema ha sido que alguien simplemente usó el código malo desde el principio y se corrió la voz sobre cómo hacerlo antes de que alguien más realmente analizara el problema. Un poco de sentido común debería decirle a cualquiera que si ocultas algo, no va a funcionar bien.
Te veo en Twitter, amigo.
Sí, sería tan simple si fuera solo una imagen transparente de 1×1.
¡Gracias, Leland!
Creo que el smiley es bastante lindo. No entiendo por qué alguien querría esconderlo.
Heather, te sorprendería cuánta gente busca esconder el smiley.
Desafortunadamente, mucha gente lo hace de la manera incorrecta (display:none) y obtiene estadísticas erróneas.
¡Esta es información genial! Me preguntaba qué demonios era eso. Simplemente lo ignoré hasta que leí esta publicación. Lo agregaré a mi lista de tareas pendientes para la semana.
¡Eché un vistazo a tu sitio, una personalización realmente genial del tema Metro de StudioPress!
Intenta agregar este código a tu hoja de estilos, creo que encontré una manera de integrarlo al fondo negro de tu pie de página.
img#wpstats { display: block; margin: 0 auto; position: relative; top: -21px; }Funciona en Firefox, podría tener que probarlo también en otros navegadores.
"Según esta publicación, el desarrollador recomienda usar el siguiente código si deseas ocultar el smiley:"
¿Dónde lo agrego?
Esa línea de CSS tendría que agregarse a tu hoja de estilos, usualmente en style.css.
Disculpa si no fue claro, acabo de actualizar la publicación.