Cuando instala un tema nuevo en WordPress, el slider casi nunca se ajusta a las dimensiones de su contenido. Usted tiene capturas de pantalla 16:9, portadas de productos, imágenes cuadradas, y el tema las recorta a sus propias proporciones. La mitad del encuadre se pierde y la vitrina principal de su sitio parece armada con los ojos cerrados.

Pero esto no es un error del tema. Son configuraciones fijas que residen en tres lugares: el registro del tamaño de miniaturas en functions.php, el contenedor CSS del slider y las plantillas de salida. La cuarta capa es regenerar las imágenes ya subidas al nuevo tamaño. Corrija las cuatro y el slider se alinea perfectamente.

A continuación, un desglose paso a paso usando el tema Classy de WPExplorer como ejemplo. Pero la lógica es universal: cualquier tema clásico con un slider Nivo o un slider personalizado que use add_image_size edita los mismos archivos.

💡 Resumen rápido:

• Cambie add_image_size en functions.php, esto controla el recorte al subir la imagen
• Edite width y height del contenedor en style.css para que la maquetación no se colapse
• Actualice los atributos width y height en las plantillas nivo.php y content.php para que el navegador no estire la img
• Ejecute Regenerate Thumbnails en su biblioteca de medios, las imágenes antiguas se recrean al nuevo tamaño

El proceso completo se muestra en este video:

Paso 1. Cambiar el tamaño de la miniatura en functions.php

Cuando WordPress sube una imagen, la procesa en todos los tamaños registrados. El registro se hace mediante la función add_image_size. El tema declara un slider de 980×400, pero usted necesita 1200×500, así que debe editar aquí.

Abra el functions.php del tema. Ruta: Apariencia → Editor de archivos del tema en el panel de administración, o por FTP en /wp-content/themes/theme-name/. En Classy, la línea add_image_size para el slider está alrededor de la línea 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

El primer parámetro es el ancho, el segundo el alto, el tercero (true) es el recorte duro. Si establece false, WordPress ajustará la imagen por el lado menor sin recortar. Suena tentador, pero el slider puede «flotar» en altura de una imagen a otra.

Sustituya sus valores y guarde:

1
add_image_size( 'nivo-slider', 1200, 500, true );

A partir de este momento, todas las nuevas subidas se recortan a su tamaño. Las antiguas todavía no, las abordaremos en el paso 4.

Paso 2. Corregir el contenedor CSS

Usted cambió el tamaño de la miniatura. Pero el contenedor del slider en la maquetación aún vive con los valores antiguos del CSS. La imagen carga correctamente, pero el bloque la recorta o deja espacio vacío alrededor.

En Classy, el contenedor del slider Nivo se describe en style.css, líneas 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Cambie width y height a sus valores:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Matiz importante: esto edita específicamente el slider Nivo. El Content Slider en Classy ajusta la altura automáticamente según el contenido, no necesita tocarlo. En otros temas la lógica es la misma: encuentre el selector del slider específico que está cambiando y no altere los vecinos.

Paso 3. Actualizar atributos en las plantillas

add_image_size devuelve la URL de la miniatura correcta. Pero el marcado HTML del slider contiene width="980" height="400" fijos. Deje los valores antiguos y el navegador estirará o comprimirá la imagen para igualarlos. Resultado: imagen borrosa o aplastada, aunque la fuente sea correcta.

En Classy, hay que editar dos archivos.

Nivo Image Slider, archivo includes/sliders/nivo.php, líneas 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider para diapositivas de imagen, archivo includes/sliders/content.php, líneas 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Edite ambos, guarde. Si el tema usa background-image en CSS en lugar de <img>, no toque las plantillas, el paso 2 es suficiente.

Paso 4. Regenerar imágenes antiguas

En el paso 1 cambiamos add_image_size. Las nuevas subidas van con el recorte correcto. Pero todas las imágenes en la biblioteca de medios subidas antes de la edición están almacenadas en el tamaño antiguo. El slider las mira y obtiene las proporciones equivocadas.

Solución: el plugin Regenerate Thumbnails. Recorre toda la biblioteca de medios y recrea las miniaturas con los tamaños registrados actuales. Instalación estándar: Plugins → Añadir nuevo → buscar «Regenerate Thumbnails» → Instalar → Activar.

Tras la activación: Herramientas → Regenerate Thumbnails → «Regenerate All Thumbnails». Para una biblioteca grande, el proceso tarda un par de minutos, el plugin dispara la regeneración de todos los tamaños declarados en cada imagen.

