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.
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); //…
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.
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.
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..
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
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).