Vous êtes peut-être tombé sur le fait que dans le rôle de développeur de thème, il est standard de construire votre thème avec les performances web en tête. Cela signifie qu’il faut s’assurer que les images sorties dans votre thème ne sont pas en taille ‘complète’ si elles peuvent dépasser 100 kilo-octets.
De plus, faire usage de la fonctionnalité de WordPress pour l’attribut HTML image srcset est une autre raison d’être en train d’utiliser la fonction wp_get_attachment_image() dans la sortie des images.
Une autre utilisation serait dans la sortie des articles de blog avec des images vedettes. En tant que développeur de thème, vous voulez vous assurer que vous spécifiez soit : (a) l’une des tailles de vignettes de post par défaut, ou (b) créer votre propre taille de vignette de post personnalisée.
Il y a des cas où vous pourriez ne pas avoir à utiliser une taille de vignette de post personnalisée. Cependant, vous pouvez plutôt utiliser une taille de vignette de post par défaut qui fera parfaitement l’affaire pour vos besoins.
Les tailles de vignettes par défaut que vous pouvez utiliser sont les suivantes :
-
thumbnail(utilise la taille 150px × 150px) -
medium(utilise la taille 300px × 300px) -
medium_large(utilise la taille 768px × 0px) - .
large(utilise la taille 1024px × 1024px)
Dans ces cas, vous pouvez facilement préciser si vous avez une taille similaire à utiliser pour l’une de ces tailles de vignettes par défaut. Tout ce que vous aurez à faire est d’utiliser l’une des chaînes mentionnées ci-dessus dans le paramètre $size de la fonction the_post_thumbnail().
Vous remarquerez que ces tailles de vignettes de post par défaut sont presque toutes des images à coupe carrée. Cela est probablement dû à l’espace maximal dont une image peut être sortie – un carré. Pour utiliser au mieux l’espace, la décision a été prise de faire de ces tailles de vignettes de post par défaut des images carrées.
Quand utiliser une taille de vignette de post personnalisée
Cependant, il y a des cas où vous devez sortir une image qui n’est pas un carré. Prenez par exemple que vous devez ajouter une image vedette au-dessus de votre article unique de blog en utilisant la fonction the_post_thumbnail().
Vous pouvez utiliser le code suivant qui sortira une image vedette de votre article avec la taille 1024px × 768px:
add_image_size( 'single-feature', 1024, 768, true );
Et identifier rapidement ce que cela signifie en termes profanes :
- add_image_size() – créer une taille de vignette de post personnalisée
- ‘single-feature’ – paramètre
$name, juste un nom de la taille de vignette de post personnalisée - 1024 – paramètre
$width, la largeur de la taille de la vignette de post personnalisé - 768 – paramètre
$height, la hauteur de la taille de la vignette de post personnalisé - true – paramètre
$crop, signifie si (a) recadrer dur, ou (b) mettre à l’échelle l’image dans la taille de la vignette de post personnalisé. Plus d’infos dans les WP Dev docs
A titre d’infos supplémentaires : à partir de l’exemple, la largeur et la hauteur spécifiées ont été choisies (1024 × 768) car ce sont les tailles courantes à utiliser pour les images vedettes. Cependant, cela ne signifie pas nécessairement que vous ne pouvez pas utiliser d’autres tailles. Assurez-vous de voir ce qui convient le mieux à la conception de votre thème et utilisez-le.
Comment mettre à jour les vignettes personnalisées des articles
Comme vous allez tester les nouvelles tailles d’images pour vos images WordPress, vous remarquerez que vous pouvez avoir des difficultés à mettre à jour la largeur et la hauteur sans modifier la $name taille de la vignette personnalisée de l’article.
Prenons par exemple que vous avez l’ancienne taille :
add_image_size( 'single-feature', 1024, 768, true );
Mais maintenant vous devez mettre à jour la taille de cette vignette ‘single-feature’ à la taille suivante :
add_image_size( 'single-feature', 1366, 768, true );
Vous voyez que le changement était dans la largeur de 1024 à 1366. Mais lorsque vous rafraîchissez le modèle dans lequel cette taille est censée être affichée, il affiche toujours son image avec la largeur de 1024. Comment corriger cela ?
Pour y remédier, vous devrez régénérer la vignette.
Pour commencer, assurez-vous que vous avez mis à jour la largeur et la hauteur de votre vignette, puis installez le plugin Regenerate Thumbnails. Suivez les instructions du plugin et vous aurez alors régénéré les tailles des vignettes avec succès.
Régénérer toutes vos images peut prendre un certain temps, surtout si votre site Web a beaucoup d’images dans votre bibliothèque de médias.
Où placer la fonction add_image_size
La fonction add_image_size() ne fonctionnera pas si vous ne la placez pas correctement dans le crochet d’action after_setup_theme de WordPress. Cela signifie que l’exemple de code suivant:
add_image_size( 'archive-featured', 792, 446, true );
Doit se trouver dans le crochet d’action suivant dans le fichier functions.php de votre thème sous:
function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );
Ajouter la fonction add_image_size dans le thème Underscores
Un thème de démarrage très populaire appelé le thème Underscores ou le thème _s a un bon endroit pour ajouter vos fonctions add_image_size().
Vous pouvez ajouter la fonction de taille de vignette de post personnalisé add_image_size() sous la ligne add_theme_support( 'post-thumbnails' ); dans le fichier functions.php du thème Underscores.
La raison pour laquelle vous pouvez ajouter la fonction add_image_size() sous cette ligne est qu’elle se trouve déjà dans le crochet d’action after_setup_theme mentionné précédemment.
Snippet de fonction d’ajout de taille d’image pour les thèmes WordPress
Si vous le souhaitez, vous pouvez copier le snippet ci-dessous pour le add_image_size dans le thème Underscores pour votre référence future:
/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );
Note : Veuillez vous assurer que vous définissez les paramètres utilisés dans le snippet pour vous assurer que vous ne recevez pas d’erreurs d’avertissement PHP dans votre thème. Le snippet ci-dessus est utilisé comme un modèle que vous pouvez copier-coller dans les fonctions de votre thème.
Conclusion
Merci d’avoir lu cet article ! S’il vous plaît laissez-moi savoir vos pensées et votre configuration sur les tailles de vignettes de post personnalisé.
Si vous avez apprécié cet article, vous aimeriez peut-être connaître les erreurs de thème dans la configuration des types de post personnalisés. Pour commencer, n’enregistrez pas les types de post personnalisés dans votre thème !
.
