Une image vaut mille mots --- à moins qu'elle n'ait été redimensionnée de manière inappropriée, auquel cas c'est un peu gênant. WordPress contient des outils puissants pour redimensionner les images et les vignettes, mais vous devez savoir comment les gérer.
Lisez la suite pour tout ce que vous devez savoir sur la taille des images dans WordPress et la gestion des images en vedette.
Ce message contient du code PHP pour WordPress. Vous voudrez peut-être lire notre cours intensif PHP gratuit avant de tenter toute modification sur votre thème.
Si vous n'êtes pas à l'aise pour ouvrir vos fichiers de thème, ou si vous ne le souhaitez pas 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 à la place.
https://en-gb.wordpress.org/plugins/my-custom-functions/
Dans le tableau de bord d'administration de WordPress, vous connaissez probablement déjà les Paramètres> Médias.
Ce sont les trois tailles d'image par défaut, que WordPress appelle :vignette , moyen , et grand . La taille de la vignette a un réglage spécial pour être recadrée à la dimension exacte que vous spécifiez ici. Il n'est pas nécessaire que ce soit une dimension de rapport 1:1 --- vous pouvez la définir comme bon vous semble.
Lorsque le recadrage est activé, les images seront mises à l'échelle et centrées, puis tout ce qui ne rentre pas sera supprimé.
Les paramètres 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 pas créées.
Lorsque vous téléchargez une nouvelle image, l'original est enregistré et disponible pour être inséré dans une publication en taille réelle, et les autres tailles d'image enregistrées sont automatiquement créées.
Les trois tailles définies par défaut dans WordPress peuvent ne pas suffire, c'est pourquoi les thèmes et les plugins sont autorisés à ajouter leurs propres tailles personnalisées. Si vous êtes à l'aise pour éditer vos fichiers de thème, vous pouvez également le faire.
Ouvrez le répertoire du thème et recherchez le functions.php fichier. Ajoutez le code suivant, un pour chaque taille d'image que vous souhaitez définir :
add_image_size( 'my-thumbnail', 400, 200, true); Chaque nouvelle taille d'image nécessite un nom, des dimensions de largeur et de hauteur, et si les images doivent ou non être recadrées exactement à cette taille (true ou faux ). Pour les parties structurelles d'un thème ou d'un widget, vous souhaiterez généralement recadrer afin de ne pas casser la mise en page.
Vous pourriez être tenté de créer de nombreuses tailles d'image personnalisées, mais vous devez le faire avec parcimonie. 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 nous l'avez uniquement destinée avec l'image sélectionnée.
Donc, si vous avez sept tailles d'image personnalisées, plus les trois par défaut, chaque image que vous téléchargez générera 10 petites copies d'elle-même. Si vous considérez qu'un seul message peut contenir 10 images, cela représente 100 fichiers créés uniquement pour ce message.
Vous ne pouvez pas créer une taille d'image personnalisée et spécifier qu'elle ne doit être utilisée que pour vos images en vedette.
De plus, même si vous n'utilisez plus une certaine taille personnalisée et que vous avez supprimé ce code (ou changé de thème), les anciennes images resteront sur le serveur pour toujours. WordPress ne supprimera pas les images inutilisées pour vous. Sur un site aussi ancien ou aussi gros que MakeUseOf, cela signifie que quelques 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.
https://wordpress.org/plugins/media-cleaner/#description
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. La seule chose que vous y verrez est Vignette, Moyenne, Grande et Pleine taille (en fonction de la taille de l'image d'origine, car elle ne sera pas mise à l'échelle).
Si vous voulez que votre taille personnalisée soit également sur la liste, nous aurons besoin d'un peu plus de code. Encore une fois, ajoutez à votre functions.php fichier :
fonction image_sizes_to_mediapicker( $default_sizes ) {
return array_merge( $default_sizes, array(
'my-thumbnail' => __( '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édias. Nous fusionnons le tableau de liste de tailles d'origine avec toutes les nouvelles tailles que nous voulons également répertorier. Remplacez "my-thumbnail" et "My Thumbnail Size" par votre taille personnalisée et le nom convivial lisible par l'homme sous lequel vous souhaitez qu'il soit répertorié.
Les images en vedette sont 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 dans l'en-tête, sur la page d'accueil ou sur la barre latérale. Cependant, en termes de dimensionnement des images, elles ne sont pas traitées différemment des images normales.
Pour chaque taille que vous avez définie, toute image téléchargée sera dupliquée et redimensionnée, y compris l'image sélectionnée.
Si vous ne voyez pas l'option Définir l'image sélectionnée sur votre écran d'édition de publication, il est possible que votre thème ne prenne pas en charge la fonctionnalité. Vous pouvez forcer la prise en charge en ajoutant la ligne suivante au functions.php de votre thème fichier, mais je vous suggère fortement de trouver un nouveau thème à la place.
Le manque de support pour quelque chose d'aussi basique que les images présentées serait révélateur d'un code obsolète ailleurs.
add_theme_support('post-thumbnails'); Pour utiliser l'image sélectionnée dans votre propre thème ou plugins, utilisez la fonction _post_thumbnail() pour générer 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 (dans ce cas "my-thumbnail") et tous les attributs que vous souhaitez transmettre, comme une classe CSS personnalisée.
Si vous préférez simplement obtenir l'URL réelle de l'image sélectionnée plutôt que le code HTML requis, essayez ceci à la place (obtenir la taille moyenne de l'image dans cet exemple) :
$thumbnail =wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0]; Chaque fois que vous modifiez les dimensions de votre image par défaut ou créez une taille d'image personnalisée, cela ne s'appliquera qu'aux nouveau téléchargements. Toutes vos images existantes restent dans les dimensions d'origine.
Si vous souhaitez redimensionner des images précédemment téléchargées, vous aurez besoin d'un plugin. AJAX Thumbnail Rebuild vous permet de sélectionner les tailles à régénérer et traitera lentement votre archive.
https://wordpress.org/plugins/ajax-thumbnail-rebuild/
Il existe cependant certaines limites et certains pièges que vous devez connaître.
Alors que les images présentées peuvent être redimensionnées automatiquement, aucun plugin ne peut réécrire le contenu des publications. Par exemple, si vous avez ajouté une image à une publication en large taille (qui pouvait être de 500px à l'époque), en changeant la définition de large ne changera pas la taille de l'image dans le message. Il restera à 500 px, sauf si vous modifiez le message et réinsérez la même image à la nouvelle taille.
Comme mentionné, si vous avez beaucoup de tailles d'image, vous allez générer beaucoup d'images. Heureusement, la reconstruction des miniatures vous permet de limiter cela aux images sélectionnées uniquement . Mais encore une fois, rappelez-vous que cela ne s'applique qu'à votre image précédente. 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.
Ce serait le moment idéal pour apprendre également la différence entre JPG et PNG afin de savoir utiliser le format optimal à l'avenir.
Envie de peaufiner votre thème WordPress ? L'utilisation des images, des couleurs et du positionnement des éléments dans votre thème est principalement définie par CSS et HTML. Nous vous recommandons donc de consulter ces didacticiels pas à pas pour apprendre CSS et HTML.
Et si les thèmes vous intéressent, jetez un œil à ces thèmes WordPress sympas pour un portfolio de photographie.
Votre site WordPress plante-t-il trop souvent ? Payez-vous trop cher ? Passez à un service d'hébergement bien connu comme InMotion Hosting (réduction spéciale MakeUseOf avec ce lien) ou Bluehost (réduction spéciale MakeUseOf avec ce lien).