Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear una cinta o “ribbon” de Oferta personalizada para WordPress usando pseudo-elementos CSS (::before y ::after). La técnica aprovecha la potencia de los pseudo-elementos para formar las puntas y la cinta sin añadir elementos extra al HTML, manteniendo el marcado limpio y optimizado para temas y tiendas (por ejemplo WooCommerce).

¿Por qué usar pseudo-elementos?

• Permiten crear formas complejas sin añadir más elementos al DOM.
• Mantenimiento sencillo: la cinta se controla enteramente desde CSS.
• Compatibilidad y rendimiento: menos elementos y estilos CSS bien organizados.

Requisitos

• Un tema hijo (child theme) o un plugin específico para añadir código (para no modificar el tema padre).
• Acceso a los archivos del tema (template files) o a los hooks adecuados si usas WooCommerce.
• Conocimientos básicos de CSS y PHP para integración en WordPress.

Estructura HTML mínima

La idea es añadir una etiqueta simple donde queramos mostrar la etiqueta de Oferta. Por ejemplo, en un bucle de producto podríamos poner un elemento con la clase ribbon. El HTML mínimo sería:

lta class=ribbon ribbon--offer href=#gtOfertalt/agt

Si la cinta es puramente decorativa y no debe ser un enlace, usa una etiqueta no interactiva (por ejemplo ltspangt). En entornos donde el código HTML en ejemplo aparezca en el frontend, asegúrate de añadir atributos de accesibilidad adecuados (aria-hidden, etc.).

CSS: creación de la cinta con pseudo-elementos

El siguiente bloque CSS es una implementación completa y comentada. Crea una cinta en la esquina superior izquierda, con una forma trapezoidal, bordes triangulares hechos con ::before y ::after, transformación para rotar la cinta y control de sombras, responsividad y variante para color.

