Le guide complet sur les vignettes et les tailles d'image présentées dans WordPress

Une image vaut mille mots - sauf si elle a été redimensionnée de manière inappropriée, auquel cas elle vaut cent mots négatifs. Ok, c’est peut-être une version moins connue d’un vieil adage ou quelque chose que je viens d’inventer, mais l’essentiel est: WordPress est très puissant en matière de vignettes et de tailles d’image. Vous devez simplement savoir comment les gérer. Lisez tout ce que vous devez savoir sur la taille des images dans WordPress et sur la gestion des images en vedette..

Remarque: cet article est assez volumineux avec PHP - rien de bien compliqué, mais vous voudrez peut-être lire notre cours intensif sur PHP avant d'essayer de modifier votre thème..

Basics First

Dans le tableau de bord de l'administrateur WordPress, vous connaissez probablement déjà Réglages -> Médias.

Voici les trois tailles d'image par défaut, appelées par WordPress: la vignette, moyen, et grand. La taille de la vignette a un paramètre spécial pour être recadré à la dimension exacte spécifiée ici. Cela ne doit pas nécessairement être une dimension 1: 1 - vous pouvez le définir comme vous le souhaitez - mais les images seront centrées et rognées, ce qui signifie que toute partie de votre image qui ne correspond pas à ces dimensions après avoir été réduite sera tout simplement coupée..

Les réglages moyen et grand fonctionnent légèrement différemment, en ce sens que vous spécifiez maximum dimensions pour la largeur et la hauteur, et les images seront réduites en conséquence. Si l'image est trop petite, ces tailles d'image ne seront tout simplement pas créées. Lorsque vous téléchargez une nouvelle image, l'original est enregistré et disponible pour être inséré dans un message en taille réelle. Les autres tailles d'image enregistrées sont automatiquement créées..

Ces trois tailles d'image, ainsi que l'original taille réelle, sont les seuls disponibles lorsque vous modifiez un message et que vous insérez un média, j'ai donc tendance à définir grand comme largeur absolue de mon thème pour les pages pleine largeur et les messages, et moyen comme largeur de la colonne de contenu typique.

Faire plus de tailles

Lorsque vous modifiez un thème ou créez des widgets, les trois tailles définies dans vos paramètres de média risquent de ne pas suffire. Je laisse toujours ceux qui sont seuls pour le contenu - puis je définis de nouvelles tailles d’image dans functions.php fichier, comme ceci:

add_image_size ('ma-vignette', 400, 200, vrai);

Chaque nouvelle taille d’image nécessite un nom, des dimensions de largeur et de hauteur et indique si les images doivent être rognées à cette taille. (vrai ou faux). Pour les parties structurelles d'un thème ou d'un widget, vous souhaiterez généralement le rogner pour ne pas endommager la mise en page..

L'image sélectionnée

