Tutorial WordPress: Crear una sección de logos con escala en hover (transform)

Introducción

Este tutorial explica paso a paso cómo crear en WordPress una sección de logos que escala mediante transform en hover. El objetivo es obtener un resultado moderno, accesible y responsivo que puedas insertar en cualquier plantilla o mediante un shortcode. Se incluyen ejemplos de marcado HTML, CSS para la animación y snippets de PHP para integrarlo en functions.php.

Requisitos

Tema hijo o acceso para editar functions.php y hojas de estilo del tema.
Imágenes de los logos (recomendado: SVG o PNG optimizados).
Conocimientos básicos de CSS y WordPress (shortcodes o plantillas).

Estructura HTML recomendada

Usar una lista semántica mejora accesibilidad. Cada logo se envuelve en un enlace para que sea navegable y accesible desde teclado.

CSS: Grid responsivo, escala en hover y accesibilidad

Este bloque CSS crea un grid responsivo, añade la transición para la escala y contempla preferencias de movimiento reducido.

/ Contenedor y lista /
.logos-grid {
  width: 100%
  padding: 2rem 1rem
  box-sizing: border-box
}

.logos-list {
  list-style: none
  margin: 0
  padding: 0
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
  gap: 1.25rem
  align-items: center
  justify-items: center
}

/ Elemento individual /
.logo-item {
  display: flex
  align-items: center
  justify-content: center
}

/ Enlace que actúa como foco interactivo /
.logo-item a {
  display: inline-flex
  align-items: center
  justify-content: center
  padding: 0.5rem
  border-radius: 8px
  transition: transform 250ms cubic-bezier(.2,.8,.2,1), box-shadow 250ms
  will-change: transform
  text-decoration: none
}

/ Imagen del logo: limitar tamaño para mantener proporción /
.logo-img {
  max-width: 100%
  height: auto
  display: block
  width: 140px / Ajustar según diseño /
}

/ Hover y foco: escala suave /
.logo-item a:hover,
.logo-item a:focus {
  transform: scale(1.06)
  box-shadow: 0 8px 20px rgba(0,0,0,0.08)
  outline: none
}

/ Estilo visible en foco para accesibilidad (teclado) /
.logo-item a:focus-visible {
  box-shadow: 0 0 0 3px rgba(21,156,228,0.25)
  border-radius: 8px
}

/ Preferencias de movimiento reducido /
@media (prefers-reduced-motion: reduce) {
  .logo-item a,
  .logo-item a:hover,
  .logo-item a:focus {
    transition: none
    transform: none
    box-shadow: none
  }
}

/ Ajustes para pantallas pequeñas /
@media (max-width: 480px) {
  .logo-img {
    width: 100px
  }
}

Alternativa CSS: escala con transformación 3D sutil

Para dar sensación de profundidad se puede añadir perspective y translateZ. Usar con moderación y probar en móviles.

/ Contenedor padre con perspectiva /
.logos-list {
  perspective: 1000px
}

.logo-item a:hover,
.logo-item a:focus {
  transform: translateZ(6px) scale(1.04)
}

Insertar el CSS en WordPress (enqueue)

Añadir el CSS a tu tema hijo es lo más recomendable. Este snippet encola un archivo CSS específico desde tu tema hijo.

/ functions.php del tema hijo /
function tema_hijo_enqueue_logos_styles() {
  wp_enqueue_style(
    logos-section,
    get_stylesheet_directory_uri() . /css/logos-section.css,
    array(),
    filemtime( get_stylesheet_directory() . /css/logos-section.css )
  )
}
add_action( wp_enqueue_scripts, tema_hijo_enqueue_logos_styles )

Shortcode para insertar la sección desde el editor

Un shortcode permite colocar la sección en páginas o entradas sin tocar plantillas. El ejemplo siguiente genera la lista a partir de un array de logos en un caso real puedes cargar datos desde opciones, campos repetidores (ACF) o el personalizador.

/ functions.php: shortcode básico de logos /
function shortcode_logos_section( atts = array() ) {
  logos = array(
    array( url => https://cliente1.example, src => https://example.com/logo1.svg, alt => Cliente 1 ),
    array( url => https://cliente2.example, src => https://example.com/logo2.png, alt => Cliente 2 ),
    // Añadir más elementos según necesites
  )

  html  = 

  foreach ( logos as logo ) {
    url = esc_url( logo[url] )
    src = esc_url( logo[src] )
    alt = esc_attr( logo[alt] )
    html .= 
  }

  html .= 

  return html
}
add_shortcode( logos_section, shortcode_logos_section )

Uso del shortcode

Dentro del editor de bloques o clásico, añadir:

[logos_section]

Mejoras y buenas prácticas

Usar SVG siempre que sea posible para logos: son escalables y ligeros. Si usas PNG, optimízalos y proporciona versiones retina si es necesario.
Lazy loading: añadir loading=lazy en imágenes para mejorar el rendimiento.
Optimización de assets: combinar y minimizar CSS si el proyecto lo permite.
Control de tamaño: define un ancho máximo razonable para las imágenes para evitar saltos de contenido.
Accesibilidad: utiliza atributos alt descriptivos y aria-label en enlaces cuando el texto no sea visible.
Prefers-reduced-motion: respetar la preferencia del usuario y desactivar animaciones si se solicita.

Integración con Gutenberg (opcional)

Si prefieres un bloque personalizado, crea un bloque dinámico que renderice la misma estructura. El CSS y el HTML aquí mostrados pueden usarse en la salida renderizada por el bloque. Otra opción más sencilla es crear un bloque reutilizable que incluya el shortcode.

Consejos de rendimiento y pruebas

Probar en diferentes dispositivos y navegadores para comprobar la suavidad de la escala y la legibilidad de los logos.
Comprobar Lighthouse para ver impacto en rendimiento y accesibilidad.
Si notas jank en móviles, reducir el valor de will-change o la intensidad del box-shadow.

Variantes de diseño

Escala mayor o menor ajustando el valor en transform: scale(1.06) → scale(1.12) o similar.
Animar filtro (saturación o brillo) para un efecto visual distinto: filter: saturate(1.15) o brightness(1.05).
Usar fondo y borde en el enlace para destacar el logo al entrar en hover.

Resumen final

Con una estructura HTML semántica, un CSS simple que use transform y transition, y un pequeño snippet PHP para integrarlo en WordPress, se puede crear una sección de logos elegante, accesible y responsiva. Ajusta tamaños, tiempos y sombras según tu identidad visual y siempre prueba en dispositivos reales. El resultado será una sección de logos con escala en hover que mejora la estética sin sacrificar rendimiento ni accesibilidad.

SushiHost