Tutorial WordPress: Crear una página de recursos con tarjetas de descarga y badges CSS

Introducción

Este tutorial muestra paso a paso cómo crear en WordPress una página de recursos profesional con tarjetas (cards) de descarga y badges en CSS. El objetivo es disponer de una página ordenada, responsiva y accesible donde cada recurso tenga su miniatura, descripción breve, badge (por ejemplo: «Nuevo», «Popular», tamaño del archivo), botón de descarga y posibilidad de llevar un contador de descargas.

Resumen de la solución

Registrar un Custom Post Type (CPT) llamado resource para gestionar los recursos desde el escritorio.
Crear campos personalizados para el archivo, badge, color del badge y descripción (puedes usar Advanced Custom Fields o metaboxes nativos).
Crear una plantilla de página (page template) o un shortcode que muestre un grid de tarjetas con la información del CPT.
Estilizar con CSS moderno: CSS Grid / Flexbox, sombras, transiciones y badges con colores variables.
Opcional: contar descargas con AJAX para registrar eventos y mostrar el número en la UI.

Requisitos previos

Acceso al tema (child theme recomendado) y a functions.php.
Opcional: plugin Advanced Custom Fields (ACF) para campos fáciles de crear.
Conocimientos básicos de PHP, WordPress Loop, CSS y JavaScript.

1. Registrar el Custom Post Type

Registra un CPT llamado resource. Inserta este código en functions.php de tu tema (child theme):

 Recursos,
        singular_name      => Recurso,
        menu_name          => Recursos,
        name_admin_bar     => Recurso,
    )
    args = array(
        labels             => labels,
        public             => true,
        has_archive        => false,
        show_in_menu       => true,
        supports           => array(title,editor,thumbnail,excerpt),
        rewrite            => array(slug => recurso),
    )
    register_post_type(resource, args)
}
add_action(init, mytheme_register_resource_cpt, 0)
?>

2. Campos personalizados recomendados

Campos útiles por recurso:

Archivo de descarga (file) — URL o attachment ID.
Badge — texto (ej. «Nuevo», «PDF», «2 MB»).
Color del badge — color HEX o clase predefinida.
Enlace externo — si el archivo está fuera de WP.
Contador de descargas — entero.

Con ACF crearás estos campos en la interfaz. Si prefieres hacerlo con código, puedes usar register_post_meta o metaboxes personalizados.

3. Encolar estilos y scripts

Encola los archivos CSS y JS desde functions.php para mantenerlo ordenado:

 admin_url(admin-ajax.php),
        nonce    => wp_create_nonce(myresources-nonce),
    ))
}
add_action(wp_enqueue_scripts, mytheme_resources_assets)
?>

4. Plantilla para la página de recursos

Puedes crear un archivo de plantilla de página llamado page-resources.php o un template part. El siguiente ejemplo hace una WP_Query para obtener recursos y renderizarlos en tarjetas. En el código asumimos que usas ACF y que el campo del archivo devuelve la URL.



  
     resource,
        posts_per_page => -1,
        orderby => date,
        order => DESC,
    )
    query = new WP_Query(args)
    if (query->have_posts()):
        while (query->have_posts()): query->the_post()
            // Campos ACF (ajusta nombres según tus campos)
            file_url = get_field(archivo_de_descarga) // URL
            badge_text = get_field(badge_texto)
            badge_color = get_field(badge_color) // ej. #ff6600 o clase
            file_size = get_field(file_size) // opcional
            download_count = get_field(download_count) ?: 0
            thumbnail = get_the_post_thumbnail_url(get_the_ID(), medium)
    ?>
      
         data-resource-id= target=_blank rel=noopener noreferrer>
          )>
          
            
            
          
        

        
          
            >
          

           data-resource-id= download>
            Descargar

5. CSS para tarjetas y badges

Guarda esto como css/resources.css. El ejemplo usa CSS Grid, sombras, transiciones y badges con color configurable.

/ resources.css /
.resources-grid {
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
  gap: 1.25rem
  margin: 2rem 0
}

/ Card /
.resource-card {
  background: #fff
  border-radius: 10px
  overflow: hidden
  box-shadow: 0 6px 18px rgba(16,24,40,0.08)
  display: flex
  flex-direction: column
  transition: transform .18s ease, box-shadow .18s ease
}
.resource-card:hover {
  transform: translateY(-6px)
  box-shadow: 0 12px 30px rgba(16,24,40,0.12)
}

/ Media area (thumbnail) /
.resource-media {
  width: 100%
  height: 140px
  background-size: cover
  background-position: center
}

/ Body /
.resource-body {
  padding: 1rem
  flex: 1
}
.resource-title {
  font-size: 1.05rem
  margin: 0 0 .35rem 0
}
.resource-excerpt {
  margin: 0
  color: #4b5563
  font-size: .95rem
}

