Tutorial WordPress: Diseñar cards para comparativas de hosting con ratings en estrellas CSS

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.

SushiHost