Valorar con estrellitas un artículo o lo que quieras

Valorar con estrellitas un artículo o lo que tú quieras

Tiempo estimado de lectura: 11 minutos

 

Cómo valorar con estrellitas un artículo, una mención, un producto…

Muchas veces te gustaría valorar con estrellitas algo dentro de tu web, ya sea un artículo, un testimonio, incluso un producto que quieras promocionar.

Existen varias formas de hacerlo, unas muy simples y otras más complejas. En este artículo te voy a enseñar la forma más sencilla de hacerlo mediante una línea de código.

De dónde sacamos las estrellitas

Lo primero que tenemos que saber es cómo y de dónde obtenemos las estrellitas. Para responder a esta cuestión, debemos saber que hay tipografías que no son puramente letras y números, sino que son símbolos. Si manejas Microsoft Word seguramente conocerás las tipografía Webdings y las tres versiones de la tipografía Wingdings. Si no las conocías, te animo a que entres en Word, escribas un texto y le cambies el tipo de letra a cualquiera de las que te he dicho 🙂

Teniendo en cuenta que ya sabemos que existen tipografías que son símbolos, tenemos que hablar de un tipo de codificación que se llama unicode, que convierte las tipografías, y sobretodo los caracteres llamados «raros» en código que los navegadores pueden reconocer. Por ejemplo, el espacio en blanco " ", en unicode se representa por los símbolos "%20" –> evidentemente sin las comillas en ninguno de los dos casos.

Ya que la codificación unicode es reconocida por los navegadores, si buscamos el símbolo de las estrellitas y lo pegamos a continuación en un artículo, producto, recomendación, etc, ya tendríamos este efecto hecho. Posteriormente podemos añadirle estilos CSS para adaptarlas a nuestro tema o dejarlas con el color negro de la escritura por defecto.

Para saber el símbolo de las estrellitas, buscamos en Google simbolo unicode estrellas, el primer resultado que nos arroja es justamente el que necesitamos; la página de la Tabla de Caracteres Unicode.

Valorar con estrellitas en tu WordPress
Valorar con estrellitas en tu WordPress

Justamente las dos primeras estrellitas que vemos son las que podemos necesitar: la estrellita negra (rellena) y la estrellita blanca (vacía). Ahora tan solo tenemos que hacer clic en cada una de ellas, copiarla y pegarla para poder usarla.

Nota
A modo de curiosidad, la estrella negra en unicode se escribe con el texto: U+2605, y la estrella blanca con el texto: U+2606.

Cómo usar las estrellitas que hemos copiado

Este es el paso más sencillo, tan solo tenemos que pegarlas tantas veces como queramos puntuar ese artículo, es decir, si queremos dar una puntuación de 5 sobre 5 estrellas, utilizaremos este código:

<div class="estrellitas">★★★★★</div>

Si quieres dar una puntuación de 1 estrella sobre 5, deberás utilizar este otro:

<div class="estrellitas">★☆☆☆☆</div>

Demasiado fácil, ¿verdad?.

En este código he creado una clase llamada estrellitas, por si quieres darle algún color o tamaño concreto para adaptarlo a la imagen de tu tema.

Si no quieres utilizar estilos, y te conformas con las estrellitas por defecto, solo debes borrar la clase y dejar el código así: <div>★★★★★</div>

Personalizar las estrellitas

Si has decidido modificar las estrellitas y adaptarlas a los colores y tamaños de tu tema, deberás crear la clase estrelitas y aplicarle los estilos que necesites. Por ejemplo puedes hacer algo así:

.estrellitas {
color: yellow;
text-align: center;
font-size: 16px;
}

Esta clase creará unas estrellitas amarillas, centradas y de tamaño 16px.

Ten en cuenta que mediante este método, serás tú quien puntúe tus artículos, no podrán ser tus visitantes, ya que este es un código de copiar y pegar.

Si este método te parece demasiado simple para tus necesidades (ya te he advertido de que era muy sencillo), y quieres que sean tus propios visitantes quienes te puntúen, puedes utilizar un plugin como  Yasr – Yet Another Stars Rating, que tiene muchas más opciones y también puedes poner medias estrellitas en las puntuaciones.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *