Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear un layout de recursos descargables para WordPress usando únicamente HTML y CSS para la presentación y un pequeño fragmento de PHP para integrarlo como shortcode o plantilla. El objetivo es obtener un listado o rejilla de archivos (PDF, ZIP, imágenes, etc.) con miniatura, título, descripción, metadatos (tamaño, tipo) y botón de descarga, responsive y accesible.

Requisitos y consideraciones previas

• WordPress instalado y acceso para editar functions.php o crear un plugin sencillo.
• Archivos subidos a la Biblioteca de Medios o accesibles por URL.
• Conocimientos básicos de cómo añadir un shortcode o template part en WordPress.
• Cumplir buenas prácticas de accesibilidad: atributos alt, botones con texto claro, foco visible.

Estructura HTML recomendada

La estructura propuesta es semántica y fácil de adaptar. Cada recurso es una tarjeta (card) que contiene: miniatura, título (enlace al archivo o página de detalle), descripción corta, metadatos y botón de descarga.

Ejemplo de marcado (reutilizable dentro de un loop de WordPress):

ltdiv class=resources-gridgt
  ltarticle class=resource-cardgt
    lta class=resource-link href=URL_DEL_ARCHIVO download aria-label=Descargar Título del recursogt
      ltdiv class=resource-thumbgt
        ltimg src=URL_DE_MINIATURA.jpg alt=Miniatura del recursogt
      lt/divgt
      lth3 class=resource-titlegtTítulo del recursolt/h3gt
    lt/agt
    ltp class=resource-descgtBreve descripción del recurso, dos o tres líneas para resumir el contenido.lt/pgt
    ltdiv class=resource-metagt
      ltspan class=resource-sizegt1.2 MBlt/spangt
      lta class=resource-download href=URL_DEL_ARCHIVO downloadgtDescargarlt/agt
    lt/divgt
  lt/articlegt
  lt!-- Repetir article por cada recurso --gt
lt/divgt

Clases recomendadas

resources-grid	Contenedor principal que maneja el grid o lista.
resource-card	Tarjeta individual del recurso.
resource-thumb	Miniatura (imagen o icono) del recurso.
resource-title	Título del recurso (enlace).
resource-desc	Descripción corta.
resource-meta	Contenedor para tamaño, tipo y botón de descarga.

CSS: diseño, responsive y accesibilidad

Usaremos CSS moderno con variables y grid/flexbox para lograr un diseño limpio y adaptable. Separaremos estilos para grid y versión lista (stacked).

:root{
  --gap: 1rem
  --card-bg: #ffffff
  --card-border: #e6e6e6
  --accent: #0b76f6
  --text: #222222
  --muted: #666666
  --radius: 8px
}

/ Contenedor grid /
.resources-grid{
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
  gap: var(--gap)
  align-items: start
}

/ Tarjeta /
.resource-card{
  background: var(--card-bg)
  border: 1px solid var(--card-border)
  border-radius: var(--radius)
  padding: 0.9rem
  box-shadow: 0 1px 2px rgba(0,0,0,0.03)
  display: flex
  flex-direction: column
  height: 100%
}

/ Miniatura /
.resource-thumb{
  width: 100%
  height: 140px
  overflow: hidden
  border-radius: 6px
  margin-bottom: 0.6rem
  display: flex
  align-items: center
  justify-content: center
  background: #f8f8f8
}
.resource-thumb img{
  width: 100%
  height: 100%
  object-fit: cover
  display: block
}

/ Título y enlace /
.resource-link{
  color: inherit
  text-decoration: none
}
.resource-title{
  font-size: 1.05rem
  margin: 0 0 0.35rem 0
  color: var(--text)
}

/ Descripción /
.resource-desc{
  color: var(--muted)
  font-size: 0.95rem
  margin: 0 0 0.6rem 0
  flex-grow: 1
}

/ Meta y botón /
.resource-meta{
  display: flex
  align-items: center
  justify-content: space-between
  gap: 0.5rem
  margin-top: 0.4rem
}
.resource-download{
  background: var(--accent)
  color: #fff
  padding: 0.45rem 0.7rem
  border-radius: 6px
  text-decoration: none
  font-weight: 600
  font-size: 0.95rem
}
.resource-download:focus,
.resource-link:focus{
  outline: 3px solid rgba(11,118,246,0.15)
  outline-offset: 3px
}

/ Versión lista para pantallas pequeñas si se desea /
@media (max-width: 600px){
  .resources-grid{
    grid-template-columns: 1fr
  }
  .resource-thumb{
    height: 120px
  }
}

Sugerencias de estilo adicional

• Usar object-fit: cover para mantener miniaturas consistentes.
• Agregar iconos según extensión (PDF, ZIP) usando background-image o ltimggt dentro de .resource-thumb.
• Incluir variables CSS para cambiar esquema de color desde un solo lugar.

