Comment créer des tailles d’image supplémentaires dans WordPress

Voulez-vous créer des tailles d’image supplémentaires dans WordPress ?

Par défaut, WordPress crée automatiquement plusieurs copies des téléchargements d’images dans différentes tailles. De plus, les thèmes et plugins WordPress peuvent également créer leurs propres tailles d’image.

Dans cet article, nous allons vous montrer comment créer facilement des tailles d’image supplémentaires dans WordPress et les utiliser sur votre site Web.

Pourquoi créer des tailles d’image supplémentaires dans WordPress ?

Normalement, tous les thèmes et plugins WordPress populaires gèrent très bien la taille des images. Par exemple, votre thème WordPress peut créer des tailles supplémentaires à utiliser comme vignettes sur les pages d’archives.

Cependant, ces tailles d’image peuvent parfois ne pas correspondre à vos propres besoins. Vous souhaiterez peut-être utiliser une taille d’image différente dans un thème enfant ou une mise en page de grille de publication.

Vous pouvez le faire en créant des tailles d’image supplémentaires dans WordPress, puis en appelant ces tailles chaque fois que vous en avez besoin.

Cela étant dit, examinons comment créer des tailles d’image supplémentaires dans WordPress.

Enregistrement de tailles d’image supplémentaires pour votre thème

La plupart des thèmes WordPress, y compris tous les meilleurs thèmes WordPress, prennent en charge la fonctionnalité de miniatures de publication (image en vedette) par défaut.

Cependant, si vous créez un thème WordPress personnalisé, vous devrez ajouter la prise en charge des vignettes de publication en ajoutant le code suivant au fichier functions.php de votre thème.

add_theme_support( 'post-thumbnails' );

Une fois que vous avez activé la prise en charge des vignettes de publication, vous pouvez désormais utiliser la fonctionnalité d’enregistrement de tailles d’image supplémentaires à l’aide de la fonction add_image_size().

La fonction add_image_size est utilisée au format suivant :

add_image_size( 'name-of-size', width, height, crop mode );

Un exemple de code peut ressembler à ce qui suit :

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Maintenant, si vous remarquez, nous avons spécifié trois types différents de tailles d’image. Chacun a des modes différents tels que le recadrage dur, le recadrage doux et la hauteur illimitée.

Voyons chaque exemple et comment vous pouvez les utiliser dans vos propres projets.

1. Mode de recadrage difficile

Comme vous pouvez le remarquer, il y a une « vraie » valeur ajoutée après la hauteur. Cela indique à WordPress de recadrer l’image exactement à la taille que nous avons définie (dans ce cas 120 x 120px).

Cette méthode est utilisée pour s’assurer que tout est exactement proportionné. Cette fonction recadrera automatiquement l’image soit par les côtés, soit par le haut et le bas en fonction de la taille.

2. Mode de recadrage doux

Par défaut, le mode de recadrage doux est activé, c’est pourquoi vous ne voyez aucune valeur supplémentaire ajoutée après la hauteur. Cette méthode redimensionne l’image proportionnellement sans la déformer. Vous pourriez donc ne pas obtenir les dimensions que vous vouliez. Habituellement, il correspond à la dimension de la largeur et les hauteurs sont différentes en fonction de la proportion de chaque image. Un exemple d’affichage ressemblerait à ceci :

Mode hauteur illimitée

Il y a des moments où vous avez des images super longues que vous souhaitez utiliser dans votre conception, mais vous voulez vous assurer que la largeur est limitée. Par exemple, les images infographiques ont tendance à être très longues et généralement plus larges que la largeur du contenu.

Ce mode vous permet de spécifier une largeur qui ne cassera pas votre dessin tout en laissant la hauteur illimitée.

Afficher des tailles d’image supplémentaires dans votre thème WordPress

Maintenant que vous avez ajouté la fonctionnalité pour les tailles d’image souhaitées, voyons comment les afficher dans votre thème WordPress. Ouvrez le fichier de thème dans lequel vous souhaitez afficher l’image et collez le code suivant :

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Remarque : Ce morceau de code doit être collé à l’intérieur de la boucle de publication.

C’est tout ce que vous avez vraiment à faire pour afficher les tailles d’images supplémentaires dans votre thème WordPress. Vous devriez probablement l’envelopper avec le style qui correspond à vos besoins.

Régénérer des tailles d’image supplémentaires

Si vous ne le faites pas sur un tout nouveau site, vous devrez probablement régénérer les vignettes.

La fonction add_image_size() ne génère les tailles qu’à partir du point où elle a été ajoutée au thème. Cela signifie que toutes les images de publication qui ont été ajoutées avant l’inclusion de cette fonction n’auront pas de nouvelles tailles.

Pour résoudre ce problème, vous devez régénérer la nouvelle taille d’image pour les images plus anciennes. Ceci est rendu facile par le plugin appelé Regenerate Thumbnails. Une fois que vous avez installé et activé le plugin, une nouvelle option est ajoutée sous le menu : Outils » Régénérer les vignettes

Vous verrez l’option de régénérer la vignette pour toutes les images ou uniquement les images en vedette. Nous vous recommandons de régénérer toutes les images pour éviter tout comportement inattendu ou images cassées.

Pour plus de détails, consultez notre article sur la façon de régénérer facilement de nouvelles tailles d’image dans WordPress.

Activation de tailles d’image supplémentaires pour le contenu de votre article

Même si vous avez activé les tailles d’image dans votre thème, l’utilisation est limitée uniquement à votre thème, ce qui n’a aucun sens.

Toutes les tailles d’image sont générées indépendamment, alors pourquoi ne pas la rendre disponible pour que l’auteur de la publication puisse l’utiliser dans le contenu de la publication.

Vous pouvez le faire en ajoutant le code suivant au fichier de fonctions de votre thème.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

N’oubliez pas d’enregistrer vos modifications après avoir ajouté le code.

Vous pouvez maintenant télécharger une image dans un article ou une page WordPress. Dans les paramètres de bloc d’image, vous verrez vos tailles d’image personnalisées sous l’option « Taille de l’image ».

Vous et les autres auteurs travaillant sur votre site Web pouvez désormais sélectionner ces options de taille lors de l’ajout d’images aux articles et aux pages.

Nous espérons que cet article vous a aidé à apprendre à créer des tailles d’image supplémentaires dans WordPress. Vous pouvez également consulter notre article sur les meilleurs plugins de compression d’image pour WordPress et notre guide des performances WordPress pour améliorer la vitesse de votre site Web.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour des didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

L’article Comment créer des tailles d’image supplémentaires dans WordPress est apparu en premier sur WPBeginner.