Lorsque vous installez un nouveau thème sur WordPress, le slider ne correspond presque jamais aux dimensions de votre contenu. Vous avez des captures d’écran en 16:9, des visuels de produits, des images carrées, et le thème les recadre selon ses propres proportions. La moitié de l’image est coupée et la vitrine principale de votre site donne l’impression d’avoir été montée les yeux fermés.

Mais il ne s’agit pas d’un bug du thème. Ce sont des réglages codés en dur qui se trouvent à trois endroits: la déclaration des tailles de miniatures dans functions.php, le conteneur CSS du slider et les templates d’affichage. La quatrième couche consiste à régénérer les images déjà téléversées à la nouvelle taille. Corrigez ces quatre éléments et le slider s’aligne parfaitement.

Voici un découpage étape par étape en prenant pour exemple le thème Classy de WPExplorer. Mais la logique est universelle: tout thème classique utilisant un slider Nivo ou un slider personnalisé avec add_image_size modifie les mêmes fichiers.

💡 Aperçu rapide:

• Modifiez add_image_size dans functions.php, cela contrôle le recadrage au moment du téléversement
• Modifiez width et height du conteneur dans style.css pour que la mise en page ne s’effondre pas
• Mettez à jour les attributs width et height dans les templates nivo.php et content.php pour que le navigateur n’étire pas l’img
• Lancez Regenerate Thumbnails sur votre médiathèque, les anciennes images sont recréées à la nouvelle taille

L’ensemble du processus est présenté dans cette vidéo:

Étape 1. Modifier la taille des miniatures dans functions.php

Lorsque WordPress téléverse une image, il la traite dans toutes les tailles déclarées. La déclaration se fait via la fonction add_image_size. Le thème déclare un slider de 980×400, mais vous avez besoin de 1200×500, c’est donc ici que vous devez intervenir.

Ouvrez le fichier functions.php du thème. Chemin: Apparence → Éditeur de fichiers du thème dans l’administration, ou par FTP dans /wp-content/themes/theme-name/. Dans Classy, la ligne add_image_size pour le slider se trouve autour de la ligne 122:

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

Le premier paramètre est la largeur, le deuxième la hauteur, le troisième (true) correspond au recadrage dur. Si vous mettez false, WordPress adaptera l’image le long du côté le plus petit sans recadrer. Cela peut sembler tentant, mais le slider risque d’avoir une hauteur variable d’une image à l’autre.

Remplacez par vos valeurs et enregistrez:

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

À partir de maintenant, tous les nouveaux téléversements sont recadrés à votre taille. Les anciens ne le sont pas encore, nous y reviendrons à l’étape 4.

Étape 2. Corriger le conteneur CSS

Vous avez modifié la taille des miniatures. Mais le conteneur du slider dans la mise en page conserve les anciennes valeurs issues du CSS. L’image se charge correctement, mais le bloc la recadre ou laisse un espace vide sur les bords.

Dans Classy, le conteneur du slider Nivo est décrit dans style.css, lignes 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
}

Remplacez width et height par vos valeurs:

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
}

Nuance importante: cela modifie spécifiquement le slider Nivo. Le Content Slider de Classy ajuste sa hauteur automatiquement en fonction du contenu, vous n’avez pas besoin d’y toucher. Dans d’autres thèmes, la logique est la même: trouvez le sélecteur correspondant au slider que vous modifiez et ne touchez pas aux autres.

Étape 3. Mettre à jour les attributs dans les templates

add_image_size renvoie l’URL de la bonne miniature. Mais le balisage HTML du slider contient en dur width="980" height="400". Si vous laissez les anciennes valeurs, le navigateur étire ou compresse l’image pour les faire correspondre. Résultat: une image floue ou écrasée, même si la source est correcte.

Dans Classy, deux fichiers sont à modifier.

Nivo Image Slider, fichier includes/sliders/nivo.php, lignes 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 pour les diapositives d’image, fichier includes/sliders/content.php, lignes 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>

Modifiez les deux, puis enregistrez. Si le thème utilise background-image en CSS au lieu de <img>, ne touchez pas aux templates, l’étape 2 suffit.

Étape 4. Régénérer les anciennes images

À l’étape 1, nous avons modifié add_image_size. Les nouveaux téléversements sont recadrés correctement. Mais toutes les images de la médiathèque téléversées avant la modification sont stockées à l’ancienne taille. Le slider les utilise et obtient des proportions incorrectes.

Solution: l’extension Regenerate Thumbnails. Elle parcourt toute la médiathèque et recrée les miniatures aux tailles actuellement déclarées. Installation standard: Extensions → Ajouter → rechercher «Regenerate Thumbnails» → Installer → Activer.

Après activation: Outils → Regenerate Thumbnails → «Regenerate All Thumbnails». Pour une médiathèque volumineuse, le processus prend quelques minutes, l’extension déclenche la régénération de toutes les tailles déclarées pour chaque image.

