Cambie las dimensiones del control deslizante en el elegante tema de WordPress

Cambie las dimensiones del control deslizante en el elegante tema de WordPress

Notar: Esta guía se ha actualizado a Classy Version 1.10+

He recibido bastantes solicitudes que me preguntan cómo cambiar el tamaño de los controles deslizantes Nivo y Content en el tema Classy WordPress, así que decidí hacer un tutorial aquí que le muestra todos los pasos para cambiar el tamaño de la imagen l ‘, CSS y archivos de plantilla para que pueda establecer su propio tamaño de cursor.

Paso 1: cambia el tamaño de la imagen seleccionada en Functions.php

Lo primero que querrá hacer es cambiar el tamaño de la imagen del control deslizante según lo establecido 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 cursor y el 400 es la altura de la imagen del cursor. Modifícalos según tus necesidades.

Paso 2: edita tu CSS

Luego edite su CSS para cambiar la altura de su contenedor de cursor.

Notar: Solo tiene que hacer esto para el “NivoSlider” porque el control deslizante de contenido cambiará automáticamente la altura según su contenido.

* 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 modificar los archivos de su modelo 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 las líneas (32-36) modifique 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. Cambie el control deslizante de contenido para diapositivas de imágenes: Abra incluye / sliders / content.php y entre las 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: Regenera tus imágenes (solo si necesitas recortarlas)

¿Recuerda que en el paso 1 cambiamos el tamaño de la imagen del control deslizante en functions.php? Bueno, ese es el valor que usa WordPress para recortar sus imágenes cuando se cargan, por lo que si ya tiene imágenes en su biblioteca de medios, deberá “regenerarlas” para reflejar sus cambios.

Para hacer esto, puede 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 cualquier imagen nueva se recortará utilizando los valores definidos en el paso 1 en su functions.php.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba