Featured

Images à la une : Importance et mise en œuvre dans WordPress

Les images à la une, souvent appelées vignettes d’article, jouent un rôle essentiel dans le cadre de la présentation de contenu sur un site WordPress. Elles peuvent représenter un article, une page ou un type de contenu personnalisé. Leur utilisation permet non seulement d’embellir l’apparence de votre site, mais aussi d’attirer l’attention des visiteurs de manière efficace.

Mise en place du support pour les images à la une

Pour que les images à la une puissent être utilisées dans votre thème WordPress, vous devez d’abord déclarer le support pour cette fonctionnalité. Cela se fait simplement en ajoutant une ligne de code dans votre fichier functions.php :

php
add_theme_support( 'post-thumbnails' );

Une fois cette ligne ajoutée, l’interface pour ajouter une image à la une apparaîtra sur les écrans d’édition des articles et des pages dans l’administration de WordPress. En cas de non-visualisation, les utilisateurs peuvent activer cette fonction dans les options d’écran.

Définir une image à la une

Après avoir activé le support des images à la une, le méta-boîte d’image à la une sera disponible dans les écrans d’édition appropriés. Par défaut, cette méta-boîte est affichée dans la barre latérale des écrans d’édition d’article et de page.

Dans WordPress, vous pouvez aussi ajouter de nouvelles tailles d’images via la fonction add_image_size(), et programmer des tailles spécifiques pour les vignettes avec set_post_thumbnail_size(). Voici quelques fonctions indispensables :

• has_post_thumbnail() : Vérifie si l’article possède une image à la une.
• the_post_thumbnail() : Affiche l’image à la une.
• get_the_post_thumbnail() : Récupère l’image à la une.
• get_post_thumbnail_id() : Retourne l’ID de l’image à la une.

Tailles d’images disponibles

WordPress propose par défaut plusieurs tailles d’images : “Miniature”, “Moyenne”, “Grande” et “Taille de l’image originale”. Ces tailles peuvent être configurées dans le panneau des médias de l’administration WordPress sous Réglages > Médias. Dans le cas où vous souhaitez définir une taille personnalisée, vous pouvez passer un tableau avec vos dimensions :

php
the_post_thumbnail(); // Taille miniature par défaut
the_post_thumbnail('thumbnail'); // Taille miniature (150px x 150px max)
the_post_thumbnail('medium'); // Taille moyenne (300px x 300px max)
the_post_thumbnail('large'); // Grande taille (1024px x 1024px max)
the_post_thumbnail('full'); // Taille d'image originale (non modifiée)
the_post_thumbnail(array(100, 100)); // Autres résolutions (hauteur, largeur)

Ajouter des tailles d’images personnalisées

En plus des tailles d’images prédéfinies, vous pouvez créer des tailles d’images à la une personnalisées dans le fichier functions.php de votre thème. Voici un exemple :

php
if ( function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, true); // Dimensions par défaut de l'image à la une
add_image_size('category-thumb', 300, 9999); // 300 pixels de large (hauteur illimitée)
}

Définir la taille de sortie de l’image à la une

Vous pouvez utiliser set_post_thumbnail_size() pour définir la taille par défaut de l’image à la une. Ceci peut se faire en redimensionnant l’image proportionnellement ou en la rognant :

php
set_post_thumbnail_size(50, 50); // Redimensionnement sans distorsion
set_post_thumbnail_size(50, 50, true); // Rognage

Styliser les images à la une

Les images à la une sont attribuées à la classe wp-post-image, qui peut être stylisée via CSS. Vous pouvez également cibler des classes spécifiques selon la taille de l’image affichée :

css
img.wp-post-image { /* Styles pour l'image à la une */ }
img.attachment-thumbnail { /* Styles pour les miniatures */ }
img.attachment-medium { /* Styles pour les images moyennes */ }
img.attachment-large { /* Styles pour les grandes images */ }
img.attachment-full { /* Styles pour la taille originale */ }

De plus, vous pouvez ajouter des classes personnalisées lors de l’utilisation de the_post_thumbnail() :

php
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));

Exemples d’utilisation des images à la une

Utilisation par défaut

Voici comment vérifier si un article ou une page a une image à la une assignée :

php
if (has_post_thumbnail()) {
the_post_thumbnail();
}

Vous pouvez également assigner l’image à la une à une variable PHP pour une utilisation ultérieure :

php
if (has_post_thumbnail()) {
$featured_image = get_the_post_thumbnail();
}

Lier les images à la une aux permaliens

Il est possible de lier les miniatures aux permaliens des articles. Voici deux exemples :

Exemple 1 : Lier les vignettes d’article à leurs permaliens dans une boucle spécifique :

php
if (has_post_thumbnail()) {
the_post_thumbnail();
echo '<a href="' . get_permalink() . '">' . the_post_thumbnail() . '</a>';
}

Exemple 2 : Lier toutes les vignettes d’articles de votre site aux permaliens via le fichier functions.php :

php
add_filter('post_thumbnail_html', 'my_post_image_html', 10, 3);
function my_post_image_html($html, $post_id, $post_image_id) {
$html = '<a href="' . get_permalink($post_id) . '">' . $html . '</a>';
return $html;
}

Cet exemple doit être utilisé au sein de La Boucle pour lier la taille d’image “large” :

php
if (has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '">' . the_post_thumbnail('thumbnail') . '</a>';
}

Les images à la une sont un aspect vital du design et de la fonctionnalité dans WordPress. Elles enrichissent l’expérience utilisateur et peuvent avoir un impact significatif sur l’engagement. En employant correctement les images à la une, que ce soit par des tailles prédéfinies ou personnalisées, et en les intégrant efficacement dans votre thème, vous pouvez créer un site attrayant, informatif et dynamique qui capte l’attention de votre audience. De plus, grâce à un bon usage de CSS et de PHP, vous pouvez personnaliser l’apparence et le comportement de ces éléments pour qu’ils s’alignent parfaitement avec votre vision créative. Adopter cette flexibilité et ces meilleures pratiques vous aidera à maximiser l’impact visuel de vos contenus.