Utilisation de tailles d'image personnalisées dans votre thème et redimensionnement d'images existantes

Dans ce didacticiel, vous apprendrez à générer des images de taille personnalisée que vous pourrez utiliser dans votre thème WordPress. Pourquoi utiliser des tailles d'image personnalisées? Ainsi, vous ne devrez pas modifier chaque image que vous téléchargez dans la médiathèque. Ainsi, chaque image téléchargée générera automatiquement toutes les tailles d’image définies sur mesure. Il peut être inséré dans le message ou la page à l'aide de la médiathèque ou à partir de la boucle. Poursuivez votre lecture pour savoir comment.


Étape 1 Définition des tailles d'image personnalisées

Pour que votre thème prenne en charge les tailles d'image personnalisées, vous devez modifier le fichier functions.php présent dans votre dossier de thèmes. Ouvrez le fichier functions.php de votre thème et vérifiez si vous avez une ligne qui ressemble à ceci:

add_action ('after_setup_theme', 'nom_fonction');

Ce hook est appelé lors de l'initialisation d'un thème. Il est généralement utilisé pour effectuer des opérations de base de configuration, d'enregistrement et d'initialisation pour un thème, où "nom_fonction" est le nom de la fonction à appeler..

Si vous avez trouvé une ligne de ce type, recherchez également la méthode portant le même nom que le deuxième paramètre de cette méthode add_action..

Si vous ne trouvez pas une ligne qui ressemble à cela, vous devez l'ajouter et créer un nom de méthode comme second paramètre:

add_action ('after_setup_theme', 'setup'); fonction setup () //…

Maintenant, pour activer les miniatures de publication pour votre thème, ajoutez les lignes suivantes dans la méthode définie ci-dessus:

function setup () //… add_theme_support ('post-vignettes'); // Cette fonctionnalité active la prise en charge de post-vignettes pour un thème // Pour n'activer que les publications: // add_theme_support ('post-vignettes', array ('post')); // Pour activer uniquement les publications et les types de publication personnalisés: // add_theme_support ('post-thumbnails', array ('post', 'movie')); // Enregistrer une nouvelle taille d'image. // Cela signifie que WordPress créera une copie de l'image de publication avec les dimensions spécifiées // lorsque vous téléchargerez une nouvelle image. Inscrivez-vous autant que nécessaire. // Ajout de tailles d'image personnalisées (nom, largeur, hauteur, recadrage) add_image_size ('Featured-image', 620, 200, true); //…

Étape 2 Affichage des images avec des tailles personnalisées

Insérer une image de taille personnalisée dans une publication à l'aide de la Galerie multimédia

Pour insérer une image dans une publication ou une page de la médiathèque, insérez le filtre suivant dans le fichier functions.php:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ tailles) $ custom_sizes = array ('Featured-image' => 'Image sélectionnée'); return array_merge ($ tailles, $ custom_sizes); 

Qu'est-ce que ce code fait, est-ce qu'il fusionne vos tailles d'image personnalisées avec celle définie dans WordPress afin que le résultat soit l'image ci-dessous.

Insérer une image de taille personnalisée dans la boucle

Pour afficher par exemple l'image qui a été nommée "vedette-image", dans la boucle, vous devez ajouter ces lignes:

 'l'image sélectionnée' ) ); fin si; ?>

Ceci vérifiera si le post / la page a une image attachée et produira un étiquette montrant l'image à la taille souhaitée.


Étape 3 Redimensionnement d'images existantes

Pour cette tâche, il existe un plug-in, Regenerate Thumbnails. Il peut tout régénérer, un lot ou des images individuelles. Si vous modifiez la taille des images et les régénérez, les images ayant les dimensions précédentes ne seront pas supprimées..


Exemple

Supposons que vous souhaitiez utiliser cette fonctionnalité dans votre thème. Du / wp-content / themes / nom-du-thème dossier ouvert functions.php avec votre éditeur de texte préféré. Si votre thème n'a pas de after_setup_theme action définie, vous devez en ajouter un. Le code pour les tailles d'image personnalisées sera ajouté à cette méthode définie.

Remarque: ce sont des noms de taille d'image réservés: pouce, vignette, moyen, grand, post-vignette. Ajouter une taille d'image personnalisée avec un nom réservé remplacera ses valeurs prédéfinies.

add_action ('after_setup_theme', 'setup'); function setup () //… add_theme_support ('post-vignettes'); // Cette fonctionnalité active la prise en charge post-vignette d'un thème add_image_size ('header', 600, 200, true); // image d'en-tête add_image_size ('custom-size1', 400, 200); // 400 pixels de large et 200 pixels de haut, redimensionné proportionnellement add_image_size ('custom-size2', 400, 200, true); // 400 pixels de large et 200 pixels de haut, recadré //…

Editer le content.php ou content-single.php ou content-page.php fichiers, vous pouvez afficher l'image avec la taille appropriée pour l'en-tête de l'article en la mettant en dessous ou sous le titre de l'article.

Pour que les deux autres formats personnalisés puissent être sélectionnés dans la Galerie multimédia, ajoutez le filtre suivant:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ tailles) $ custom_sizes = array ('custom-size1' => 'Ma taille personnalisée 1', 'custom-size2' => 'Ma taille personnalisée 2'); return array_merge ($ tailles, $ custom_sizes); 

Un exemple concret de son fonctionnement et de son utilisation: gurde.com


Références

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

Suivant

Comment générer une galerie avec des tailles d'image personnalisées et ajouter du JavaScript pour zoomer sur les images et basculer entre elles (souris et clavier).