/ Estilos base para la cinta /
.ribbon {
  position: absolute          / situamos la cinta respecto al contenedor posicionado /
  top: 12px                   / ligera separación del borde superior /
  left: -36px                 / se desplaza hacia la izquierda para efecto de esquina /
  display: inline-block
  padding: 0.5rem 2.2rem      / altura y longitud visible de la cinta /
  background: linear-gradient(135deg,#ff5a00,#ff7a2b) / degradado opcional /
  color: #fff
  font-weight: 700
  font-size: 0.9rem
  text-transform: uppercase
  letter-spacing: 0.03em
  transform: rotate(-35deg)   / ángulo clásico de las ribbons /
  box-shadow: 0 2px 6px rgba(0,0,0,0.25)
  z-index: 20
  white-space: nowrap
  border-radius: 2px
}

/ Puntas triangulares: antes y después /
.ribbon::before,
.ribbon::after {
  content: 
  position: absolute
  width: 0
  height: 0
  border-style: solid
  z-index: -1
}

/ Puntera derecha (simula la parte doblada por debajo) /
.ribbon::before {
  right: -12px
  top: 50%
  transform: translateY(-50%) rotate(0deg)
  border-width: 10px 0 10px 12px / triángulo apuntando hacia la derecha /
  border-color: transparent transparent transparent rgba(0,0,0,0.12)
}

/ Puntera izquierda (pequeño recorte visual al inicio) /
.ribbon::after {
  left: -12px
  top: 50%
  transform: translateY(-50%) rotate(0deg)
  border-width: 10px 12px 10px 0 / triángulo apuntando hacia la izquierda /
  border-color: transparent rgba(0,0,0,0.12) transparent transparent
}

/ Variante de color (clase adicional para controlar ofertas especiales) /
.ribbon--offer {
  background: linear-gradient(135deg,#e91e63,#ff4081)
}

/ Reducir tamaño en móviles /
@media (max-width: 480px) {
  .ribbon {
    transform: rotate(-25deg)
    left: -28px
    padding: 0.4rem 1.6rem
    font-size: 0.8rem
  }
  .ribbon::before,
  .ribbon::after {
    border-width: 8px 0 8px 10px
  }
}

Explicación de las decisiones técnicas

1. Se usa transform: rotate(…) para el aspecto clásico de las ribbons sin complicar el flujo del documento.
2. Las pseudo-elementos ::before y ::after generan los triángulos de los extremos mediante borders, evitando elementos adicionales en el HTML.
3. Position absolute requiere que el contenedor padre tenga position: relative así la cinta se posiciona respecto al bloque del producto.
4. Se añade una clase modificadora (.ribbon–offer) para separar presentación de contenido y facilitar variantes.

Integración en WordPress — añadir el HTML en el template

La forma más directa es insertar el HTML desde la plantilla del tema donde se renderiza el producto o la entrada. Aquí un ejemplo para añadir la cinta en un loop de productos (o en cualquier plantilla):

/ En el archivo template (por ejemplo content-product.php o loop-custom.php) /
lt?php
// dentro de la estructura del producto, en un contenedor posicionado (position: relative)
echo lta class=ribbon ribbon--offer href=.esc_url( get_permalink() ).gtOfertalt/agt
?gt

Si el ribbon debe mostrarse solo en productos en oferta, envuelve la salida con la condición adecuada (por ejemplo para WooCommerce puede usarse wc_get_product() y product->is_on_sale()).

Integración en WordPress — añadir vía hook (WooCommerce)

En lugar de modificar plantillas, usa un hook para inyectar la cinta en el lugar correcto. Ejemplo para WooCommerce:

/ functions.php del theme hijo o un plugin personalizado /
function mi_ribbon_oferta_wc() {
    global product
    if ( ! product ) {
        return
    }
    if ( product->is_on_sale() ) {
        echo lta class=ribbon ribbon--offer href=.esc_url( get_permalink( product->get_id() ) ).gtOfertalt/agt
    }
}
add_action( woocommerce_before_shop_loop_item_title, mi_ribbon_oferta_wc, 10 )

Encolar los estilos en WordPress

Procura añadir el CSS en un archivo propio y encolarlo correctamente para evitar problemas con actualizaciones. Ejemplo para functions.php:

function mi_enqueue_ribbon_styles() {
    wp_enqueue_style( mi-ribbon, get_stylesheet_directory_uri() . /css/mi-ribbon.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_enqueue_ribbon_styles )

Coloca el CSS anterior en el archivo css/mi-ribbon.css de tu tema hijo o plugin.

Posicionamiento y contenedor padre

Para que .ribbon se posicione correctamente, el contenedor del producto debe tener position: relative y overflow visible (si se oculta, la cinta se recortará). Ejemplo de CSS del contenedor:

.product-card { / ejemplo de clase del contenedor /
  position: relative
  overflow: visible
  padding-top: 1rem / espacio para la cinta si es necesario /
}

Variantes y personalización

• Colocación: para top-right usa right en lugar de left y rotación positiva (rotate(35deg)).
• Tamaños: controla padding y font-size para adaptarlo a tarjetas pequeñas o grandes.
• Animaciones: añade transiciones o keyframes para que la cinta aparezca con una animación al cargar o al pasar el ratón.
• Temas oscuros: usa variables CSS (–ribbon-bg, –ribbon-color) para facilitar el cambio según el esquema de color del sitio.

Accesibilidad

Si la cinta es puramente decorativa y no aporta información relevante para usuarios de lectores de pantalla, marca el elemento con aria-hidden=true. Si la cinta comunica una oferta importante, asegúrate de que la información esté presente también en el contenido accesible (por ejemplo un texto dentro de la ficha de producto o un atributo aria-label si es un enlace).

lta class=ribbon ribbon--offer href=# aria-hidden=truegtOfertalt/agt

ltspan class=screen-reader-textgtProducto en ofertalt/spangt

Soporte para RTL (idiomas con escritura derecha a izquierda)

Detecta el modo RTL y ajusta left/right y la rotación. Puedes usar una clase .rtl en el body o aprovechar body.rtl que WordPress suele añadir. Ejemplo:

body.rtl .ribbon {
  left: auto
  right: -36px
  transform: rotate(35deg)
}
body.rtl .ribbon::before { left: -12px right: auto }
body.rtl .ribbon::after { right: -12px left: auto }

Animación opcional (entrada con suavidad)

.ribbon {
  opacity: 0
  transform: rotate(-35deg) translateY(-6px)
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 300ms
}
.product-card:hover .ribbon,
.product-card.is-visible .ribbon {
  opacity: 1
  transform: rotate(-35deg) translateY(0)
}

Buenas prácticas y rendimiento

1. Usa un archivo CSS dedicado y minificado para la cinta o agrupa en la hoja principal del tema para evitar peticiones innecesarias.
2. Evita sobrescribir demasiadas reglas del tema padre: usa clases específicas (.ribbon, .ribbon–offer) para minimizar efectos colaterales.
3. Comprueba en dispositivos móviles, pantallas pequeñas y en distintos navegadores para garantizar que las pseudo-elementos se renderizan correctamente.
4. Usa variables CSS si necesitas múltiples variantes de color y facilitar mantenimiento.

Ejemplo final: plantilla combinada

Resumen rápido de cómo encajar todo: añadir la salida desde un hook o plantilla, encolar los estilos y asegurar que el contenedor padre tiene position: relative. Con esto tendrás una cinta de Oferta visualmente atractiva, ligera y fácil de mantener.

Checklist antes de desplegar en producción

• Test en varios navegadores (Chrome, Firefox, Safari, Edge).
• Test en móviles y dispositivos de alta DPI.
• Comprobar accesibilidad (screen readers) y añadir textos alternativos si la cinta aporta información funcional.
• Comprobar compatibilidad con RTL si el sitio lo precisa.
• Minificar CSS y revisar rendimiento de carga.

Con las instrucciones anteriores podrás crear una cinta “Oferta” profesional usando pseudo-elementos, integrarla en WordPress de forma segura y personalizarla fácilmente según las necesidades del proyecto.