Nota: Esta guía ha sido actualizada para Classy Version 1.10+
He recibido bastantes solicitudes que me preguntan cómo cambiar el tamaño de Nivo y los controles deslizantes de contenido en el tema Classy de WordPress, así que decidí hacer un tutorial aquí que le muestre todos los pasos necesarios para cambiar el tamaño de la imagen destacada, CSS y archivos de plantilla para que pueda definir su propio tamaño de control deslizante.
Paso 1: cambie el tamaño de la imagen destacada en Functions.php
Lo primero que querrá hacer es cambiar el tamaño de la imagen del control deslizante tal como se define en functions.php para que se recorte correctamente cuando se cargue en su biblioteca multimedia.
* Abra functions.php y cambie la línea 122
add_image_size( 'nivo-slider', [highlight]980[/highlight], [highlight]400[/highlight], true );
* El primer valor 980 es el ancho de la imagen del control deslizante y el 400 es la altura de la imagen del control deslizante. Cámbielos para que se adapten a sus necesidades.
Paso 2: edita tu CSS
Lo siguiente es editar su CSS para cambiar la altura del contenedor de su control deslizante.
Nota: Solo tiene que hacer esto para el «NivoSlider» porque el control deslizante de contenido cambiará la altura en función de su contenido automáticamente.
* Abra style.css y cambie el valor de altura entre las líneas 1132-1140
#slider_nivo { position: relative; [highlight]width: 980px;[/highlight] margin-top: -30px; margin-left: -25px; margin-right: -25px; margin-bottom: 30px; [highlight]height: 400px;[/highlight] overflow: hidden; }
Paso 3: Edite sus archivos de plantilla
El siguiente paso es editar sus archivos de plantilla para que el código coincida con las nuevas dimensiones.
una. Cambiar el control deslizante de imagen de Nivo: Abra incluye / sliders / nivo.php y entre líneas (32-36) cambie los valores de su imagen para reflejar sus nuevas dimensiones.
<a href="https://www.wpexplorer.com/classy-wordpress-theme-slider/<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] /></a> <?php // no meta link defined, show plain img } else { ?> <img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] />
B. Cambiar el control deslizante de contenido para diapositivas de imágenes: Abra incluye / sliders / content.php y entre líneas (29-36) cambie los valores de su imagen para reflejar sus nuevas dimensiones.
<a href="https://www.wpexplorer.com/classy-wordpress-theme-slider/<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] /></a> </div> <!-- END .slide-image --> <?php // no meta link defined, show plain img } else { ?> <div> <img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] />
Paso 4: regenere sus imágenes (solo si necesita volver a recortarlas)
¿Recuerda que en el paso 1 cambiamos el tamaño de la imagen del control deslizante en functions.php? Bueno, este es el valor que WordPress usa para recortar sus imágenes cuando se cargan, por lo que si ya tiene imágenes en su biblioteca multimedia, deberá «regenerarlas» para reflejar sus cambios.
Para hacer esto puedes descargar el «Regenerar miniaturas”Y ejecútelo 1 vez.
Después de ejecutar el complemento (debajo de las herramientas en su panel de control), ya no tendrá que hacerlo porque las imágenes nuevas se recortarán utilizando los valores establecidos en el paso 1 en su functions.php.