L’extension peut aussi supprimer les tailles de miniatures inutilisées, libérant ainsi de l’espace serveur. Après l’avoir exécutée une fois, vous n’en aurez plus besoin: tous les téléversements futurs passeront par la nouvelle valeur de add_image_size.

Si vous avez un accès console au serveur, WP-CLI est plus rapide:

1
wp media regenerate --yes

Pas de surcharge liée aux requêtes HTTP et cela évite les timeouts sur les grandes médiathèques.

Que faire si le slider ne fonctionne toujours pas correctement

Il arrive que vous ayez réalisé les quatre étapes et que le slider se comporte bizarrement. Parcourez cette liste de vérification:

• Spécificité CSS: vos nouvelles valeurs width/height sont écrasées par un sélecteur plus spécifique du thème. Ouvrez l’inspecteur du navigateur et regardez quelle règle est effectivement appliquée à l’élément.
• Cache: videz le cache du navigateur (Ctrl+F5). Si vous avez une extension de cache serveur comme WP Rocket ou LiteSpeed Cache, videz-le également.
• Thème enfant: modifier directement le thème parent signifie que vos changements seront perdus à la prochaine mise à jour. Créez un thème enfant et déplacez-y vos modifications.
• Responsive: la largeur du conteneur est-elle supérieure à la largeur du site? Sur mobile, le slider dépasse du bord. Ajoutez max-width: 100% et height: auto dans une media query pour le mobile.

Une mise à jour du thème a tout cassé: comment vous protéger

Le principal inconvénient de la modification du thème parent: les mises à jour écrasent les fichiers et vos changements disparaissent. Le slider revient silencieusement aux réglages d’usine.

La bonne approche est un thème enfant. Déplacez-y trois éléments:

• Surchargez add_image_size dans le functions.php du thème enfant via le hook after_setup_theme;
• Surchargez le CSS, le style.css enfant se charge après le parent, vos règles l’emportent par cascade;
• Templates du slider, copiez nivo.php et content.php dans le thème enfant en conservant la même arborescence (includes/sliders/). WordPress utilise automatiquement la version du thème enfant.

Après cela, les mises à jour du thème parent ne menacent plus vos dimensions.

⁉️🤔 Foire aux questions

Dois-je modifier les trois fichiers: functions.php, style.css et les templates?

Oui, sinon le résultat sera incomplet. Si vous modifiez seulement add_image_size sans le CSS, le conteneur recadre la nouvelle image. Sans les templates, le navigateur étire l’image aux anciennes valeurs width/height et elle devient floue. Trois modifications garantissent des dimensions cohérentes sur toutes les couches: déclaration des miniatures → conteneur → attributs HTML.

Dois-je toucher à content.php si j’utilise uniquement le slider Nivo?

Non. content.php concerne le content slider, celui qui extrait le texte et les images des articles. Si le content slider n’est pas utilisé sur le site, vous pouvez ignorer ce fichier. Mais en cas de doute, la modification prend une minute, mieux vaut faire les deux.

L’extension Regenerate Thumbnails va-t-elle supprimer mes originaux?

Non. L’image originale en pleine résolution reste intacte. L’extension ne recrée que les miniatures: les tailles déclarées via add_image_size et dans Réglages → Médias. L’option de suppression des tailles inutilisées ne touche pas non plus à l’original, elle nettoie les miniatures «orphelines» non déclarées dans le thème ou les extensions.

Que faire si add_image_size n’est pas dans le thème et que le slider fonctionne différemment?

Certains thèmes modernes n’utilisent pas add_image_size pour le slider. Ils chargent l’image originale et contrôlent la taille par CSS: object-fit: cover ou background-size: cover. Dans ce cas, l’étape 2 suffit, modifiez uniquement le conteneur CSS. Vérifiez dans l’inspecteur du navigateur quelle URL est effectivement chargée dans le slider: si c’est image.jpg sans suffixe -980x400, vous n’avez pas besoin des étapes 1 et 4.

Dois-je faire une sauvegarde avant de modifier functions.php?

Absolument. Une simple faute de frappe dans functions.php et le site plante en White Screen of Death. Avant de modifier, téléchargez le fichier par FTP ou copiez son contenu dans un éditeur de texte. Si le site plante, retéléversez le functions.php d’origine, le site revient instantanément.

Slider personnalisé: récapitulatif final

L’algorithme est universel pour tout thème WordPress classique: déclaration des tailles → conteneur CSS → templates HTML → régénération des anciennes images. Quatre étapes et le slider fonctionne avec vos proportions, sans recadrage ni flou.

L’essentiel est de ne pas modifier directement le thème parent. Déplacez vos changements dans un thème enfant dès que vous avez confirmé que les dimensions conviennent. Ainsi, aucune mise à jour ne ramènera le slider à ses réglages d’usine.