Remarque: 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 Content dans le thème WordPress Classy, ​​j’ai donc décidé de faire un tutoriel ici vous montrant toutes les étapes à suivre pour changer la taille de l’image, le 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 sélectionnée dans Functions.php

La première chose que vous voudrez faire est de changer la taille de votre image de curseur telle qu’elle est définie dans functions.php afin qu’elle recadre correctement une fois téléchargée dans votre bibliothèque multimédia.

* Ouvrez functions.php et changez la ligne 122

add_image_size( 'nivo-slider',  [highlight]980[/highlight], [highlight]400[/highlight], true );

* La première valeur 980 est la largeur de l’image de votre 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, éditez votre CSS pour changer la hauteur du conteneur de votre curseur.

Remarque: Vous n’avez à faire cela que pour le «NivoSlider» car le curseur de contenu changera automatiquement de hauteur en fonction de son contenu.

* Ouvrez style.css et changez la valeur de 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 de modèle afin que le code corresponde aux nouvelles dimensions.

une. Changer le curseur d’image Nivo: Ouvrez includes / 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. Modifier le curseur de contenu pour les diapositives d’images: Ouvrez includes / 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 à l’étape 1, nous avons changé 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, donc si vous avez déjà des images dans votre bibliothèque multimédia, 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 miniatures»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.

Share: