Tutorial WordPress: Convertir listas de plugins recomendados en tarjetas con CSS

Convertir listas de plugins recomendados en tarjetas con CSS — Tutorial detallado

Este tutorial explica paso a paso cómo transformar una lista tradicional de plugins recomendados (por ejemplo, una lista ul/li que muestra el nombre, descripción y enlaces de cada plugin) en un diseño de tarjetas visualmente atractivo y accesible usando solo HTML semántico y CSS. Incluye ejemplos de marcado, estilos CSS, generación dinámica desde PHP (útil en temas o funciones de administración) y recomendaciones de accesibilidad y rendimiento.

Objetivo y casos de uso

Convertir listas de plugins recomendados en tarjetas mejora la legibilidad, facilita la interacción (instalar/activar/leer más) y hace la presentación más acorde al estilo del panel de administración o página de recomendaciones del tema. Este enfoque es útil en:

Paneles de opciones de tema que recomiendan plugins
Páginas de onboarding para nuevos usuarios
Secciones de documentación dentro del administrador

Requisitos previos

Conocer cómo añadir CSS al tema (archivo style.css del tema hijo, o enqueue desde functions.php).
Capacidad para generar la lista desde PHP si se hace dinámicamente (ejemplos incluidos).
Permiso para añadir código al tema o plugin que gestiona la página donde se mostrarán las tarjetas.

Estructura HTML recomendada

Usaremos una lista ul con elementos li por cada plugin. Dentro de cada li colocaremos título, descripción y enlaces de acción. Esta estructura mantiene la semántica (es una lista) y permite aplicar estilos de tarjeta con CSS al li.

Ejemplo de marcado HTML (estático):


  
    Contact Form 7
    Formulario simple y flexible para tu web.
    
      Más info
      nbspnbsp
      Instalar
    
  
  
    Yoast SEO
    Optimización SEO para cada entrada y página.
    
      Más info
      nbspnbsp
      Instalar

CSS: transformar la lista en tarjetas

La idea es aplicar un grid o flexbox al ul y convertir cada li en una tarjeta con sombra, radio y espacio interno. A continuación se muestra un CSS completo y modular para lograrlo, incluyendo responsividad y estados hover/focus para accesibilidad.

/ Contenedor: grid responsivo /
ul.recommended-plugins {
  list-style: none
  margin: 0
  padding: 0
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))
  gap: 20px
  align-items: start
}

/ Cada tarjeta (li) /
ul.recommended-plugins li.plugin-card {
  background: #ffffff
  border-radius: 8px
  padding: 16px
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(16,24,40,0.04)
  border: 1px solid rgba(16,24,40,0.04)
  transition: transform 0.14s ease, box-shadow 0.14s ease
  display: flex
  flex-direction: column
  gap: 8px
  min-height: 120px
}

/ Efecto hover / focus para interacción con teclado /
ul.recommended-plugins li.plugin-card:focus-within,
ul.recommended-plugins li.plugin-card:hover {
  transform: translateY(-4px)
  box-shadow: 0 8px 24px rgba(16,24,40,0.12)
}

/ Título y descripción /
ul.recommended-plugins .plugin-title {
  margin: 0
  font-size: 1.05rem
  line-height: 1.2
}

ul.recommended-plugins .plugin-desc {
  margin: 0
  color: #475569
  font-size: 0.95rem
}

/ Acciones: enlaces /
ul.recommended-plugins .plugin-actions {
  margin-top: auto / empuja las acciones al final para alinear tarjetas /
  display: flex
  gap: 10px
  align-items: center
}

/ Estilo de enlaces /
ul.recommended-plugins a.plugin-link,
ul.recommended-plugins a.plugin-install {
  text-decoration: none
  color: #0366d6
  font-weight: 600
  padding: 6px 10px
  border-radius: 6px
}

/ Botón de instalar más destacado /
ul.recommended-plugins a.plugin-install {
  background: linear-gradient(90deg,#0ea5e9,#3b82f6)
  color: #fff
}

/ Enlaces al pasar el cursor y al recibir foco /
ul.recommended-plugins a.plugin-link:hover,
ul.recommended-plugins a.plugin-link:focus,
ul.recommended-plugins a.plugin-install:hover,
ul.recommended-plugins a.plugin-install:focus {
  opacity: 0.92
  outline: none
  box-shadow: 0 4px 12px rgba(59,130,246,0.12)
}

/ Alternativas para modo oscuro (opcional) /
@media (prefers-color-scheme: dark) {
  ul.recommended-plugins li.plugin-card {
    background: #0b1220
    border-color: rgba(255,255,255,0.06)
    color: #e6eef8
    box-shadow: 0 6px 20px rgba(0,0,0,0.6)
  }
  ul.recommended-plugins .plugin-desc {
    color: #b8c7dd
  }
}

/ Ajustes para móviles /
@media (max-width: 480px) {
  ul.recommended-plugins {
    gap: 12px
  }
  ul.recommended-plugins li.plugin-card {
    padding: 12px
  }
}

Generación dinámica en PHP (WordPress)

Si la lista viene de un array de plugins recomendados (por ejemplo definido en functions.php o generado por TGMPA), usa este fragmento para imprimir el ul/li con la estructura esperada. Ajusta los índices según tu fuente de datos.

 contact-form-7,
    name => Contact Form 7,
    desc => Formulario simple y flexible para tu web.,
    url  => https://es.wordpress.org/plugins/contact-form-7/,
  ),
  array(
    slug => wordpress-seo,
    name => Yoast SEO,
    desc => Optimización SEO para cada entrada y página.,
    url  => https://es.wordpress.org/plugins/wordpress-seo/,
  ),
)

