Noter: Ce guide a été mis à jour pour Classy Version 1.10+
J’ai reçu pas mal de demandes me demandant comment changer la taille des curseurs Nivo et de contenu dans le thème WordPress chic, j’ai donc décidé de faire un tutoriel ici vous montrant toutes les étapes nécessaires pour changer la taille de l’image en vedette, CSS et fichiers de modèle afin que vous puissiez définir votre propre taille de curseur.
Étape 1 : Modifier la taille de l’image en vedette dans Functions.php
La première chose que vous voudrez faire est de modifier la taille de votre image de curseur telle qu’elle est définie dans functions.php afin qu’elle se recadre correctement lorsqu’elle est téléchargée dans votre bibliothèque multimédia.
* Ouvrez functions.php et modifiez la ligne 122
add_image_size( 'nivo-slider', [highlight]980[/highlight], [highlight]400[/highlight], true );
* La première valeur 980 est la largeur de votre image de curseur et le 400 est la hauteur de l’image du curseur. Modifiez-les en fonction de vos besoins.
Étape 2 : Modifiez votre CSS
Ensuite, modifiez votre CSS pour modifier la hauteur du conteneur de votre curseur.
Noter: Vous ne devez le faire que pour le « NivoSlider » car le curseur de contenu changera automatiquement de hauteur en fonction de son contenu.
* Ouvrez style.css et modifiez la valeur de la hauteur entre les lignes 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; }
Étape 3 : modifiez vos fichiers de modèle
L’étape suivante consiste à modifier vos fichiers modèles afin que le code corresponde aux nouvelles dimensions.
une. Changer le curseur d’image Nivo : Ouvrez include/sliders/nivo.php et entre les lignes (32-36) modifiez les valeurs de votre image pour refléter vos nouvelles dimensions.
<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. Changer le curseur de contenu pour les diapositives d’images : Ouvrez include/sliders/content.php et entre les lignes (29-36) modifiez les valeurs de votre image pour refléter vos nouvelles dimensions.
<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] />
Étape 4 : Régénérez vos images (uniquement si vous devez recadrer vos images)
Rappelez-vous qu’à l’étape 1, nous avons modifié la taille de l’image du curseur dans functions.php ? Eh bien, c’est la valeur que WordPress utilise pour recadrer vos images lorsqu’elles sont téléchargées. Par conséquent, si vous avez déjà des images dans votre médiathèque, vous devrez les « régénérer » pour refléter vos modifications.
Pour ce faire, vous pouvez télécharger le « Régénérer les vignettes” et exécutez-le 1 fois.
Après avoir exécuté le plugin (sous outils dans votre tableau de bord), vous n’aurez plus à le faire car toutes les nouvelles images seront recadrées en utilisant les valeurs définies à l’étape 1 dans votre functions.php.