Introducción

En este tutorial aprenderás paso a paso a crear etiquetas visuales de “Gratis” o “Premium” para entradas, tarjetas de productos u otros elementos de tu sitio WordPress usando pseudo-elementos CSS (::before y ::after). La ventaja de esta técnica es que no necesitas añadir marcas adicionales en tu HTML de salida: basta con añadir una clase o un atributo (desde PHP o el loop) y el CSS se encarga de dibujar la etiqueta. Verás ejemplos prácticos, variantes (cinta diagonal, rectángulo, esquina), cómo añadir la clase desde WordPress (categoría, meta o filter) y consideraciones de accesibilidad y responsive.

Concepto básico

La idea es marcar tus bloques (artículos, tarjetas, product cards) con una clase o atributo como .es-gratis o .es-premium, y usar un pseudo-elemento para generar la etiqueta visual. Ejemplo conceptual del HTML que genera WordPress (simplificado):

ltarticle class=post-card es-premiumgt
  lta href=...  class=post-card__thumbgtltimg src=... alt=...gtlt/agt
  lth3 class=post-card__titlegtTítulolt/h3gt
lt/articlegt

Ejemplo CSS: etiqueta diagonal tipo cinta

Esta versión crea una “cinta” diagonal en la esquina superior izquierda. Funciona bien para tarjetas con posición relativa.

/ Reglas base: la tarjeta debe ser contenedor posicionado /
.post-card { position: relative overflow: visible }

/ Cinta genérica (se aplicará cuando exista la clase correspondiente) /
.post-card.es-premium::before,
.post-card.es-gratis::before {
  content: attr(data-label) / puede tomar texto desde data-attribute /
  position: absolute
  top: 12px
  left: -40px / ajusta según rotación y tamaño /
  transform: rotate(-45deg)
  transform-origin: 0 0
  display: inline-block
  padding: 6px 48px
  color: #fff
  font-weight: 700
  font-size: 12px
  letter-spacing: .5px
  box-shadow: 0 2px 6px rgba(0,0,0,.15)
  border-radius: 2px / opcional /
  pointer-events: none / decorativo /
  z-index: 10
}

/ Estilos por tipo /
.post-card.es-premium::before {
  background: linear-gradient(135deg,#ff7a18,#ff4e50)
}
.post-card.es-gratis::before {
  background: linear-gradient(135deg,#28c76f,#2ecc71)
  color: #0b2b17
}

Ejemplo CSS: etiqueta rectangular en la esquina

Si prefieres algo menos intrusivo que una cinta diagonal, aquí tienes un rectángulo sobre la esquina superior derecha.

.post-card { position: relative overflow: hidden }

.post-card.es-premium::before,
.post-card.es-gratis::before {
  content: attr(data-label)
  position: absolute
  top: 12px
  right: 12px
  display: inline-block
  padding: 4px 10px
  font-size: 12px
  font-weight: 600
  border-radius: 4px
  color: #fff
  box-shadow: 0 1px 4px rgba(0,0,0,.12)
  pointer-events: none
  z-index: 20
}

.post-card.es-premium::before { background: #d9534f }
.post-card.es-gratis::before  { background: #5cb85c color: #012 }

Soporte RTL y ajustes responsivos

Para entornos RTL (idiomas como árabe o hebreo) y para pantallas pequeñas, controla la posición con reglas específicas:

/ RTL: intercambia left/right para cinta o rectángulo /
html[dir=rtl] .post-card.es-premium::before {
  left: auto
  right: -40px
  transform-origin: 100% 0
  transform: rotate(45deg)
}

/ Adaptación móvil: reducir tamaño de la cinta /
@media (max-width: 480px) {
  .post-card.es-premium::before,
  .post-card.es-gratis::before {
    padding: 4px 30px
    font-size: 11px
    top: 8px
    left: -26px
  }
  html[dir=rtl] .post-card.es-premium::before {
    right: -26px
  }
}

Accesibilidad

Las pseudo-etiquetas son puramente visuales. Para usuarios de lectores de pantalla y SEO es recomendable añadir además texto semántico (visualmente oculto) o usar atributos que describan el estado. Dos alternativas:

• Añadir un elemento visualmente oculto dentro del artículo con la etiqueta, usando una clase accesible (por ejemplo .screen-reader-text).
• Usar data-label o atributo aria-label en el contenedor para que el contenido esté disponible en el DOM (aunque el pseudo-elemento también puede usar content: attr(data-label) para mostrarlo visualmente).

/ Clase de ejemplo para ocultar texto visualmente pero mantenerlo accesible /
.screen-reader-text {
  position: absolute !important
  height: 1px width: 1px
  overflow: hidden clip: rect(1px, 1px, 1px, 1px)
  white-space: nowrap border: 0 padding: 0 margin: -1px
}

Cómo añadir la clase o atributo desde WordPress

A continuación verás ejemplos de cómo añadir la clase es-premium o es-gratis en la salida del loop o en tarjetas de producto. Es preferible añadir la clase en PHP y no insertar spans extra para mantener el marcado limpio y permitir que los pseudo-elementos trabajen.

1) Basado en metadato personalizado (post meta)

Supongamos que usas un meta key llamado is_premium con valor 1 para contenido premium. Puedes añadir la clase al atributo class o como data-label.

/ functions.php o en el template del loop /
post_id = get_the_ID()
is_premium = get_post_meta( post_id, is_premium, true )

classes = array( post-card )
if ( is_premium ) {
  classes[] = es-premium
  data_label = Premium
} else {
  classes[] = es-gratis
  data_label = Gratis
}

?>
ltarticle class= data-label=gt
  lt!-- resto de la card --gt
lt/articlegt

2) Usando post_class filter (añadir clase automáticamente)
Si quieres que todas las llamadas a post_class incluyan la clase, añade un filtro:
/ En functions.php /
add_filter( post_class, function( classes, class, post_id ) {
    is_premium = get_post_meta( post_id, is_premium, true )
    if ( is_premium ) {
        classes[] = es-premium
    } else {
        classes[] = es-gratis
    }
    return classes
}, 10, 3 )

3) Basado en categoría o taxonomía
Si distingues contenidos por categoría (por ejemplo categoría premium), puedes comprobar si el post pertenece a esa categoría:
/ En el loop o template /
if ( has_category( premium, get_the_ID() ) ) {
  echo ltarticle class=post-card es-premium data-label=Premiumgt
} else {
  echo ltarticle class=post-card es-gratis data-label=Gratisgt
}

4) Ejemplo con WooCommerce: marcar productos premium
Para productos WooCommerce puedes usar hooks para añadir la clase al bucle de productos. Aquí un ejemplo sencillo que imprime data-label en la plantilla del producto (sin añadir elementos extra visibles):
/ functions.php /
add_action( woocommerce_before_shop_loop_item, function() {
    global product
    if ( ! product ) return
    is_premium = get_post_meta( product->get_id(), is_premium, true )

    // Inyectar atributo data-label en el wrapper que inicia en plantilla.
    // Alternativa: filtrar la salida del wrapper con switch de template.
    // Ejemplo simple: imprimir un script data attribute para que JS/selector lo use
    if ( is_premium ) {
        echo lt!-- premium: true --gt
    } else {
        echo lt!-- premium: false --gt
    }
}, 5 )