Depuis la version 2.9, WordPress nous a permis de définir une image spécifique comme “l'image sélectionnée” pour un post. Cette image n'est pas insérée dans le corps du message (à moins que vous ne l'insériez vous-même), mais peut être utilisée structurellement dans votre thème - en tant que vignette à côté du titre du message ou peut-être dans l'en-tête lorsque vous affichez ce message. Ne pas inclure une image sélectionnée semble simplement paresseux compte tenu du nombre de thèmes et de widgets qui les utilisent. Collez cet extrait dans functions.php pour vous rappeler lors de l'enregistrement d'un message si vous avez oublié d'en définir un (source):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); function wpds_check_thumbnail ($ post_id) // remplace tout type de publication personnalisé par if (get_post_type ($ post_id)! = 'post') return; if (! has_post_thumbnail ($ post_id)) // définit un transitoire pour afficher un message administrateur à l'utilisateur set_transient ("has_post_thumbnail", "no"); // décolle cette fonction pour qu'elle ne se boucle pas à l'infini remove_action ('save_post', 'wpds_check_thumbnail'); // met à jour le message défini en brouillon wp_update_post (array ('ID' => $ post_id, 'post_status' => 'brouillon')); add_action ('save_post', 'wpds_check_thumbnail');  else delete_transient ("has_post_thumbnail");  function wpds_thumbnail_error () // vérifie si le transitoire est défini et affiche le message d'erreur if (get_transient ("has_post_thumbnail") == "no") echo "
Vous devez sélectionner Image en vedette. Votre message est enregistré, mais il ne peut pas être publié.
"; delete_transient (" has_post_thumbnail ");

WordPress fournit une fonction pratique pour obtenir l’image sélectionnée et l’utiliser dans les thèmes suivants:

the_post_thumbnail ('my-thumbnail', array ('class' => 'my_post_thumbnail_css_class'));

La fonction prend 2 paramètres: la taille nommée que vous recherchez et tous les attributs que vous souhaitez transmettre, comme une classe CSS personnalisée. (note: vous ne pouvez pas remplacer l'attribut alt). Si vous modifiez un très vieux thème, vous devrez peut-être aussi ajouter ce qui suit à votre functions.php:

add_theme_support ('post-vignettes');

Si vous préférez simplement obtenir l'URL réelle de l'image sélectionnée plutôt que de générer le code HTML requis, essayez plutôt ceci (obtenir la taille d'image moyenne dans cet exemple):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'moyen'); echo $ thumbnail [0];

Régénération des images

Chaque fois que vous modifiez les tailles d'image par défaut ou créez une nouvelle définition de taille, cela ne s'applique qu'aux Nouveau uploads. Toutes vos images existantes restent dans les dimensions d'origine. N'ayez crainte, il existe un excellent plug-in qui permet de parcourir vos messages et de régénérer ces nouvelles tailles d'image pour vous. AJAX Thumbnail Rebuild vous permet de sélectionner les tailles à régénérer et travaillera lentement dans vos archives. Cela ne redimensionnera pas les images insérées dans les publications - celles-ci sont corrigées au point d'insertion. La régénération des images rendra la nouvelle taille disponible pour une utilisation dans vos thèmes ou dans les publications futures, mais vous ne pouvez pas modifier automatiquement la taille des images existantes déjà insérées..

Vous trouverez deux inconvénients à faire de nouvelles images. Premièrement, même si la taille de l'image que vous avez créée n'est utilisée que pour l'image sélectionnée dans le cadre d'un thème, une nouvelle version de chaque image que vous avez téléchargée sera créée - pas seulement l'image sélectionnée. Ceci est une limitation de WordPress; une image en vedette est comme toute autre et vous ne pouvez pas cibler spécifiquement avec le add_image_size () une fonction. Heureusement, le plugin Thumbnail Rebuild vous permet de limiter cela à seulement des images en vedette à partir de l’archive - mais tous les futurs ajouts d’images seront gérés par WordPress, ce qui créera la nouvelle taille d’image pour tout. Ce serait le bon moment pour apprendre aussi la différence entre JPG et PNG. Savoir quand utiliser quel format de fichier: PNG contre JPG, DOC contre PDF, MP3 contre FLAC. Savoir quand utiliser quel format de fichier: PNG contre JPG, DOC vs PDF, MP3 vs FLAC Connaissez-vous les différences entre JPG et PNG, ou MP3 et FLAC? Si vous ne savez pas quels formats de fichier utiliser, laissez-nous vous guider à travers leurs distinctions. Lisez plus pour savoir comment utiliser le format optimal à l'avenir.

Deuxièmement, même si vous n'utilisez plus une certaine taille, ils resteront sur le serveur - WordPress ne supprimera pas les images inutilisées pour vous. Sur un site comme MakeUseOf contenant des centaines de milliers d'images, cela signifie quelques giga-octets gaspillés. Pour les sites plus petits, le plug-in Image Cleanup vous aidera en numérisant et en vous donnant la possibilité de supprimer; mais les sites plus importants devront apprendre une ligne de commande et fu regex (voir notre guide rapide pourdémarrer avec la ligne de commande Linux Guide rapide pour commencer à utiliser la ligne de commande Linux Guide rapide pour commencer à utiliser la ligne de commande Linux Vous pouvez faire beaucoup de choses étonnantes avec des commandes sous Linux et ce n’est vraiment pas difficile à apprendre. Lire la suite ). Commencez toujours par créer une sauvegarde complète, au cas où elle supprime quelque chose qu’elle ne devrait pas avoir..

Mon thème ne change pas

Vous avez donc modifié un thème avec vos nouvelles tailles d'image et avez correctement régénéré toutes les images existantes existantes, mais la taille correcte n'apparaît toujours pas? Vous avez probablement déjà appliqué du CSS à l’image ou alors elle entoure DIV. Utilisez le mode de débogage de votre navigateur. Résolution des problèmes de site Web avec les outils de développement Chrome ou Firebug. Résolution de problèmes de site Web avec les outils de développement Chrome ou Firebug. Si vous avez suivi mes didacticiels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne le savez pas comment. pour les réparer. Face à un morceau de code non fonctionnel, il est très difficile de… Lire la suite pour trouver le CSS incriminé et peaufiner en conséquence. Et rappelez-vous, vous ne pouvez redimensionner que si l'image source est suffisamment grande - WordPress et le plug-in Générer des vignettes ne pourront pas redimensionner les images en raison de la perte de qualité.

WordPress a presque 11 ans. Le fait que ce soit une des rares applications Web maintenue en vie depuis si longtemps et non remplacée témoigne de sa puissance et de sa souplesse. Des fonctionnalités telles que les miniatures de publication sont maintenant omniprésentes sur le Web et, à son crédit, WordPress a toujours suivi les tendances en matière de conception. Remarquez que Ghost a bonne mine Wordpress Killer? Bienvenue sur Ghost (et comment l'installer sur un Raspberry Pi) Wordpress Killer? Bienvenue sur Ghost (et comment l'installer sur un Raspberry Pi) En savoir plus .

Des problèmes avec les images en vedette? Postez dans les commentaires et je verrai si je peux vous aider.

En savoir plus sur: Wordpress.