Integración con WordPress (PHP)

A continuación, un shortcode sencillo que lista archivos adjuntos (attachments) de un array de IDs o, si no se pasa nada, los últimos X archivos de tipo PDF. Este ejemplo imprime el HTML anterior adaptado a WordPress. Coloca el código en functions.php o en un plugin.

/ Shortcode: [recursos_descargables ids=12,34,56 limit=8] /
function rd_recursos_descargables_shortcode(atts){
  atts = shortcode_atts(array(
    ids => ,
    limit => 8,
  ), atts, recursos_descargables)

  ids = array()
  if(!empty(atts[ids])){
    ids = array_map(intval, explode(,, atts[ids]))
  }

  if(!empty(ids)){
    args = array(
      post_type => attachment,
      post__in => ids,
      posts_per_page => count(ids),
      orderby => post__in,
    )
  } else {
    args = array(
      post_type => attachment,
      post_mime_type => array(application/pdf, application/zip,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document),
      posts_per_page => intval(atts[limit]),
      orderby => date,
      order => DESC,
    )
  }

  files = get_posts(args)
  if(empty(files)) return 
No hay recursos disponibles.

  html = ltdiv class=resources-gridgt
  foreach(files as file){
    file_url = esc_url(wp_get_attachment_url(file->ID))
    thumb = wp_get_attachment_image_src(file->ID, medium)
    thumb_url = thumb ? esc_url(thumb[0]) : esc_url(get_template_directory_uri()./images/default-thumb.png)
    title = esc_html(get_the_title(file->ID))
    desc = esc_html(wp_trim_words(file->post_content ? file->post_content : file->post_excerpt, 20, ...))
    filesize = size_format(filesize(get_attached_file(file->ID)), 2)

    html .= ltarticle class=resource-cardgt
    html .= lta class=resource-link href=. file_url . download aria-label=Descargar . title .gt
    html .= ltdiv class=resource-thumbgtltimg src=. thumb_url . alt=Miniatura de . title .gtlt/divgt
    html .= lth3 class=resource-titlegt. title .lt/h3gt
    html .= lt/agt
    html .= ltp class=resource-descgt. desc .lt/pgt
    html .= ltdiv class=resource-metagt
    html .= ltspan class=resource-sizegt. filesize .lt/spangt
    html .= lta class=resource-download href=. file_url . downloadgtDescargarlt/agt
    html .= lt/divgt
    html .= lt/articlegt
  }
  html .= lt/divgt

  return html
}
add_shortcode(recursos_descargables, rd_recursos_descargables_shortcode)

Encolar estilos correctamente

Para evitar conflictos, encola el CSS desde functions.php o desde tu plugin en lugar de añadirlo inline:

function rd_enqueue_styles(){
  wp_enqueue_style(rd-recursos-style, get_stylesheet_directory_uri() . /css/rd-recursos.css, array(), 1.0.0)
}
add_action(wp_enqueue_scripts, rd_enqueue_styles)

Accesibilidad y buenas prácticas

• Siempre añadir atributo alt a las imágenes y miniaturas.
• Usar texto legible en los botones de descarga (no solo iconos).
• Proporcionar atributos ARIA cuando el enlace no sea obvio: aria-label para describir la acción exacta.
• Verificar que el enlace de descarga tenga rel=noopener noreferrer si abre en nueva pestaña (opcional).
• Comprobar el tamaño real del archivo y mostrarlo para que el usuario pueda decidir si descargarlo en móvil.

Variantes y personalizaciones

1. Lista en lugar de grid: cambiar .resources-grid a display: block y ajustar .resource-card para que sean filas horizontales con miniatura a la izquierda y texto a la derecha.
2. Filtrado por categorías: usar taxonomías personalizadas o metadatos y añadir filtros JS para mostrar/ocultar tarjetas sin recargar la página.
3. Añadir paginación o carga perezosa (lazy load): para grandes catálogos, usar AJAX para cargar más elementos cuando el usuario llegue al final.
4. Uso de ACF (Advanced Custom Fields): para asociar una descripción específica o miniatura personalizada a cada recurso si no quieres usar la información del attachment.

Optimización y rendimiento

• Servir miniaturas optimizadas (tamaños adecuados) y usar lazy-loading en imágenes: ltimg loading=lazygt dentro de la miniatura.
• Minimizar y combinar CSS solo si es posible encolar correctamente para evitar render-blocking.
• Si los archivos están en un CDN, usar esas URLs directas para reducir carga del servidor.

Resumen y despliegue

Con el marcado semántico y el CSS propuesto tendrás un layout profesional, responsive y accesible para mostrar recursos descargables en WordPress. Integra el PHP como shortcode para poder insertar la rejilla en cualquier página o plantilla, encola el CSS desde functions.php y sigue las recomendaciones de accesibilidad y rendimiento antes de publicar.