Introducción
Este artículo explica, con todo lujo de detalles, cómo diseñar cards para comparativas de hosting en WordPress que muestren ratings en estrellas usando solo CSS (sin librerías externas). Incluye la estructura HTML/PHP para un template de WordPress, el CSS para las estrellas y la tarjeta, cómo encolar los estilos desde functions.php y buenas prácticas de accesibilidad, rendimiento y SEO para comparativas y enlaces de afiliado.
Visión general y objetivos
- Crear cards visuales y responsivas que muestren logo, nombre, precio, características clave, pros/contras y un sistema de rating con estrellas (posibilidad de fracciones: 4.3, 4.5…).
- Implementar el rating con CSS puro para permitir llenado parcial de estrellas (porcentaje) y soporte para lectores de pantalla.
- Integrarlo en WordPress mediante un template parcial o dentro del loop, consumiendo un meta campo o ACF (campo personalizado) con el valor de rating.
Estructura recomendada de la card (concepto)
La card estará compuesta por una imagen/logo, título, subtítulo (plan o tipo), precio, un bloque de features, el rating visual y CTA(s). Para facilitar la integración con WordPress, se recomienda crear un template partial (template-parts/hosting-card.php) que reciba datos del post o de un array de datos.
Markup generado (ejemplo en PHP para WordPress)
Este fragmento PHP es el HTML que renderizará cada card. El rating se transforma en porcentaje para controlar el ancho del relleno de las estrellas.
lt?php
// Dentro de un template part: template-parts/hosting-card.php
// Variables esperadas: post, logo_url, plan, price, features (array), rating (float 0-5), affiliate_url
rating = floatval( get_post_meta( get_the_ID(), hosting_rating, true ) )
if ( ! rating ) {
rating = 4.2 // valor por defecto
}
rating = max(0, min(5, rating))
rating_pct = ( rating / 5 ) 100 // porcentaje para ancho del fill
logo_url = get_post_meta( get_the_ID(), hosting_logo, true )
price = get_post_meta( get_the_ID(), hosting_price, true )
plan = get_post_meta( get_the_ID(), hosting_plan, true )
affiliate_url = get_post_meta( get_the_ID(), hosting_affiliate, true )
features = get_post_meta( get_the_ID(), hosting_features, true ) // puede ser array o texto
?gt
ltarticle class=hosting-card aria-label=Comparativa hosting: lt?php echo esc_attr( get_the_title() ) ?gt itemscope itemtype=http://schema.org/Productgt
ltdiv class=hosting-card__mediagt
ltimg src=lt?php echo esc_url( logo_url ) ?gt alt=Logo lt?php echo esc_attr( get_the_title() ) ?gt itemprop=imagegt
lt/divgt
ltdiv class=hosting-card__bodygt
lth3 class=hosting-card__title itemprop=namegtlt?php the_title() ?gtlt/h3gt
ltp class=hosting-card__plangtlt?php echo esc_html( plan ) ?gtlt/pgt
ltdiv class=hosting-card__price itemprop=offers itemscope itemtype=http://schema.org/Offergt
ltspan itemprop=priceCurrency content=EURgt€lt/spangt
ltspan class=hosting-card__amount itemprop=pricegtlt?php echo esc_html( price ) ?gtlt/spangt
lt/divgt
ltul class=hosting-card__featuresgt
lt?php
if ( is_array( features ) ) {
foreach ( features as f ) {
echo ltligt . esc_html( f ) . lt/ligt
}
} elseif ( features ) {
echo ltligt . esc_html( features ) . lt/ligt
}
?gt
lt/ulgt
ltdiv class=hosting-card__rating aria-label=Valoración: lt?php echo esc_attr( number_format( rating, 1 ) ) ?gt de 5gt
ltdiv class=stars role=img aria-hidden=truegt
ltdiv class=stars__emptygt★★★★★lt/divgt
ltdiv class=stars__fill style=width: lt?php echo esc_attr( rating_pct ) ?gt%gt★★★★★lt/divgt
lt/divgt
ltspan class=hosting-card__rating-numbergtlt?php echo esc_html( number_format( rating, 1 ) ) ?gtlt/spangt
lt/divgt
ltdiv class=hosting-card__ctagt
lta href=lt?php echo esc_url( affiliate_url ) ?gt class=btn rel=nofollow sponsored target=_blankgtVisitar lt?php the_title() ?gtlt/agt
lt/divgt
lt/divgt
lt/articlegt
CSS: diseño de la card y estrellas (explicado línea a línea)
La técnica de estrellas usa dos capas de texto con el mismo contenido ★★★★★. La capa de fondo muestra las estrellas vacías (gris) y la capa superior (absoluta) muestra las estrellas llenas (color) con overflow oculto y ancho variable según el rating en porcentaje. Esto permite representar fracciones (4.3 -> 86%).
/ hosting-cards.css - estilos básicos para cards y sistema de estrellas /
.hosting-card {
box-sizing: border-box
display: grid
grid-template-columns: 72px 1fr
gap: 12px
padding: 16px
border: 1px solid #e6e6e6
border-radius: 8px
background: #fff
align-items: center
}
/ Media (logo) /
.hosting-card__media img {
width: 72px
height: 72px
object-fit: contain
display: block
}
/ Texto principal /
.hosting-card__title {
margin: 0 0 4px 0
font-size: 1.05rem
font-weight: 700
}
.hosting-card__plan {
margin: 0 0 8px 0
color: #666
font-size: 0.9rem
}
/ Precio /
.hosting-card__price {
font-size: 1.05rem
font-weight: 700
color: #1a73e8
margin-bottom: 8px
}
/ Features /
.hosting-card__features {
margin: 0 0 10px 0
padding-left: 18px
color: #444
font-size: 0.9rem
}
/ STAR RATING - técnica con texto repetido /
.stars {
position: relative
display: inline-block
line-height: 1
font-size: 1.05rem
font-family: Segoe UI Symbol, Noto Color Emoji, Arial, sans-serif
unicode-bidi: bidi-override
direction: ltr
}
/ Estrellas vacías (base) /
.stars__empty {
color: #dcdcdc / color de estrellas vacías /
-webkit-text-stroke: 0
}
/ Estrellas llenas (superposición) /
.stars__fill {
position: absolute
top: 0
left: 0
white-space: nowrap
overflow: hidden
color: #ffb400 / color de estrellas llenas /
pointer-events: none
}
/ Número de rating junto a estrellas /
.hosting-card__rating-number {
margin-left: 8px
font-weight: 600
color: #333
font-size: 0.95rem
}
/ CTA /
.hosting-card__cta .btn {
display: inline-block
margin-top: 10px
padding: 8px 12px
background: linear-gradient(180deg,#1a73e8,#1558b0)
color: #fff
border-radius: 6px
text-decoration: none
font-weight: 700
}
/ Responsive: en pantallas estrechas apilar /
@media (max-width: 600px) {
.hosting-card { grid-template-columns: 1fr grid-template-rows: auto }
.hosting-card__media { justify-self: start }
}
Notas sobre el CSS de estrellas
- Se usa texto ★★★★★ para garantizar que las estrellas se escalen con el font-size y sean fáciles de colorear.
- El ancho de .stars__fill se controla inline desde PHP: style=width: 86% para un rating de 4.3 (86%).
- El uso de overflow hidden en la capa de fill permite fracciones sin necesidad de imágenes ni SVG complejos.
Encolar el CSS en WordPress (functions.php)
Encolar el archivo CSS correctamente para que el estilo esté disponible en el frontend.
// functions.php
function theme_enqueue_hosting_cards() {
wp_enqueue_style( hosting-cards, get_stylesheet_directory_uri() . /css/hosting-cards.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, theme_enqueue_hosting_cards )
Integración en el loop de comparativas
Si tienes un CPT (custom post type) llamado hosting o posts con metadata, en tu plantilla de archivo (archive-hosting.php) puedes llamar al template part dentro del loop:
// archive-hosting.php (ejemplo)
if ( have_posts() ) {
while ( have_posts() ) {
the_post()
get_template_part( template-parts/hosting-card )
}
}
Accesibilidad y SEO
- Proporcionar aria-label en la card con el nombre y valor de rating ayuda a usuarios de lectores de pantalla.
- Usar microdatos (schema.org Product y Offer) mejora la comprensión del contenido por los buscadores.
- Agregar rel=nofollow sponsored a enlaces de afiliado para cumplir con políticas y evitar pasar PageRank no deseado.
- Incluir texto visible del rating (número) además de las estrellas gráficas garantiza comprensión por todos los usuarios.
Variaciones y mejoras
- Usar SVG para estrellas: si requieres iconografía más precisa (bordes, sombras), puedes usar una colección de SVG en lugar del texto ★★★★★. La técnica de superposición (fill con ancho variable) funciona igual si el SVG está en línea duplicado.
- Animaciones: añadir una transición en width para el .stars__fill produce un efecto de llenado suave cuando cargas el valor.
- Rating calculado: si el rating viene de usuarios (reviews), calcular la media en PHP o SQL y cachearla para evitar consultas frecuentes.
- Soporte para esquema de reviews: si publicas reviews, añadir schema Review/aggregateRating ayuda a Google a entender la valoración agregada.
Small CSS tweak para animación del fill
/ Añadir transición al ancho del fill para un efecto suave /
.stars__fill {
transition: width 450ms cubic-bezier(.4,0,.2,1)
}
Buenas prácticas de rendimiento
- Minimizar y combinar CSS crítico con el resto para evitar layout shift. El CSS de las cards puede cargarse en el stylesheet principal si es pequeño.
- Cachear cálculos de rating (si se agregan reviews frecuentemente) y usar transients para resultados agregados.
- Optimizar imágenes/logo (WebP cuando sea posible) y usar atributos width/height o CSS para evitar Cumulative Layout Shift (CLS).
Ejemplo completo de uso (resumen)
1) Añadir metadatos (rating, logo, price, features, affiliate) en cada post de hosting. 2) Crear template part con el markup PHP mostrado. 3) Crear archivo CSS con los estilos y encolarlo desde functions.php. 4) Insertar el template part en el loop de tu archivo de archive o página comparativa.
Tabla de comprobación rápida antes de publicar
| ¿CSS encolado correctamente? | Si / No |
| ¿Rating mostrado y numérico? | Si / No |
| ¿Enlaces de afiliado con rel? | Si / No |
| ¿Imágenes optimizadas y con alt? | Si / No |
Conclusión
Con la técnica de doble capa de texto y control del ancho en porcentaje puedes crear un sistema de estrellas flexible, accesible y visualmente atractivo sin dependencias externas. La integración en WordPress es directa: metadatos por hosting -> template part -> styles encolados -> loop de comparativas. Implementa microdatos y buenas prácticas de rendimiento para maximizar el valor de tus comparativas y mejorar su visibilidad en buscadores.
Leave a Reply