Introducción
Este tutorial explica, paso a paso y con todo lujo de detalles, cómo diseñar en WordPress un layout de comparativa de hosting por características usando CSS. Verás la estructura HTML recomendada, cómo maquetarlo de forma responsive con CSS moderno (Grid y Flexbox), cómo destacar la mejor opción, cómo integrar microdata para SEO y un ejemplo de shortcode en PHP para generar la tabla dinámicamente desde WordPress.
Concepto y objetivos
- Crear una comparativa clara y legible que permita al usuario comparar características (espacio, tráfico, cuentas, precio, soporte, extras).
- Adaptarlo a móviles con cambio de layout a tarjetas (cards).
- Permitir destacar un plan recomendado con estilo visual y semántica accesible.
- Facilitar la integración en WordPress mediante shortcode o bloque.
1. Estructura HTML recomendada
La estructura base puede ser una tabla para sobremesa y una conversión a tarjetas para móvil. Usa clases semánticas para controlar estilos y accesibilidad (roles, scope en th). Aquí tienes un ejemplo simple de la tabla que colocaremos en el editor de WordPress o bien en un template:
lttable class=hosting-compare role=table aria-label=Comparativa de planes de hostinggt
lttheadgt
lttrgt
ltth scope=colgtCaracterísticalt/thgt
ltth scope=colgtBásicolt/thgt
ltth scope=colgtAvanzadolt/thgt
ltth scope=colgtPro (Recomendado)lt/thgt
lt/trgt
lt/theadgt
lttbodygt
lttrgt
ltth scope=rowgtEspacio SSDlt/thgt
lttdgt10 GBlt/tdgt
lttdgt50 GBlt/tdgt
lttd class=recommendedgt200 GBlt/tdgt
lt/trgt
lttrgt
ltth scope=rowgtTráfico mensuallt/thgt
lttdgtIlimitadolt/tdgt
lttdgtIlimitadolt/tdgt
lttd class=recommendedgtIlimitadolt/tdgt
lt/trgt
lttrgt
ltth scope=rowgtCuentas de correolt/thgt
lttdgt5lt/tdgt
lttdgt25lt/tdgt
lttd class=recommendedgtIlimitadaslt/tdgt
lt/trgt
lttrgt
ltth scope=rowgtPrecio meslt/thgt
lttdgtampeuro2.99lt/tdgt
lttdgtampeuro6.99lt/tdgt
lttd class=recommendedgtltbgtampeuro12.99lt/bgtlt/tdgt
lt/trgt
lttrgt
ltth scope=rowgtBotónlt/thgt
lttdgtlta href=# class=btngtComprarlt/agtlt/tdgt
lttdgtlta href=# class=btngtComprarlt/agtlt/tdgt
lttd class=recommendedgtlta href=# class=btn btn-primarygtElegir Prolt/agtlt/tdgt
lt/trgt
lt/tbodygt
lt/tablegt
Notas sobre la estructura
- Usa ltth scope=rowgt para los nombres de fila mejora la navegación con lectores de pantalla.
- La columna Recomendado recibe una clase .recommended para estilos y para semántica visual.
- Los enlaces deben usar href con rutas correctas en ejemplos usamos #.
2. CSS detallado para un layout profesional
Usaremos una combinación de estilos para:
- Diseño de tabla limpio en pantallas anchas.
- Sticky header para que los títulos de columna permanezcan visibles.
- Conversión a tarjetas en móviles usando media queries.
- Destacar el plan recomendado con sombra, color y badge.
/ Estilos base para la tabla /
.hosting-compare{
width:100%
border-collapse:separate
border-spacing:0
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
color:#222
}
/ Encabezados /
.hosting-compare thead th{
background:#f7f7f8
text-align:center
padding:14px 12px
font-weight:600
position:sticky
top:0 / sticky header /
z-index:2
border-bottom:1px solid rgba(0,0,0,0.06)
}
/ Filas y celdas /
.hosting-compare tbody th,
.hosting-compare tbody td{
padding:12px
text-align:center
border-bottom:1px solid rgba(0,0,0,0.04)
}
/ Primera columna (características) /
.hosting-compare tbody th{
text-align:left
font-weight:500
background:#fff
width:30%
position:sticky
left:0
z-index:1
border-right:1px solid rgba(0,0,0,0.04)
}
/ Botones en celdas /
.hosting-compare .btn{
display:inline-block
padding:8px 14px
border-radius:6px
text-decoration:none
color:#333
border:1px solid rgba(0,0,0,0.08)
background:transparent
}
/ Botón principal /
.hosting-compare .btn-primary{
background:#0066cc
color:#fff
border-color:#0066cc
}
/ Destacar plan recomendado /
.hosting-compare td.recommended,
.hosting-compare th.recommended{
background:linear-gradient(180deg,#fffef9,#fff8f0)
box-shadow:0 6px 18px rgba(0,0,0,0.06)
transform:translateY(-4px)
border-radius:8px
}
/ Badge Recomendado (puedes insertarlo como pseudo-elemento con CSS si lo deseas) /
.hosting-compare thead th.recommended::after{
content:Recomendado
display:inline-block
background:#ff6b00
color:#fff
font-size:12px
padding:4px 8px
border-radius:999px
margin-left:8px
}
/ Responsive: en pantallas pequeñas convertimos a layout de tarjetas /
@media (max-width:900px){
.hosting-compare,
.hosting-compare thead,
.hosting-compare tbody,
.hosting-compare th,
.hosting-compare td,
.hosting-compare tr{
display:block
width:100%
}
/ Ocultar el header original /
.hosting-compare thead{
display:none
}
/ Cada fila se convierte en card con la primera celda (característica) como label /
.hosting-compare tbody tr{
margin-bottom:18px
background:#fff
border-radius:8px
box-shadow:0 6px 18px rgba(0,0,0,0.04)
padding:12px
}
.hosting-compare tbody th{
position:relative
left:auto
width:auto
border-right:none
background:transparent
padding-bottom:8px
}
.hosting-compare tbody td{
text-align:left
padding:6px 0
display:flex
justify-content:space-between
}
.hosting-compare td .btn{
margin-left:auto
}
}
Explicación de decisiones CSS
- position: sticky en thead th y en la primera columna mejora la usabilidad en tablas anchas.
- En móviles la tabla se convierte en bloques esto mejora legibilidad y accesibilidad táctil.
- Evita depender de tablas horizontales scroll (overflow-x) si puedes ofrecer una vista de tarjetas.
3. Accesibilidad y SEO (microdata)
Para SEO y microdata puedes marcar cada plan como un Product/Service usando atributos itemprop/itemtype. Es posible añadir microdatos en la fila o en un contenedor alrededor de cada plan. Ejemplo simplificado en HTML para una celda con precio:
lttd itemscope itemtype=http://schema.org/Product class=recommendedgt
ltspan itemprop=namegtPro Planlt/spangt
ltdiv itemprop=offers itemscope itemtype=http://schema.org/Offergt
ltspan itemprop=priceCurrency content=EURgtampeurolt/spangt
ltspan itemprop=pricegt12.99lt/spangt
ltlink itemprop=availability href=http://schema.org/InStock /gt
lt/divgt
lt/tdgt
Esto facilita a los motores de búsqueda identificar precios y disponibilidad. Comprueba con la herramienta de Google Rich Results que tu marcado es compatible.
4. Ejemplo: Shortcode en WordPress que genera la tabla desde custom post type
A continuación un ejemplo mínimo de cómo registrar un shortcode que obtiene posts del CPT hosting_plan y renderiza la tabla comparativa. Puedes personalizar campos con ACF o meta fields.
/
Shortcode [hosting_compare]
Devuelve una tabla comparativa básica basada en posts del CPT hosting_plan
/
function sc_hosting_compare( atts ){
ob_start()
args = array(
post_type => hosting_plan,
posts_per_page => 3,
orderby => meta_value_num,
meta_key => price, // requiere que guardes precio en meta
order => ASC
)
q = new WP_Query( args )
plans = q->posts
if( empty(plans) ){
return ltpgtNo hay planes disponibles.lt/pgt
}
echo lttable class=hosting-compare role=table aria-label=Comparativa de planes de hostinggt
// Cabecera
echo lttheadgtlttrgtltthgtCaracterísticalt/thgt
foreach( plans as post ){
setup_postdata(post)
name = esc_html( get_the_title(post) )
// Marca el plan recomendado según meta (ejemplo)
recommended = get_post_meta(post->ID,recommended,true) ? class=recommended :
echo ltth{recommended}gt{name}lt/thgt
}
echo lt/trgtlt/theadgt
// Lista de características estática (puedes dinamizarla)
features = array(Espacio SSD,Tráfico,Cuentas de correo,Precio)
echo lttbodygt
foreach( features as feature ){
echo lttrgtltth scope=rowgt.esc_html(feature).lt/thgt
foreach( plans as post ){
value =
switch(feature){
case Espacio SSD:
value = get_post_meta(post->ID,space,text)
break
case Tráfico:
value = get_post_meta(post->ID,traffic,text)
break
case Cuentas de correo:
value = get_post_meta(post->ID,emails,text)
break
case Precio:
price = get_post_meta(post->ID,price,text)
value = ampeuro.esc_html(price)
break
}
recommended = get_post_meta(post->ID,recommended,true) ? class=recommended :
echo lttd{recommended}gt.(value ? value : ampmdash).lt/tdgt
}
echo lt/trgt
}
echo lt/tbodygtlt/tablegt
wp_reset_postdata()
return ob_get_clean()
}
add_shortcode(hosting_compare,sc_hosting_compare)
Notas sobre el shortcode
- Este ejemplo asume que tienes un custom post type hosting_plan y que guardas meta keys: price, space, traffic, emails y recommended.
- Sanitiza siempre los datos y valida las meta keys antes de mostrarlas en producción.
- Puedes ampliar el shortcode para aceptar atributos (orden, número de columnas, destacar un ID concreto).
5. Variantes visuales y mejoras avanzadas
5.1. Stickiness y doble eje (scroll horizontal)
Si tienes muchas columnas (más de 4-5 planes), considera mantener la primera columna sticky y permitir scroll horizontal en el resto. En ese caso encierra la tabla en un contenedor con overflow-x:auto y aplica min-width a la tabla para evitar comprimidos indeseados.
5.2. Uso de iconos y estado (check/cross)
Para características booleanas (SSL, Backups, Soporte 24/7) usa iconos SVG inline o clases de icon font. Si usas SVG inline dentro de la celda, asegúrate de incluir texto alternativo accesible con aria-hidden y un span con sr-only si es necesario.
5.3. Filtro y ordenación en cliente
Si quieres interacción (ordenar por precio, filtrar por capacidad), implementa un pequeño script que reordene columnas o filtre filas. Como no incluimos JS aquí, una alternativa sin JS es ofrecer enlaces que regeneren la vista mediante query vars (ejemplo: ?orden=precio) y que tu shortcode respete ese parámetro.
6. Performance y buenas prácticas
- Minimiza dependencias: evita cargar librerías CSS/JS sólo por el componente de comparativa.
- Usa clases específicas para evitar colisiones con el tema (p. ej. .hosting-compare).
- Optimiza imágenes (logos de proveedores) con tamaños y formato WebP si las usas en celdas.
- Cachea la salida del shortcode si los datos no cambian a menudo (transients o caches de fragmentos).
7. Ejemplo de CSS para tarjetas (mobile-first)
Si implementas un diseño mobile-first, estas reglas transforman cada plan en una card donde se listan las características verticalmente. Útil si la tabla original se vuelve demasiado ancha.
/ Card base para cada plan en mobile /
.plan-card{
border-radius:10px
border:1px solid rgba(0,0,0,0.06)
padding:14px
background:#fff
box-shadow:0 6px 18px rgba(0,0,0,0.04)
display:flex
flex-direction:column
}
.plan-card .price{
font-size:1.4rem
font-weight:700
color:#222
}
.plan-card .feature{
display:flex
justify-content:space-between
padding:8px 0
border-top:1px dashed rgba(0,0,0,0.03)
}
8. Checklist antes de publicar
- Probar en distintos navegadores y tamaños: escritorio, tablet, móvil.
- Verificar accesibilidad: uso de scope en th, roles y lectura en lectores de pantalla.
- Comprobar marcado de precios con Rich Results y validar microdata.
- Optimizar llamadas al servidor: cachear el shortcode si es necesario.
- Revisar enlaces de afiliado o trackers y políticas de privacidad si aplican.
Resumen final
Diseñar una comparativa de hosting eficaz implica una buena semántica en HTML, estilos CSS pensando en la conversión a móvil, y la integración con WordPress mediante shortcodes o bloques para gestionar contenido dinámico. Aplica la tabla como base para pantallas grandes y transforma a tarjetas para móviles destaca visualmente el plan recomendado y añade microdata para mejorar la detección por buscadores. El ejemplo de CSS y el shortcode PHP incluidos te permiten poner esto en marcha rápidamente y adaptarlo a tus campos y estilo de marca.
Leave a Reply