Si vous construisez un site WordPress personnalisé, vous pouvez avoir besoin d’ajouter une taille d’image personnalisée. Ce n’est pas difficile du tout, et je vais vous montrer comment le faire.
Il y a cependant un piège – juste en ajoutant une nouvelle taille d’image, les blocs WordPress ne vous permettront pas de sélectionner ces tailles d’image dans les blocs Image, Gallery ou d’autres blocs de l’éditeur WordPress Gutenberg. Donc aujourd’hui, je vais vous montrer toutes les étapes nécessaires pour utiliser pleinement ces nouvelles tailles d’image. Voici ce que vous allez apprendre à faire :
- comment ajouter de nouvelles tailles d’images dans WordPress
- comment générer de nouvelles tailles d’images
- comment ajouter de nouvelles tailles d’images aux blocs WordPress
L’exemple que je vais vous montrer a été ajouté au thème Genesis Sample. Mais il devrait fonctionner sur tous les thèmes WordPress. Commençons par la première étape.
Comment ajouter une nouvelle taille d’image dans WordPress
L’ajout d’une nouvelle taille d’image dans WordPress ne prend qu’une seule ligne de code. Ce que vous devez faire, c’est aller dans Apparence >> Editeur de fichier de thème dans le panneau d’administration de WordPress, et ouvrir le fichier functions.php.
Faites défiler jusqu’au bas du fichier, et ajoutez la ligne de code :
add_image_size( 'custom-550', 550, 500, true );Ce que cette ligne signifie :
- custom-550 est un exemple de nouveau nom de taille d’image. Vous pouvez utiliser le nom que vous voulez.
- 550 dans l’exemple est la nouvelle largeur de l’image en pixels.
- 500 dans l’exemple est la nouvelle hauteur de l’image en pixels.
- le dernier – true, montre que la nouvelle image doit être recadrée. Ainsi, même si la nouvelle image est construite à partir d’une image verticale, cette nouvelle taille doit être recadrée à la taille spécifique que vous avez saisie.
Vous pouvez utiliser les nombres et les noms que vous souhaitez.
Plus d’informations sur la fonction add_image_size peuvent être trouvées dans la documentation de WordPress.
Après avoir ajouté cette ligne au fichier functions.php de votre thème WordPress (ou mieux encore, de votre thème enfant) et enregistré les modifications, la nouvelle taille personnalisée est prête à être utilisée dans les thèmes et les plugins. Mais ce n’est pas tout – nous avons besoin de deux autres étapes pour nous assurer que nous pouvons utiliser l’image dans les blocs WordPress.
L’étape suivante consiste à générer les images réelles pour cette taille d’image personnalisée.
Comment générer de nouvelles tailles d’images ou régénérer toutes les images dans WordPress ?
Une fois que vous avez ajouté une nouvelle taille d’image personnalisée dans WordPress, vous devez également générer de nouvelles tailles d’images pour les fichiers médias déjà téléchargés – WordPress ne génère pas toutes les images automatiquement une fois que vous avez ajouté une nouvelle taille d’image personnalisée.
Pour générer de nouvelles tailles d’images dans WordPress, allez dans Plugins >> Add New, et entrez regenerate thumbnails dans le champ de recherche en haut. Choisissez le plugin Regenerate Thumbnails et installez-le maintenant.
Une fois le plugin installé et activé, allez dans Outils >> Régénérer les vignettes, et cliquez sur le bouton Régénérer les vignettes pour toutes les pièces jointes.
En fonction de la vitesse de votre serveur, de la taille des images et du nombre total d’images, cela peut prendre de quelques secondes à quelques minutes. Une fois que c’est fait, vous pouvez passer à l’étape finale – pour vous assurer que la nouvelle taille d’image apparaît dans les blocs WordPress.
Comment ajouter des tailles d’images personnalisées aux blocs WordPress – Image, Gallery, et autres
Après avoir ajouté une nouvelle taille d’image et généré des vignettes de nouvelle taille, vous pourriez penser que la nouvelle taille d’image sera également disponible dans l’éditeur de blocs WordPress. Mais en fait, elle ne sera pas encore visible. La nouvelle taille d’image doit avoir un titre pour s’afficher dans les blocs Gutenberg.
Pour ajouter la taille de l’image au bloc, allez dans Apparence >> Éditeur de fichiers de thème, et ouvrez à nouveau le fichier functions.php, et ajoutez ce code en bas :
add_filter( 'image_size_names_choose', 'imakeitwork_image_sizes' );
function imakeitwork_image_sizes($sizes) {
return array_merge($sizes, array(
'custom-550' => __('ImakeITwork image size')
));
}Assurez-vous de remplacer custom-550 par le même nom de taille d’image que vous avez utilisé dans la fonction add_image_size dont j’ai parlé précédemment. Et n’hésitez pas à remplacer ImakeITwork image size par le titre que vous souhaitez voir apparaître dans les blocs WordPress.
Après avoir ajouté la fonction addimagesize et le filtre imagesizenames_choose, vous serez en mesure d’utiliser la nouvelle taille d’image dans n’importe quel bloc WordPress qui permet de sélectionner la taille de l’image – comme les blocs Gallery et Image.
