Comment changer la taille des images en vedette dans WordPress

Les images en vedette sont utilisées dans WordPress de différentes manières, selon le thème que vous utilisez. La plupart des thèmes utilisent des images en vedette comme aperçu miniature de l'une des images d'un article ou d'une page qui est généralement affichée sur la page d'accueil et les pages d'archives.

Cette fonctionnalité a été introduite avec WordPress 2.9 et était à l'origine connue sous le nom de "post vignettes". La plupart des thèmes WordPress (y compris les nôtres) utilisent désormais des images en vedette à de nombreuses autres fins, telles que les galeries d'images, les curseurs de fonctionnalités et les images d'en-tête de page. Par exemple, dans notre thème Plein cadre, l'image sélectionnée devient l'image d'arrière-plan de la publication.

Les images en vedette sont bien sûr très importantes pour les créatifs et toute personne créant un site WordPress qui contient beaucoup d'images. Pour utiliser les images en vedette dans n'importe quel thème Graph Paper Press, il vous suffit de sélectionner une image en vedette à partir du lien sur le côté droit de l'écran dans l'éditeur de publication.

Si la taille d'image sélectionnée par défaut définie dans votre thème convient à vos besoins, c'est parfait. Sinon, il est possible de changer la taille avec un peu d'édition de code.

Pourquoi voudriez-vous changer la taille de l'image en vedette ? Outre l'agrandissement ou la réduction des galeries de vignettes, vous souhaiterez peut-être modifier le rapport d'aspect des dimensions. Disons par exemple que vous êtes un photographe paysagiste et que votre portfolio est composé de panoramas panoramiques. Dans ce cas, si l'image sélectionnée par défaut du thème est carrée, elle finira par rogner la majeure partie de votre image. Vous pouvez résoudre ce problème en ajustant manuellement les dimensions à quelque chose de plus approprié.

Changer la taille de l'image en vedette dans functions.php

Pour modifier les tailles des images en vedette par défaut, vous devrez modifier du code dans le fichier functions.php . Ce fichier est accessible via FTP ou vous pouvez le modifier directement dans le tableau de bord WordPress sous Apparence > Éditeur. Je recommanderais toujours la première approche plutôt que la seconde.

Avant d'apporter des modifications à ce fichier, il est toujours utile de s'assurer que vous disposez d'une sauvegarde de la version originale au cas où quelque chose tournerait mal. Si vous n'avez pas déjà les fichiers de thème d'origine sur votre ordinateur, assurez-vous de télécharger au moins le fichier functions.php et de l'enregistrer dans un dossier de sauvegarde.