Nota: WooCommerce estructura sus templates la forma más robusta es sobrescribir la plantilla del loop de producto o añadir tu propia clase al envolver la tarjeta del producto en tu theme child.
Variaciones visuales y consejos de diseño

Colores coherentes: usa variables CSS o utilidades del tema para que las etiquetas conserven estilo corporativo.
Sombra y contraste: asegúrate de contraste suficiente (WCAG) entre fondo y texto de la etiqueta.
Animaciones sutiles: usa transform/opacity para animar entradas cuando aparecen, evitando animaciones que distraigan.
Evita cubrir información importante: coloca la etiqueta donde no tape títulos o botones de acción.
Crear varias tallas: define modificadores (.post-card--sm, .post-card--lg) si tu layout usa varias card sizes.

Ejemplo completo — HTML (template), PHP y CSS combinados
Ejemplo final simplificado para una tarjeta: en tu loop de tema puedes usar algo así:
lt?php
/ Dentro del loop: /
post_id = get_the_ID()
is_premium = get_post_meta( post_id, is_premium, true )
label_class = is_premium ? es-premium : es-gratis
label_text  = is_premium ? Premium : Gratis
?gt

ltarticle class=post-card  data-label=gt
  lta class=post-card__thumb href=lt?php the_permalink() ?gtgtlt?php the_post_thumbnail(medium) ?gtlt/agt
  lth3 class=post-card__titlegtlta href=lt?php the_permalink() ?gtgtlt?php the_title() ?gtlt/agtlt/h3gt
  ltspan class=screen-reader-textgtlt?php echo esc_html(label_text) ?gtlt/spangt
lt/articlegt

/ CSS mínimo para hacer visible la etiqueta /
.post-card { position: relative padding: 12px background: #fff border-radius: 6px }

/ Cinta o rectángulo: elige tu preferido. Este ejemplo: rectángulo /
.post-card::before {
  content: attr(data-label)
  position: absolute
  top: 10px
  right: 10px
  padding: 4px 8px
  font-size: 12px
  font-weight: 700
  border-radius: 4px
  color: #fff
  z-index: 6
}

.post-card.es-premium::before { background: #c0392b }
.post-card.es-gratis::before  { background: #27ae60 color: #022 }

Pruebas y depuración

Comprueba en el inspector de navegador que la clase o data-attribute se ha añadido correctamente al contenedor.
Verifica contraste de color y legibilidad con herramientas como las DevTools o servicios de contraste.
Prueba en diferentes tamaños de pantalla y en modo RTL si corresponde.
Si usas caché, purga para ver cambios en CSS/PHP.

Consideraciones finales y buenas prácticas

Prefiere añadir una clase o atributo desde PHP en lugar de inyectar etiquetas extra. Los pseudo-elementos funcionan mejor con menos marcado.
Mantén la separación de responsabilidades: la lógica (PHP) decide si es “Premium” o “Gratis” el CSS decide cómo se pinta.
Usa variables CSS (--color-premium, --color-gratis) si tu tema lo soporta, así facilitas mantenimiento y theming.
Documenta en tu tema o child-theme los meta keys o categorías que definen el estado para que otros desarrolladores lo entiendan.

Variables CSS de ejemplo (para mantenimiento)
:root {
  --label-premium-bg: linear-gradient(135deg,#ff7a18,#ff4e50)
  --label-gratis-bg: linear-gradient(135deg,#28c76f,#2ecc71)
  --label-color-dark: #022
  --label-color-light: #fff
}

.post-card.es-premium::before { background: var(--label-premium-bg) color: var(--label-color-light) }
.post-card.es-gratis::before  { background: var(--label-gratis-bg) color: var(--label-color-dark) }

Con esta base puedes crear etiquetas visuales consistentes y accesibles para “Gratis” y “Premium”, tanto en entradas como en listados de productos. Ajusta posiciones, tamaños y tonos según el diseño de tu tema. Implementando la clase o data-attribute desde PHP lograrás una solución limpia y escalable.