Introducción

Este artículo explica, paso a paso y con todo lujo de detalles, cómo diseñar y construir tarjetas (cards) de plugin para WordPress que muestren la versión y la compatibilidad (con WordPress y PHP) usando CSS. Incluye la estructura HTML recomendada, ejemplos de CSS para estilo y responsividad, y snippets PHP para generar las tarjetas dinámicamente tanto desde el entorno local (plugins instalados) como desde la API de wordpress.org. Los ejemplos de código aparecen en bloques preparados para EnlighterJS con el language apropiado.

Estructura de la tarjeta (markup)

La estructura base debe ser semántica y accesible. A continuación un ejemplo de la estructura HTML de cada tarjeta:

ltarticle class=wp-plugin-card role=article aria-labelledby=plugin-title-my-plugingt
  ltdiv class=card-mediagt
    ltimg src=ruta/a/logo.png alt=Logo del plugin My Plugin class=plugin-logogt
  lt/divgt
  ltdiv class=card-bodygt
    lth3 id=plugin-title-my-plugin class=plugin-titlegtMy Pluginlt/h3gt
    ltp class=plugin-descgtDescripción breve del plugin que indique su propósito y puntos fuertes.lt/pgt
    ltdiv class=plugin-metagt
      ltspan class=badge version data-version=1.2.3gtv1.2.3lt/spangt
      ltspan class=badge wp-compat data-wp=6.2gtWP 6.2 lt/spangt
      ltspan class=badge php-compat data-php=7.4gtPHP 7.4 lt/spangt
    lt/divgt
    ltdiv class=card-actionsgt
      lta href=https://example.com class=btn btn-primary title=Más información sobre My PlugingtMás informaciónlt/agt
    lt/divgt
  lt/divgt
lt/articlegt

Elementos clave

• card-media: logo o imagen representativa.
• card-body: título, descripción corta y metadatos.
• badge version / wp-compat / php-compat: visualización de versión y compatibilidades.
• Accesibilidad: atributos aria y texto alternativo en imágenes.

CSS sugerido para diseño y badges

El siguiente CSS garantiza apariencia moderna, soporte para badges, prioridad a la legibilidad y buena adaptación a móviles.

/ Contenedor principal /
.wp-plugin-card{
  display: grid
  grid-template-columns: 84px 1fr
  gap: 16px
  align-items: start
  padding: 16px
  border-radius: 8px
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%)
  box-shadow: 0 2px 8px rgba(16,24,40,0.06)
  border: 1px solid rgba(16,24,40,0.04)
  transition: transform .12s ease, box-shadow .12s ease
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Efecto hover /
.wp-plugin-card:hover{
  transform: translateY(-4px)
  box-shadow: 0 8px 30px rgba(16,24,40,0.08)
}

/ Imagen/logo /
.plugin-logo{
  width: 84px
  height: 84px
  object-fit: cover
  border-radius: 6px
  border: 1px solid rgba(0,0,0,0.03)
}

/ Título y descripción /
.plugin-title{
  margin: 0 0 6px 0
  font-size: 1.05rem
  line-height: 1.2
  color: #0f1724
}
.plugin-desc{
  margin: 0 0 12px 0
  color: #475569
  font-size: 0.95rem
}

/ Badges /
.plugin-meta{
  display: flex
  gap: 8px
  flex-wrap: wrap
  margin-bottom: 12px
}
.badge{
  display: inline-flex
  align-items: center
  gap: 6px
  padding: 6px 8px
  border-radius: 999px
  font-size: 0.78rem
  color: #0f1724
  background: rgba(15,23,36,0.05)
  border: 1px solid rgba(15,23,36,0.03)
}

