Introducción

Este tutorial explica, con todo lujo de detalles, cómo crear tarjetas visuales de “Pros y Contras” para WordPress usando HTML semántico disponible (limitado a las etiquetas indicadas) y CSS moderno. El objetivo es lograr un componente accesible, responsive y fácil de insertar en entradas o plantillas de WordPress mediante el editor (bloque HTML) o un shortcode. Se incluyen ejemplos listos para copiar y pegar.

Concepto y accesibilidad

Una tarjeta de “Pros y Contras” debe comunicar claramente las ventajas y desventajas. Utilizaremos encabezados y listas para mantener semántica y navegabilidad por lectores de pantalla. Para reforzar la semántica usaremos atributos ARIA donde aporte claridad (por ejemplo, aria-labelledby en contenedores tabulares). El resultado será legible tanto visualmente como para tecnologías de apoyo.

Estructura HTML recomendada

Debido a las restricciones de etiquetas, la estructura que proponemos emplea una tabla como contenedor de las dos cartas (Pros y Contras) y dentro de cada celda un encabezado y una lista ul para los elementos. Cada lista es semánticamente apropiada para enumerar ventajas o desventajas.

Ejemplo de marcado (HTML)

lttable class=pc-table role=group aria-labelledby=pc-heading cellspacing=0 cellpadding=0gt
  lttrgt
    lttd class=pc-card pc-pros aria-labelledby=pros-headinggt
      lth3 id=pros-headinggtProslt/h3gt
      ltulgt
        ltligtFácil de leerlt/ligt
        ltligtFormato claro y directolt/ligt
        ltligtDestaca ventajas clavelt/ligt
      lt/ulgt
    lt/tdgt
    lttd class=pc-card pc-cons aria-labelledby=cons-headinggt
      lth3 id=cons-headinggtContraslt/h3gt
      ltulgt
        ltligtPuede requerir más espacio en móvillt/ligt
        ltligtNo muestra matices largoslt/ligt
      lt/ulgt
    lt/tdgt
  lt/trgt
lt/tablegt

CSS para estilos y responsividad

El CSS hará que las celdas actúen como tarjetas con bordes, iconos visuales mediante pseudo-elementos y colores diferenciados. También convertiremos la tabla en una disposición en columna en pantallas pequeñas para mantener legibilidad.

Ejemplo de CSS

/ Estilos base /
.pc-table {
  width: 100%
  border-collapse: separate
  border-spacing: 1rem
  table-layout: fixed / ayuda a controlar el ancho /
}

/ Cada celda será la tarjeta /
.pc-card {
  padding: 1rem
  background: #fff
  border-radius: 8px
  box-shadow: 0 2px 8px rgba(18,24,32,0.06)
  vertical-align: top
  transition: transform 0.18s ease, box-shadow 0.18s ease
}

/ Interacción visual /
.pc-card:hover {
  transform: translateY(-4px)
  box-shadow: 0 8px 24px rgba(18,24,32,0.12)
}

/ Encabezados /
.pc-card h3 {
  margin: 0 0 0.5rem 0
  font-size: 1.06rem
  letter-spacing: 0.2px
}

/ Listas /
.pc-card ul {
  margin: 0
  padding: 0
  list-style: none
}
.pc-card ul li {
  position: relative
  padding-left: 2.2rem
  margin: 0.55rem 0
  line-height: 1.4
}

/ Iconos con pseudo-elementos /
.pc-pros ul li:before,
.pc-cons ul li:before {
  content: 
  width: 1.25rem
  height: 1.25rem
  position: absolute
  left: 0
  top: 0.1rem
  border-radius: 50%
  display: inline-block
}

/ Color para pros y cons /
.pc-pros {
  border: 1px solid rgba(34,197,94,0.12)
}
.pc-pros ul li:before {
  background: rgba(34,197,94,0.14)
  box-shadow: inset 0 0 0 3px rgba(34,197,94,0.18)
}

.pc-cons {
  border: 1px solid rgba(239,68,68,0.10)
}
.pc-cons ul li:before {
  background: rgba(239,68,68,0.12)
  box-shadow: inset 0 0 0 3px rgba(239,68,68,0.14)
}

/ Responsive: en móvil apilamos las tarjetas /
@media (max-width: 700px) {
  .pc-table {
    display: block
  }
  .pc-table tr {
    display: block
  }
  .pc-table td {
    display: block
    width: 100%
    margin-bottom: 1rem
  }
}

Mejoras visuales y variantes

1. Contador de items: agregar un número al lado de cada título con CSS o generar dinámicamente en PHP si procede.
2. Iconos reales: en lugar de pseudo-elementos, usar SVG inline o un icon font si el theme lo permite.
3. Versión compacta: reducir padding, esconder sombras y usar tipografía más pequeña para listados densos.

Integración en WordPress

Hay dos formas sencillas de añadir estas tarjetas en WordPress:

1. Bloque HTML (Editor de bloques): pegar el HTML (el fragmento anterior) en un bloque HTML y añadir el CSS en el personalizador → CSS adicional o en style.css del tema hijo.
2. Shortcode desde functions.php: crear un shortcode que devuelva el HTML para poder insertarlo en cualquier entrada o widget.

Ejemplo de shortcode (PHP)

// Añadir al functions.php del tema hijo
function pc_shortcode_pros_cons( atts = array(), content = null ) {
    // Atributos por defecto que puedes ampliar
    atts = shortcode_atts( array(
        title_pros => Pros,
        title_cons => Contras,
    ), atts, procons )

    // HTML seguro: puedes permitir más controles o sanitizar según necesites
    html  = lttable class=pc-table role=group aria-labelledby=pc-heading cellspacing=0 cellpadding=0gt
    html .= lttrgt
    html .= lttd class=pc-card pc-pros aria-labelledby=pros-headinggt
    html .= lth3 id=pros-headinggt . esc_html( atts[title_pros] ) . lt/h3gt
    html .= ltulgtltligtEjemplo de ventaja 1lt/ligtltligtEjemplo de ventaja 2lt/ligtlt/ulgt
    html .= lt/tdgt
    html .= lttd class=pc-card pc-cons aria-labelledby=cons-headinggt
    html .= lth3 id=cons-headinggt . esc_html( atts[title_cons] ) . lt/h3gt
    html .= ltulgtltligtEjemplo de inconveniente 1lt/ligtltligtEjemplo de inconveniente 2lt/ligtlt/ulgt
    html .= lt/tdgt
    html .= lt/trgtlt/tablegt

    return html
}
add_shortcode( procons, pc_shortcode_pros_cons )

Uso en contenido: incluir [procons] donde quieras que aparezca la tabla. Puedes extender el shortcode para aceptar listas dinámicas mediante atributos o contenido entre etiquetas del shortcode.

Consideraciones de rendimiento y compatibilidad

• Evita cargas de CSS duplicadas: añade el CSS en el lugar centralizado (style.css del tema hijo o personalizador) en lugar de inyectarlo en cada entrada.
• Comprueba contrastes de color para accesibilidad (WCAG) si modificas colores.
• Prueba en varios navegadores y tamaños de pantalla la versión móvil apila las tarjetas para mantener legibilidad.

Resumen y recomendaciones finales

Con la estructura propuesta (tabla con celdas como tarjetas y listas semánticas), y el CSS mostrado, obtendrás tarjetas “Pros y Contras” fáciles de mantener y accesibles. Inserta el HTML directamente en un bloque HTML cuando necesites control rápido, o crea el shortcode PHP para reutilización. Personaliza colores, iconografía y tipografías según el estilo del tema para integrar el componente armónicamente.