/ Meta: badge, download button and count /
.resource-meta {
  display: flex
  align-items: center
  justify-content: space-between
  padding: .75rem 1rem
  gap: .5rem
  border-top: 1px solid #f1f5f9
}
.resource-badge {
  display: inline-block
  color: #fff
  font-weight: 600
  padding: .25rem .6rem
  border-radius: 999px
  font-size: .85rem
  box-shadow: 0 2px 6px rgba(0,0,0,0.06)
}

/ Download button /
.resource-download {
  background: linear-gradient(90deg,#0066ff,#0099ff)
  color: #fff
  padding: .45rem .85rem
  border-radius: 6px
  text-decoration: none
  font-weight: 600
  transition: opacity .12s ease
}
.resource-download:hover { opacity: .92 }

/ Count /
.resource-count {
  font-size: .85rem
  color: #64748b
}

/ Responsive tweak /
@media (max-width: 420px) {
  .resource-media { height: 110px }
}

6. Contador de descargas (opcional) – Backend AJAX

Si quieres incrementar un contador cada vez que un usuario hace clic en «Descargar», añade este handler a functions.php:

 count))
}
add_action(wp_ajax_myresources_increment, myresources_ajax_increment)
add_action(wp_ajax_nopriv_myresources_increment, myresources_ajax_increment)
?>

7. Contador de descargas (opcional) – JavaScript

En el archivo js/resources.js añade un listener para los botones de descarga. Este ejemplo usa fetch para comunicar con admin-ajax.php. Asegúrate de haber encolado el script y localizado el objeto MyResources con ajax_url y nonce.

document.addEventListener(DOMContentLoaded, function () {
  document.querySelectorAll(.resource-download).forEach(function(btn) {
    btn.addEventListener(click, function(e) {
      // Opcional: evitar que el enlace navegue inmediatamente si quieres forzar tracking primero
      var postId = this.getAttribute(data-resource-id)
      if (!postId) return

      // Fire  forget no evitar navegación
      fetch(MyResources.ajax_url, {
        method: POST,
        credentials: same-origin,
        headers: {
          Content-Type: application/x-www-form-urlencoded charset=UTF-8
        },
        body: new URLSearchParams({
          action: myresources_increment,
          post_id: postId,
          nonce: MyResources.nonce
        })
      }).then(function(res){ return res.json() })
        .then(function(data){
          if (data.success) {
            var parent = btn.closest(.resource-card)
            var countEl = parent.querySelector(.resource-count)
            if (countEl) countEl.textContent = data.data.count
          }
        }).catch(function(){ / Ignorar fallos / })
      // Deja que el comportamiento del enlace prosiga (descarga o navegación).
    })
  })
})

8. Buenas prácticas y consideraciones

Seguridad de archivos: Si distribuyes archivos privados, considera una ruta protegida o un controlador que valide permisos antes de servir el archivo. Para grandes descargas usa X-Sendfile o Signed URLs en CDN/S3.
Rendimiento: Usa imágenes optimizadas y lazy-loading. Si hay muchos recursos, añade paginación o carga diferida (infinite scroll).
SEO y accesibilidad: Usa títulos claros, descripciones, atributos alt en imágenes y botones con texto claro. El badge debe ser texto legible y contrastado.
Badge dinámico: Puedes generar badges según reglas (por ejemplo, si download_count gt 100 → «Popular», si la fecha de publicación lt 30 días → «Nuevo»).
Diseño coherente: Define una paleta de colores para badges y guarda clases utilitarias para no inlinear estilos color en cada recurso si quieres un mantenimiento más sencillo.

Tabla de clases CSS recomendadas

Clase	Uso
.resources-grid	Contenedor del grid
.resource-card	Tarjeta individual
.resource-media	Miniatura / área visual
.resource-badge	Badge de estado o tipo
.resource-download	Botón de descarga
.resource-count	Contador de descargas

Ejemplo práctico: badge dinámico según descargas

En la plantilla, añade una lógica simple para decidir el texto del badge en función del contador:

// Dentro del loop donde obtenemos download_count
if (download_count > 250) {
    badge_text = Muy popular
    badge_color = #d97706 // naranja fuerte
} elseif (download_count > 50) {
    badge_text = Popular
    badge_color = #10b981 // verde
} elseif (/ publicado recientemente /) {
    badge_text = Nuevo
    badge_color = #06b6d4 // cian
}

Checklist final antes de publicar

Probar descargas en diferentes navegadores y dispositivos.
Verificar tamaño y peso de imágenes (optimizar).
Comprobar accesibilidad: foco, navegación por teclado y contraste.
Revisar permisos de archivos y enlaces externos.
Comprobar que el contador funciona correctamente y no genera errores de seguridad.

Conclusión

Con los pasos anteriores podrás crear una página de recursos en WordPress con tarjetas elegantes y badges visuales que ayuden al usuario a identificar rápidamente el tipo o estado de cada recurso. La implementación puede ajustarse a tus necesidades: más campos meta, integración con sistemas de afiliación, descargas protegidas o exportación de estadísticas. El enfoque propuesto es modular: CPT para gestionar, plantilla para mostrar y CSS JS para la interacción.

SushiHost