Le guide complet des vignettes et des tailles d’image en vedette dans WordPress
Une image vaut mille mots – à moins qu’elle ne soit redimensionnée de manière inappropriée, auquel cas c’est un peu gênant. WordPress inclut des outils puissants pour redimensionner les images et les vignettes, mais vous devez savoir quoi en faire.
Lisez la suite pour tout ce que vous devez savoir sur la taille des images et la gestion des images en vedette dans WordPress.
Modifier PHP dans les fichiers WordPress
Cet article contient du code PHP pour WordPress. Avant de tenter toute modification à votre thème, vous voudrez peut-être lire notre cours intensif PHP gratuit.
Si vous n’aimez pas ouvrir les fichiers de thème, ou si vous ne voulez pas ouvrir les fichiers de thème car ils seront perdus avec les futures mises à jour de thème, vous pouvez utiliser le plug-in Mes fonctions personnalisées pour ajouter des blocs de code.
Notions de base sur la taille des images WordPress
Dans le tableau de bord d’administration de WordPress, vous savez probablement déjà d’installation > médias.
Ce sont les trois tailles d’image par défaut que WordPress appelle : Vignette, Modéréet grosLa taille des miniatures a un réglage spécial pour recadrer à la taille exacte que vous spécifiez ici. Il n’est pas nécessaire que ce soit une taille d’échelle 1: 1 – vous pouvez la définir comme vous le souhaitez.
Lorsque le recadrage est activé, l’image sera mise à l’échelle et centrée, puis tout ce qui ne rentre pas sera supprimé.
Les paramètres moyen et grand fonctionnent légèrement différemment car vous spécifierez maximum Dimensions de largeur et de hauteur, l’image sera réduite en conséquence. Si l’image est trop petite, ces tailles d’image ne seront pas créées.
Faire une vidéo du jour
Lorsque vous téléchargez une nouvelle image, l’image d’origine est enregistrée et peut être insérée dans la publication en taille réelle, et d’autres tailles d’image enregistrées sont automatiquement créées.
Ajouter une taille d’image personnalisée dans WordPress
Les trois tailles définies par défaut dans WordPress peuvent ne pas suffire, c’est pourquoi les thèmes et plugins sont autorisés à ajouter leurs propres tailles personnalisées. Si vous aimez éditer des fichiers de thème, vous pouvez également le faire.
Ouvrez le répertoire du thème et recherchez fonction.php document. Ajoutez le code suivant, un pour chaque taille d’image que vous souhaitez définir :
add_image_size(‘Ma miniature’, 400, 200, true);
Chaque nouvelle taille d’image nécessite un nom, des dimensions de largeur et de hauteur, et si l’image doit être recadrée à cette taille (réel ou alors Incorrect). Pour les parties structurelles d’un thème ou d’un widget, vous souhaitez généralement recadrer afin qu’il ne casse pas la mise en page.
Vous pourriez être tenté de créer de nombreuses tailles d’image personnalisées, mais vous devez le faire avec prudence. Chaque taille d’image que vous définissez sera générée pour chaque image que vous téléchargez, même si vous avez uniquement l’intention de l’utiliser avec nous avec l’image en vedette.
Donc, si vous avez sept tailles d’image personnalisées, plus trois tailles par défaut, chaque image que vous téléchargez générera 10 petites copies d’elle-même. Si vous pensez qu’il peut y avoir 10 images intégrées dans un seul message, 100 fichiers sont créés uniquement pour ce message.
Vous ne pouvez pas créer une taille d’image personnalisée et spécifier qu’elle s’applique uniquement à votre image en vedette.
De plus, même si vous n’utilisez plus de taille personnalisée et supprimez ce code (ou modifiez le thème), l’ancienne image restera sur le serveur pour toujours. WordPress ne supprimera pas les images inutilisées pour vous. Sur un site ancien ou volumineux comme MakeUseOf, cela signifie que des centaines de gigaoctets sont gaspillés pour stocker des images qui ne sont plus utilisées.
Pour les petits sites, le plug-in Media Cleaner peut être utile, mais exécutez toujours une sauvegarde complète en premier.
Taille d’image personnalisée pour le contenu de la publication
Par défaut, les tailles d’image personnalisées n’apparaissent pas dans la liste déroulante lors de l’insertion d’une image dans une publication. Les seules choses que vous verrez sont des vignettes, moyennes, grandes et pleine taille (selon la taille de l’image d’origine car elle ne sera pas agrandie).
Si vous souhaitez que votre taille personnalisée apparaisse également dans la liste, nous aurons besoin de plus de code.Encore une fois, ajoutez à votre fonction.php document:
function image_sizes_to_mediapicker( $default_sizes ) {
return array_merge($default_sizes, array(
‘Ma vignette’ => __( ‘Taille de ma vignette’ ),
));
}
add_filter(‘image_size_names_choose’, ‘image_sizes_to_mediapicker’);
Cela fonctionne en filtrant la liste des sélecteurs de média. Nous fusionnons le tableau de liste de tailles d’origine avec toutes les nouvelles tailles que nous souhaitons également répertorier. Remplacez « my-thumbnail » et « My Thumbnail Size » par votre taille personnalisée et le nom convivial que vous souhaitez voir répertorié comme lisible par l’homme.
Options d’image en vedette WordPress
Une image sélectionnée est une image unique associée à une publication, mais pas nécessairement insérée dans le contenu de la publication. Ils sont souvent utilisés par les thèmes d’en-tête, de page d’accueil ou de barre latérale. Cependant, en termes de taille d’image, elles ne sont pas traitées différemment des images normales.
Pour chaque taille que vous définissez, toutes les images téléchargées seront copiées et redimensionnées, y compris les images en vedette.
Si vous ne voyez pas les options ci-dessous Définir l’image sélectionnée Votre thème peut ne pas prendre en charge cette fonctionnalité sur votre écran d’édition de publication.Vous pouvez forcer le support en ajoutant la ligne suivante à votre thème fonction.php documentation, mais je recommande fortement de trouver un nouveau thème.
Le manque de support pour quelque chose d’aussi basique qu’une image sélectionnée indiquerait que le code ailleurs est obsolète.
add_theme_support(‘post-miniatures’);
Pour utiliser une image sélectionnée dans votre propre thème ou plugin, utilisez la fonction _post_thumbnail() pour afficher la balise d’image :
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 (« my-thumbnail » dans ce cas), et toutes les propriétés que vous transmettez, comme une classe CSS personnalisée.
Si vous préférez simplement obtenir l’URL réelle de l’image sélectionnée au lieu du code HTML souhaité, essayez cette méthode (dans cet exemple, pour obtenir une image de taille moyenne) :
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘moyen’);
echo $ vignette[0];
Régénérer les vignettes WordPress
Chaque fois que vous modifiez la taille d’image par défaut ou créez une taille d’image personnalisée, cela ne fonctionne que pour Nouveau télécharger. Toutes vos images existantes conservent leur taille d’origine.
Si vous souhaitez redimensionner des images précédemment téléchargées, vous avez besoin d’un plugin. AJAX Thumbnail Rebuild vous permet de choisir la taille à reconstruire et traitera lentement votre archive.
Cependant, il existe certaines limites et certains pièges dont vous devez être conscient.
Alors que les images présentées peuvent être automatiquement redimensionnées, il n’y a pas de plugin pour réécrire le contenu des publications.Par exemple, si vous ajoutez une image à votre message gros taille (peut-être 500px à l’époque), changez la définition gros Ne change pas la taille de l’image dans les messages. Il restera à 500 pixels sauf si vous modifiez le message et réinsérez la même image à la nouvelle taille.
Comme mentionné précédemment, si vous avez plusieurs tailles d’image, vous générerez de nombreuses images.Heureusement, la reconstruction des vignettes vous permet de la limiter à Images sélectionnées uniquementMais encore une fois, gardez à l’esprit que cela ne s’applique qu’à vos images précédentes. Tous les futurs téléchargements d’images seront gérés par WordPress, ce qui signifie que toutes les tailles d’image seront créées pour tout le contenu.
C’est aussi le bon moment pour apprendre la différence entre JPG et PNG afin de connaître le meilleur format à utiliser à l’avenir.
Faites passer votre site WordPress au niveau supérieur
Vous souhaitez peaufiner votre thème WordPress ? L’utilisation des images, des couleurs et du placement des éléments dans votre thème est principalement définie par CSS et HTML. Nous vous recommandons donc d’apprendre le CSS et le HTML en consultant ces didacticiels pas à pas.
Si vous êtes intéressé par les thèmes, consultez ces thèmes WordPress sympas pour un portfolio de photographies.
Votre site WordPress plante-t-il fréquemment ? Payez-vous trop cher ? Passez à un service d’hébergement réputé comme InMotion Hosting (réduction spéciale MakeUseOf sur ce lien) ou Bluehost (réduction spéciale MakeUseOf sur ce lien).
A propos de l’auteur