Il existe deux manières différentes de redimensionner une image en vedette. Pour la redimensionner proportionnellement (c'est-à-dire pour éviter d'étirer ou de compresser l'image) utilisez le code suivant :

 set_post_thumbnail_size( 50, 50 ); // 50 pixels de large sur 50 pixels de haut, mode redimensionnement

vous pouvez également choisir de redimensionner l'image en la recadrant avec ce code :

 set_post_thumbnail_size( 50, 50, true ); // 50 pixels de large sur 50 pixels de haut, mode recadrage

Ceci définit la taille par défaut des images sélectionnées.

Ajout de tailles d'image supplémentaires

Il est également possible d'ajouter autant de tailles d'image supplémentaires que nécessaire en ajoutant une ligne de code supplémentaire pour chaque taille d'image :

 add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels de large (et hauteur illimitée)

Vous pouvez ensuite utiliser cette nouvelle taille dans votre modèle de thème avec le code suivant :

 <?php the_post_thumbnail( 'category-thumb' ); ?>

Cette fonctionnalité est pratique si vous souhaitez afficher les images sélectionnées de différentes manières. Par exemple, vous pouvez définir une taille de vignette pour vos galeries d'images et une taille plus grande pour votre en-tête de publication.

N'oubliez pas que les images que vous téléchargez doivent être au moins aussi grandes que les dimensions que vous avez définies pour vos images en vedette. Si vous téléchargez des images plus petites, elles seront agrandies et finiront par apparaître pixélisées et floues.

Reconstruire vos images en vedette

La modification de la taille de l'image sélectionnée n'affectera les téléchargements qu'à partir du moment où le code est modifié. Tous les téléchargements précédents auront été enregistrés aux dimensions d'origine, vous devrez donc les regénérer.

Si vous n'avez que quelques images à redimensionner, vous pouvez les télécharger à nouveau manuellement. Si vous en avez plus qu'une poignée, il est préférable d'utiliser un plugin comme Regenerate Thumbnails pour faire tout le travail à votre place. Ce plugin est accessible via votre menu Outils et redimensionnera une ou plusieurs des images de votre galerie multimédia que vous sélectionnez.

Pérennisez vos modifications avec un thème enfant

Le problème avec les modifications apportées directement à votre fichier functions.php est qu'elles seront perdues si une nouvelle version du thème est publiée et que vous devez la mettre à niveau. Vous pouvez noter le code que vous avez ajouté et l'insérer dans le nouveau fichier functions.php , mais cela peut devenir fastidieux, en particulier si vous effectuez de nombreuses modifications ou si de nouvelles versions du thème sortent fréquemment.

L'utilisation d'un thème enfant résout ce problème, car lorsque le thème parent est mis à jour, le thème enfant reste intact. Si vous apportez des modifications au code d'un thème, soit dans le fichier functions.php , soit dans les feuilles de style ou tout autre fichier, il est toujours préférable d'utiliser un thème enfant.

Nous avons déjà un guide complet pour créer un thème enfant sur le blog, mais voici ce que vous devez savoir pour nos besoins.

Pour créer un thème enfant, connectez-vous à votre site via FTP et créez un nouveau dossier dans /wp-content/themes/ pour votre nouveau thème enfant. Il est courant de nommer le dossier de la même manière que le thème que vous souhaitez modifier, avec "-child" en annexe. Par exemple : "awesome-child" si vous créez un thème enfant du thème Awesome.

Vous devez créer une feuille de style dans votre dossier de thème enfant, même si vous n'avez pas l'intention de modifier le CSS. Créez un nouveau fichier appelé style.css et collez-y le code suivant :

 /*
Nom du thème : Enfant génial
URI du thème : http://example.com/awesome-child/
Description: Thème enfant génial
Auteur : Presse à papier millimétré
URI de l'auteur : http://example.com
Modèle : Génial
Version : 1.0.0
Balises : clair, sombre, mise en page réactive, prêt pour l'accessibilité
Domaine du texte : super-enfant
*/

@import url("../awesome/style.css");

/* =La personnalisation du thème commence ici
-------------------------------------------------- ------------ */

Modifiez le nom du thème et d'autres détails, le cas échéant.

Pour ajouter la fonctionnalité permettant de changer l'image en vedette dans votre thème enfant, vous devrez créer un nouveau fichier functions.php , alors allez-y et faites-le dans le répertoire du thème enfant. Ce fichier sera chargé en plus du fichier functions.php du thème parent.

Le modèle pour functions.php ressemble à ceci :

 <?php //Ouverture de la balise PHP

// les fonctions

?> // Fermeture de la balise PHP

Vous pouvez ensuite ajouter votre code de redimensionnement d'image entre les balises PHP, vous obtiendrez donc quelque chose comme ceci :

 <?php // Ouverture de la balise PHP

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-vignettes' );
set_post_thumbnail_size( 150, 150, true ); // dimensions par défaut des Post Thumbnails (recadrées)

// tailles d'image supplémentaires
// supprimer la ligne suivante si vous n'avez pas besoin de tailles d'image supplémentaires
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels de large (et hauteur illimitée)
}

?> // Fermeture de la balise PHP

Une fois que vous aurez fini de créer le code de votre thème enfant, vous devrez l'activer. Vous pouvez le faire via le tableau de bord du site, sous Panneaux d'administration > Apparence > Thèmes . Trouvez votre thème enfant dans la liste et cliquez sur Activer.

Admirez vos nouvelles images sélectionnées redimensionnées

Changer la taille des images présentées et ajouter de nouvelles tailles d'image est une tâche assez simple mais nécessite une modification du code. Pour cette raison, certains utilisateurs préfèrent utiliser un plugin pour gérer le redimensionnement de l'image, mais l'ajout de plugins supplémentaires est toujours un risque de sécurité. Passer sous le capot et apporter quelques modifications simples au code comme celle-ci peut vraiment vous aider à renforcer votre confiance dans l'utilisation de WordPress et vous permettra de personnaliser plus facilement les thèmes et de vous les approprier.