Les “images à la une”, également connues sous le nom de “post thumbnails”, ou “featured images”, sont une fonctionnalité populaire dans WordPress. Aujourd’hui, la plupart des thèmes intègrent des vignettes pour afficher les articles dans les pages. Dans cet article, nous vous montrerons comment ajouter une image à la une dans un post.
Guide pour les débutants sur les images à la une dans WordPress
Un moyen facile de savoir si votre thème supporte les images de fond est de consulter l’éditeur de messages. Il suffit de créer un nouveau message et de faire défiler un la colonne de droite avec les options et de voir s’il y a une zone appelée “Image mise en avant” sur le côté droit de l’écran.
Comment ajouter une image mise en avant dans WordPress ?
Pour ajouter une image dans un article WordPress, il suffit de cliquer sur le lien “Définir l’image mise en avant” à l’intérieur de la boite illustrée par la capture d’écran au paragraphe précédent.
Cela ouvrira le WordPress Media Uploader. Vous pouvez l’utiliser pour télécharger une image depuis votre ordinateur ou utiliser une image existante de votre bibliothèque. Une fois l’image sélectionnée, il suffit de cliquer sur le bouton “Définir l’image mise en avant”.
L’image apparaîtra dans la boite Image mise en avant, comme ceci :
Il est important de noter que l’image peut apparaître un peu différemment dans votre thème. Tout dépend de la manière dont votre thème traite les images présentées.
Certains thèmes de magazine utilisent des vignettes plus petites à côté des résumés de posts sur la page principale, et une version plus grande sur la vue de posts uniques.
En fonction des paramètres définis par le développeur de votre thème, l’image de votre article apparaîtra automatiquement avec vos articles. Cependant, si vous souhaitez modifier la façon dont votre thème gère les images et les vignettes des articles, continuez votre lecture.
NB : Toutes les explications ci-dessous nécessitent des connaissances en matière de codage.
Intégrer les images mises en avant dans le développement d’un thème WordPress
Malgré que la majeure partie des thèmes viennent avec une image à la une, il est bien de savoir comment gérer l’utilisation des images à la une dans un thème. Soit parce que vous créez vous-même votre propre thème, soit parce que vous cherchez à ajouter des modèles de pages différents dans votre thème.
Si vous êtes à l’aise avec l’édition de thèmes et que vous connaissez un peu le CSS, vous pouvez le faire vous-même.
Pour ajouter la prise en charge des images mises en avant dans un thème WordPress, vous devez ajouter cette ligne de code dans le fichier functions.php de votre thème :
add_theme_support( 'post-thumbnails' );Ce code permettra de prendre en charge les images mises en avant de vos articles et pages. Vous pouvez maintenant éditer la page ou vous souhaitez ajouter une vignette mise en avant (single.php, category.php, archive.php, etc…) et ajouter le code suivant :
<?php the_post_thumbnail(); ?>Les fichiers dans lesquels vous ajoutez le code ci-dessus varient en fonction de votre thème. Vous voudrez ajouter le code à l’intérieur de votre boucle de messages.
Le code ci-dessus est la fonction de base dont vous avez besoin pour afficher images mises en avant dans votre thème. Pour définir la taille des images que vous téléchargez, vous devez ajouter cette ligne de code à votre fichier functions.php :
set_post_thumbnail_size( 50, 50);Les paramètres pour set_post_thumbnail_size sont dans cet ordre : largeur, hauteur.
Vous pouvez également définir des tailles d’image supplémentaires à utiliser avec la fonction the_post_thumbnail(). Pour cela, ajoutez par exemple à votre fichier functions.php :
add_image_size( 'articles-thumbnail', 300, 150 );Dans cet exemple, nous avons ajouté une nouvelle taille d’image appelée “articles-thumbnail” avec 300px de large et 150px de hauteur. Pour utiliser cette taille d’image dans notre thème, nous devrons encore l’ajouter dans le fichier de thème approprié. Consultez notre guide sur l’ajout de tailles d’images supplémentaires dans WordPress pour plus de détails.
Si vous avez déjà téléchargé des images mises en avant, mais qu’elles apparaissent toujours dans une mauvaise taille, vous devez alors régénérer les vignettes et les tailles d’image pour les anciens articles.
Vous trouverez ci-dessous un exemple de la fonction d’image mise en avant avec une taille d’image spécifique (celle définie ci-dessus).
<?php the_post_thumbnail( 'articles-thumbnail' ); ?>Vous pouvez bien évidemment modifier la fonction à votre guise, selon les dimensions dont vous avez besoin. Vous pouvez également ajouter autant de dimensions que vous en avez besoin.