El plugin también puede eliminar tamaños de miniatura no utilizados, liberando espacio en el servidor. Después de ejecutarlo una vez, ya no lo necesitará más: todas las subidas futuras pasarán por el nuevo valor de add_image_size.

Si tiene acceso por consola al servidor, WP-CLI es más rápido:

1
wp media regenerate --yes

Sin la sobrecarga de las peticiones HTTP y no encuentra tiempos de espera agotados en bibliotecas grandes.

Qué hacer si el slider aún falla

A veces completó los cuatro pasos, pero el slider se comporta de forma extraña. Repase esta lista de verificación:

• Especificidad CSS: su nuevo width/height está siendo anulado por un selector más específico en el tema. Abra el inspector del navegador y vea qué regla se está aplicando realmente al elemento.
• Caché: limpie la caché del navegador (Ctrl+F5). Si tiene un plugin de caché de servidor como WP Rocket o LiteSpeed Cache, límpiela también.
• Tema hijo: editar el tema padre directamente significa que los cambios se borran en la próxima actualización. Cree un tema hijo y mueva allí sus ediciones.
• Responsive: ¿el ancho del contenedor es mayor que el ancho del sitio? En móvil, el slider se desborda por el borde. Añada max-width: 100% y height: auto en una media query para móvil.

La actualización del tema rompió todo: cómo protegerse

El principal dolor de editar el tema padre: las actualizaciones sobrescriben archivos y sus cambios desaparecen. El slider vuelve silenciosamente a la configuración de fábrica.

El enfoque correcto es un tema hijo. Mueva tres cosas allí:

• Sobrescriba add_image_size en el functions.php del tema hijo mediante el hook after_setup_theme;
• Sobrescriba el CSS, el style.css del hijo carga después del padre, sus reglas ganan por cascada;
• Plantillas del slider, copie nivo.php y content.php dentro del tema hijo con la misma estructura de carpetas (includes/sliders/). WordPress recoge automáticamente la versión del hijo.

Después de esto, las actualizaciones del tema padre no representan ninguna amenaza para sus tamaños.

⁉️🤔 Preguntas frecuentes

¿Tengo que editar los tres archivos: functions.php, style.css y las plantillas?

Sí, de lo contrario el resultado será incompleto. Cambió solo add_image_size sin el CSS y el contenedor recorta la nueva imagen. Sin las plantillas, el navegador estira la imagen al width/height antiguo y se vuelve borrosa. Tres ediciones dan un dimensionado consistente en todas las capas: registro de miniatura → contenedor → atributos HTML.

¿Necesito tocar content.php si solo uso el slider Nivo?

No. content.php es para el content slider, el que extrae texto e imágenes de las entradas. Si el content slider no se usa en el sitio, puede omitir el archivo. Pero ante la duda, la edición lleva un minuto, mejor hacer ambas.

¿El plugin Regenerate Thumbnails borrará mis originales?

No. La imagen original a tamaño completo permanece intacta. El plugin solo recrea las miniaturas: los tamaños registrados mediante add_image_size y Ajustes → Medios. La opción de eliminar tamaños no usados tampoco toca el original, limpia miniaturas «huérfanas» no declaradas en el tema o plugins.

¿Qué pasa si add_image_size no está en el tema y el slider funciona de otra manera?

Algunos temas modernos no usan add_image_size para el slider. En su lugar, cargan la imagen original y controlan el tamaño mediante CSS: object-fit: cover o background-size: cover. En este caso, el paso 2 es suficiente, edite solo el contenedor CSS. Compruebe en el inspector del navegador qué URL está cargando realmente en el slider: si es image.jpg sin un sufijo -980x400, no necesita los pasos 1 y 4.

¿Necesito una copia de seguridad antes de editar functions.php?

Absolutamente. Un error tipográfico en functions.php y el sitio colapsa en una Pantalla Blanca de la Muerte. Antes de editar, descargue el archivo por FTP o copie el contenido a un editor de texto. Si el sitio falla, suba el functions.php original de vuelta, el sitio revive al instante.

Slider personalizado: desglose final

El algoritmo es universal para cualquier tema de WordPress clásico: registro de tamaño → contenedor CSS → plantillas HTML → regenerar imágenes antiguas. Cuatro pasos y el slider funciona en sus proporciones sin recortes ni borrosidad.

Lo principal es no editar el tema padre directamente. Mueva los cambios a un tema hijo justo después de confirmar que los tamaños encajan. Así ninguna actualización hará que el slider vuelva a la configuración de fábrica.