/ Badges diferenciados /
.badge.version{ background: linear-gradient(90deg,#eef2ff,#f0f9ff) border-color: rgba(99,102,241,0.12) }
.badge.wp-compat{ background: linear-gradient(90deg,#ecfdf5,#f0fdf4) border-color: rgba(34,197,94,0.08) }
.badge.php-compat{ background: linear-gradient(90deg,#fff7ed,#fffbeb) border-color: rgba(249,115,22,0.08) }

/ Botones/acciones /
.btn{
  display: inline-block
  text-decoration: none
  padding: 8px 12px
  border-radius: 6px
  font-weight: 600
  font-size: 0.95rem
  color: #fff
}
.btn-primary{
  background: linear-gradient(90deg,#3b82f6,#06b6d4)
  border: 1px solid rgba(8,145,178,0.06)
}

/ Responsive: apilar en pantallas pequeñas /
@media (max-width: 520px){
  .wp-plugin-card{
    grid-template-columns: 1fr
    gap: 12px
  }
  .plugin-logo{
    width: 64px
    height: 64px
  }
}

Uso de data-attributes para estilos condicionados

Si quieres mostrar el texto de la versión solo con CSS (por ejemplo en un pequeño distintivo decorativo), puedes usar pseudo-elementos y el atributo data-version:

.badge.version::after{
  content: attr(data-version)
  margin-left: 4px
  font-weight: 700
}

Generar tarjetas dinámicamente desde WordPress (PHP)

Para mostrar tarjetas con datos reales conviene extraer la información del plugin ya instalado o consultar la API de wordpress.org. Este snippet muestra cómo generar tarjetas para todos los plugins instalados (ejemplo para uso en admin o shortcode):

lt?php
// Asegúrate de incluir las funciones de plugin si no estás en wp-admin
if ( ! function_exists( get_plugins ) ) {
    require_once ABSPATH . wp-admin/includes/plugin.php
}

all_plugins = get_plugins()

foreach ( all_plugins as plugin_file => plugin_data ) {
    // Datos básicos
    name        = isset(plugin_data[Name]) ? plugin_data[Name] : Sin nombre
    version     = isset(plugin_data[Version]) ? plugin_data[Version] : n/a
    description = isset(plugin_data[Description]) ? plugin_data[Description] : 
    author      = isset(plugin_data[Author]) ? plugin_data[Author] : 
    // Información de compatibilidad: algunos plugins no incluyen estos campos localmente
    tested_up_to = isset(plugin_data[Tested up to]) ? plugin_data[Tested up to] : 
    requires_at_least = isset(plugin_data[Requires at least]) ? plugin_data[Requires at least] : 

    // Escapado seguro al imprimir
    safe_name = esc_html( name )
    safe_desc = esc_html( wp_trim_words( description, 18, ... ) )
    safe_version = esc_attr( version )
    safe_wp = esc_attr( tested_up_to ? tested_up_to : desconocido )
    safe_php = esc_attr( ini_get(display_errors) ? phpversion() : phpversion() ) // ejemplo de fallback

    echo ltarticle class=wp-plugin-cardgt
      echo ltdiv class=card-mediagt
        // Aquí podrías añadir la lógica para una imagen real
        echo ltimg src= . esc_url(plugins_url(assets/logo.png, plugin_file)) .  alt=Logo  . safe_name .  class=plugin-logogt
      echo lt/divgt
      echo ltdiv class=card-bodygt
        echo lth3 class=plugin-titlegt . safe_name . lt/h3gt
        echo ltp class=plugin-descgt . safe_desc . lt/pgt
        echo ltdiv class=plugin-metagt
          echo ltspan class=badge version data-version= . safe_version . gtv . safe_version . lt/spangt
          echo ltspan class=badge wp-compat data-wp= . safe_wp . gtWP  . safe_wp . lt/spangt
          echo ltspan class=badge php-compat data-php= . safe_php . gtPHP  . safe_php . lt/spangt
        echo lt/divgt
      echo lt/divgt
    echo lt/articlegt
}
?gt

Notas sobre seguridad y rendimiento

• Siempre usa funciones de escapado (esc_html, esc_attr, esc_url) antes de imprimir datos.
• No asumas que campos como Tested up to existen para plugins locales maneja valores por defecto.
• Para muchas tarjetas, añade paginación o lazy loading de imágenes para evitar impacto de rendimiento.

Obtener versión y compatibilidad desde wordpress.org (API)

Si deseas comparar la versión instalada con la versión más reciente en el repositorio oficial, usa la API de wordpress.org. Ejemplo con caching mediante transients:

lt?php
function wporg_plugin_info( slug ) {
    cache_key = wporg_plugin_ . sanitize_key( slug )
    info = get_transient( cache_key )
    if ( false !== info ) {
        return info
    }

    request = wp_remote_get( https://api.wordpress.org/plugins/info/1.0/ . rawurlencode( slug ) . .json )
    if ( is_wp_error( request ) ) {
        return false
    }

    body = wp_remote_retrieve_body( request )
    if ( empty( body ) ) {
        return false
    }

    data = json_decode( body, true )
    if ( empty( data ) ) {
        return false
    }

    // Guardar en caché 12 horas
    set_transient( cache_key, data, 12  HOUR_IN_SECONDS )
    return data
}

// Uso
slug = akismet // ejemplo
plugin_info = wporg_plugin_info( slug )
if ( plugin_info ) {
    latest_version = isset( plugin_info[version] ) ? plugin_info[version] : 
    requires_wp = isset( plugin_info[requires] ) ? plugin_info[requires] : 
    tested_up_to = isset( plugin_info[tested] ) ? plugin_info[tested] : 
    // mostrar en la tarjeta comparativa
}
?gt

Compatibilidad visual: colores y estados

Una buena práctica visual es codificar por color los estados de compatibilidad:

• Verde: compatible o probado (por ejemplo, tested_up_to mayor o igual a la versión actual de WP).
• Naranja: parcialmente compatible o requiere atención (requiere WP mayor que la actual).
• Rojo: incompatible o sin soporte conocido.

Esto se implementa añadiendo clases condicionales desde PHP como is-compatible, maybe-compatible, incompatible y aplicando estilos CSS correspondientes.

Accesibilidad (a11y) y buenas prácticas

• Usar etiquetas semánticas (ltarticlegt, lth3gt). Proveer atributos aria donde tenga sentido.
• Proporcionar contrastes de color adecuados en los badges y botones (contraste mínimo 4.5:1 para texto normal).
• Permitir navegación con teclado: enlaces y botones deben ser focusables y mostrar foco visible.
• Añadir textos alternativos descriptivos en imágenes para usuarios de lectores de pantalla.

Mejoras y extensiones

1. Integrar un sistema de filtrado (por compatibilidad, por versión, por autor) con controles accesibles.
2. Mostrar comparativas entre versión instalada y versión en wordpress.org, con un CTA para actualizar.
3. Agregar microdatos (schema.org) si quieres potenciar resultados enriquecidos por ejemplo SoftwareApplication adaptado a plugins.
4. Usar SVGs para logos y badgets, optimizados para retina.

Resumen final

Con una estructura semántica, CSS modular y PHP seguro puedes generar tarjetas de plugin atractivas y útiles que muestren versión y compatibilidad de manera clara. Empieza por una estructura HTML limpia, aplica el CSS propuesto para estética y responsividad, y enlaza los datos dinámicos mediante get_plugins() y/o la API de wordpress.org con caching. Esto le da a los usuarios y administradores información inmediata sobre la salud y compatibilidad de sus plugins.