// Imprime la lista
echo 
foreach ( recommended_plugins as plugin ) {
  // Escapar correctamente al imprimir datos dinámicos
  name = esc_html( plugin[name] )
  desc = esc_html( plugin[desc] )
  url  = esc_url( plugin[url] )

  echo 
  echo {name}
  echo {desc}
  echo 
  echo Más info
  // En un entorno real, reemplaza # por la URL de instalación o acción específica
  echo  nbspnbsp 
  echo Instalar
  echo 
  echo 
}
echo 
?>

Integrar la acción de instalar/activar (opcional)

Si quieres que el botón Instalar ejecute la instalación desde el panel, lo recomendable es gestionar la acción con AJAX y las capacidades de instalación de plugins de WordPress (wp_remote_get/wp_remote_post o las funciones del core que requieren permisos adecuados). No se recomienda ejecutar instalaciones sin verificar permisos ni nonce. A continuación se muestra una idea general del flujo (solo conceptual):

Al hacer clic en Instalar, enviar petición AJAX a admin-ajax.php con nonce y slug del plugin.
En el handler PHP validar nonce y current_user_can(install_plugins).
Usar las API del core para descargar e instalar el plugin de WordPress.org o usar WP_Filesystem según la necesidad.
Responder al frontend con éxito/fallo y actualizar la tarjeta (por ejemplo cambiar el texto a Activar o Instalado).

Accesibilidad y buenas prácticas

Asegura que los enlaces sean navegables por teclado y reciban foco visible (el CSS de ejemplo aplica foco con box-shadow).
Usa texto claro en los botones (Instalar, Más info, Activar) y atributos ARIA si implementas controles más complejos.
Escapa siempre las salidas cuando generes HTML desde PHP (ej.: esc_html, esc_url, esc_attr).
Respeta capacidades del usuario: solo mostrar botones de instalación si current_user_can(install_plugins).

Optimización y rendimiento

Minimiza y concatena el CSS cuando sea posible, o carga solo en la página donde se necesita con wp_enqueue_style.
Evita cargas de imágenes si no son necesarias si añades logos de plugins usa tamaños optimizados y lazy-loading para imágenes externas.
Si el listado es largo, considera paginación o carga bajo demanda (lazy load / infinite scroll) para mejorar tiempo de carga.

Variantes visuales y extensiones

Agregar icono: podrías usar una pequeña imagen de logo como fondo en cada tarjeta usando CSS background-image apuntando al icono del plugin.
Badge de estado: añadir un pequeño badge (Instalado/Activo/Recomendado) implementado con texto en el li o pseudo-elementos CSS.
Modo compacto: reducir padding y ocultar descripciones para vistas condensadas en paneles con poco espacio.

Ejemplo de uso de fondo para logo (CSS)

Si dispones de un URL al logo del plugin, puedes usar un selector que añada una zona de logo mediante padding y background. Aquí un patrón sencillo (se ancla al contenido del li con padding-left):

/ Suponiendo que cada li tiene data-logo con la URL (o aplicas una clase específica) /
ul.recommended-plugins li.plugin-card {
  padding-left: 76px / espacio para el logo /
  position: relative
}

/ Crear el bloque del logo con pseudo-elemento /
ul.recommended-plugins li.plugin-card::before {
  content: 
  position: absolute
  left: 16px
  top: 16px
  width: 48px
  height: 48px
  border-radius: 8px
  background-size: cover
  background-position: center
  background-repeat: no-repeat
  / background-image: url(/ruta/al/logo.png)  <- se asigna dinámicamente por cada li /
}

Para asignar el logo por plugin puedes imprimir un estilo inline (con prudencia) o añadir una clase específica por plugin que aplique el background-image. Siempre escapa las URLs al imprimirlas desde PHP.

Resumen

Convertir una lista de plugins recomendados en tarjetas se logra manteniendo semántica (lista ul/li) y aplicando estilos CSS modernos (grid, sombras, transiciones). Generar la lista dinámicamente desde PHP facilita mantenerla sincronizada con la lógica del tema o plugin. Prioriza accesibilidad, seguridad (escape y capacidades) y rendimiento al desplegar esta funcionalidad en tu sitio WordPress.

SushiHost