Introducción

Este tutorial explica paso a paso cómo crear cabeceras (headers) en WordPress con imágenes recortadas en forma de círculo utilizando CSS clip-path. Incluye ejemplos listos para usar, variantes responsivas, soluciones para el editor de bloques y un par de alternativas/fallbacks para compatibilidad. Los fragmentos de código van dentro de bloques pre preparados para EnlighterJS, listos para pegar en tu tema hijo o en la sección de CSS adicional.

Qué hace clip-path y por qué usar un círculo

clip-path permite recortar la visualización de un elemento (imagen, bloque, contenedor) usando formas geométricas o rutas SVG. La forma circle() es ideal para diseñar cabeceras con efecto circular parcial o central, dar protagonismo a un rostro o logo, y crear composiciones modernas sin depender de imágenes ya recortadas.

Nivel de soporte y consideraciones

clip-path está bien soportado en navegadores modernos, pero conviene incluir el prefijo -webkit-clip-path para compatibilidad con ciertas versiones de Safari. Para navegadores muy antiguos o cuando se necesita una solución más robusta, se pueden aplicar fallbacks con border-radius (para elementos con background) o un SVG clipPath.

Característica	Recomendación
Compatibilidad	Usar -webkit-clip-path además de clip-path probar en Safari y Chrome móvil.
Accesibilidad	Mantener atributo alt en imágenes, asegurar contraste si hay superposición de texto.
Responsive	Controlar tamaño con aspect-ratio o contenedores fluidos usar object-fit: cover.

Resumen del flujo de trabajo

1. Elegir o preparar la imagen (alto contraste, tamaño y posición adecuados).
2. Agregar el markup HTML en tu tema o en un bloque de Gutenberg.
3. Añadir el CSS con clip-path y propiedades responsivas.
4. Probar en distintos tamaños y ajustar la posición del círculo.
5. Agregar fallbacks (border-radius o SVG) si es necesario.

Ejemplo básico: HTML de la cabecera (plantilla)

CSS mínimo para recortar la imagen en círculo

.header-image{
  width: 100%
  height: 300px               / ajustar o usar aspect-ratio /
  object-fit: cover           / cubrir recorte sin distorsión /
  display: block
  -webkit-clip-path: circle(50% at 50% 50%) / soporte Safari /
  clip-path: circle(50% at 50% 50%)
}

Hacerlo responsivo y controlar posición/ tamaño del círculo

Es habitual querer que la cabecera ocupe una franja proporcional. Usar aspect-ratio o un contenedor con altura dinámica y object-fit mantiene la imagen proporcional y el recorte estable.

/ Contenedor que define proporción /
.site-header{
  width: 100%
  max-width: 1400px
  margin: 0 auto
  aspect-ratio: 16/6    / controla la altura relativa /
  overflow: hidden
  position: relative
}

/ Variables CSS para ajustar rápidamente /
:root{
  --circle-size: 40%
  --circle-x: 10%
  --circle-y: 50%
}

/ Imagen recortada usando variables /
.header-image{
  width:100%
  height:100%
  object-fit:cover
  -webkit-clip-path: circle(var(--circle-size) at var(--circle-x) var(--circle-y))
  clip-path: circle(var(--circle-size) at var(--circle-x) var(--circle-y))
  transition: clip-path .3s ease
}

Ejemplo: ajustar el foco del círculo

Modificando las variables –circle-x y –circle-y puedes mover el centro del círculo sobre el área importante de la imagen.

/ En pantallas pequeñas hacer el círculo más grande y centrado /
@media (max-width: 768px){
  :root{
    --circle-size: 50%
    --circle-x: 50%
    --circle-y: 40%
  }
}

Integración en WordPress — método 1: editar header.php en un child theme

Recomiendo usar un child theme para no perder cambios en actualizaciones. Copia header.php a tu child theme y adapta la parte correspondiente de la siguiente forma:

  
     alt= loading=lazy>
  

Luego añade el CSS anterior en el archivo custom CSS de tu child theme (por ejemplo css/custom-header.css) o en el Personalizador > CSS adicional.

Encolar CSS desde functions.php (child theme)

Método alternativo: usar bloque HTML en Gutenberg

Si no quieres tocar archivos de tema, añade un bloque HTML personalizado con el markup y pega el CSS en Personalizar → CSS adicional o usa el bloque CSS personalizado de tu plugin de cabecera.

Fallbacks y alternativa SVG (compatibilidad mejorada)

Para navegadores que no soporten clip-path correctamente, se puede usar un SVG clipPath embebido y referenciarlo con clip-path: url(#id) o aplicar un border-radius: 50% cuando el elemento sea un contenedor con background-image.

.svg-clip .header-image{
  -webkit-clip-path: url(#clipCircle)
  clip-path: url(#clipCircle)
  width:100%
  height:auto
}

Toques visuales avanzados

• Añadir borde blanco o sombra para separar la imagen del fondo:

  .header-image{
    box-shadow: 0 12px 30px rgba(0,0,0,.35)
    border: 6px solid #fff
  }
      

• Superponer degradado para mejorar legibilidad del texto:

  .site-header::after{
    content: 
    position: absolute
    inset: 0
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%)
    pointer-events: none
  }
      

• Animar el recorte al hacer hover:

  .site-header:hover .header-image{
    -webkit-clip-path: circle(45% at 40% 50%)
    clip-path: circle(45% at 40% 50%)
  }
      

Accesibilidad y SEO

• Asegurar siempre el atributo alt en la imagen con una descripción útil.
• Si la cabecera contiene texto sobre la imagen, comprobar contraste y legibilidad.
• Evitar recortar el contenedor de forma que partes importantes del contenido queden inaccesibles en pantallas pequeñas usar puntos focales controlables.
• Considerar usar picture y srcset para servir imágenes optimizadas según resolución y dispositivo.

Pruebas y depuración

• Usa las DevTools del navegador: inspecciona la regla clip-path y ajusta valores en vivo.
• Probar en Safari (incluyendo iOS) y en Chrome/Firefox para comprobar el prefijo -webkit-clip-path.
• Si no ves el recorte, confirma que no haya overflow: visible en un padre que impida el recorte o que la imagen no esté en un contexto que sobrescriba transformaciones.

Conclusión

Usar CSS clip-path para crear cabeceras con imágenes recortadas en círculo aporta un aspecto moderno y flexible. Con unas pocas reglas CSS y control sobre la posición y el tamaño (variables CSS y media queries), se puede obtener un resultado responsivo y accesible. Implementa los ejemplos en un child theme o mediante bloques y añade fallbacks SVG o border-radius si te preocupa la compatibilidad.