Tout savoir sur la gestion des miniatures (thumbnails) avec WordPress

Depuis la version 2.9 de WordPress, les miniatures d’articles ont fait leur apparition dans l’éditeur, sous la forme d’un module longtemps appelé « Image à la Une » et aujourd’hui nommé « Image mise en avant ».

Ces miniatures nécessitent que le thème prenne en charge cette fonctionnalité. C’est automatique avec un thème à blocs depuis WordPress 5.9. Avec un thème classique, si l’image mise en avant n’apparaît pas dans l’éditeur, je vous propose de suivre ce tutoriel pour rendre compatible votre thème et bénéficier ainsi d’une fonctionnalité ô combien utile.

La plupart des blogs actuels affichent une miniature pour accrocher le lecteur à côté du titre et de la description d’un article. C’est le cas sur WP channel et sur un nombre incalculable de blogs.

Activer la prise en charge des miniatures d’articles

Cette étape ne concerne que les thèmes classiques. Pour activer la prise en charge des miniatures, rendez-vous dans Apparence > Éditeur de fichiers des thèmes. Vous pouvez également passer par votre client FTP favori pour éditer les fichiers du thème qui se trouvent dans le dossier /wp-content/themes/NOM_DU_THEME. Vous serez alors en mesure d’effectuer une sauvegarde au préalable. Si votre thème reçoit des mises à jour, faites plutôt la modification dans un thème enfant : sinon, la prochaine mise à jour l’effacera.

Editez ensuite le fichier functions.php et rajoutez les lignes de code suivantes :

function wpc_theme_setup() {
	add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'wpc_theme_setup' );

Ce bout de code active le module Image mise en avant dans l’éditeur de WordPress : il apparaît dans la barre latérale de droite, onglet Article, sous la forme d’un bouton Définir l’image mise en avant.

Afficher les miniatures d’articles

Maintenant que vous disposez du module d’ajout de miniatures, il nous faut indiquer où nous souhaitons les voir apparaître sur le site. Typiquement, il nous faut intervenir dans la boucle de WordPress.

Pour rappel, la boucle ou loop affiche vos articles dans les différentes pages du site : accueil, catégorie, tags, etc.

Avec un thème classique

Pour ne pas rentrer dans la technique, localisez tout d’abord la ligne qui appelle le contenu ou l’extrait de votre article dans le fichier index.php :

<?php the_content(); ?>

Ou

<?php the_excerpt(); ?>

Placez ensuite cette ligne de code avant l’une ou l’autre de ces 2 fonctions :

<?php
if ( has_post_thumbnail() ) { // Vérifies qu'une miniature est associée à l'article.
  the_post_thumbnail();
}
?>

N’oubliez pas de sauvegarder le fichier en question puis réitérez l’opération pour l’ensemble des fichiers qui affichent la boucle (category.php, home.php si présent, etc.).

Avec un thème à blocs

Pas de code ici : c’est le bloc Image mise en avant qui affiche la miniature. Si votre thème ne l’affiche pas déjà dans vos listes d’articles, ouvrez Apparence > Éditeur, puis Modèles, et choisissez le modèle concerné (par exemple Page d’accueil du blog ou Toutes les archives). Dans la Boucle de requête, insérez le bloc Image mise en avant dans le bloc Modèle de publication, au-dessus du titre par exemple. Dans les réglages du bloc, l’option Résolution permet de choisir la taille d’image affichée.

Utiliser différentes tailles de miniatures

Différentes tailles de miniatures existent. En réalité, il faut savoir que les miniatures d’articles peuvent servir à beaucoup de choses : pensez l’outil comme étant un module où l’utilisateur va indiquer une image.

La fonction d’affichage que nous venons de mettre dans le code peut donc être placée n’importe où, d’autant plus que des paramètres de taille existent.

the_post_thumbnail();                    // Size "post-thumbnail" if the theme defines it, else the original image
the_post_thumbnail( 'thumbnail' );       // Thumbnail: 150 x 150 px, cropped (default settings)
the_post_thumbnail( 'medium' );          // Medium: 300 x 300 px max
the_post_thumbnail( 'medium_large' );    // 768 px wide max
the_post_thumbnail( 'large' );           // Large: 1024 x 1024 px max
the_post_thumbnail( 'full' );            // Original image
the_post_thumbnail( array( 100, 100 ) ); // Smallest existing size that fits, displayed at 100 x 100 px max

Comme vous pouvez le constater, les tailles Miniature, Moyenne et Grande se basent sur les paramètres définis dans Réglages > Médias, rubriques Taille des miniatures, Taille moyenne et Grande taille ; les valeurs indiquées en commentaire sont celles par défaut. Sans paramètre, la fonction affiche l’image d’origine, sauf si votre thème a défini une taille post-thumbnail avec set_post_thumbnail_size(). Enfin, le dernier exemple ne crée aucun fichier : WordPress choisit la plus petite taille existante qui convient et l’affiche à 100 × 100 pixels au maximum.

Pour une taille vraiment sur mesure, déclarez-la dans le fichier functions.php avec la fonction add_image_size(). Ici, une taille de 640 × 360 pixels recadrée, que la seconde fonction ajoute aussi à l’option Résolution du bloc Image mise en avant :

function wpc_register_image_sizes() {
	add_image_size( 'wpc-card', 640, 360, true ); // 640 x 360 px, cropped.
}
add_action( 'after_setup_theme', 'wpc_register_image_sizes' );

// Offers the size in the Resolution setting of the Featured Image block.
function wpc_image_size_names( $sizes ) {
	$sizes['wpc-card'] = __( 'Card', 'wpchannel' );
	return $sizes;
}
add_filter( 'image_size_names_choose', 'wpc_image_size_names' );

Affichez-la ensuite avec the_post_thumbnail( 'wpc-card' );. WordPress ne crée cette taille que pour les images envoyées après sa déclaration : pour les images déjà présentes dans la médiathèque, régénérez les miniatures.

N.B : attention toutefois à ne pas créer des tailles à la chaîne sans prendre soin de vérifier l’espace de stockage fourni par votre hébergeur. Chaque taille crée un fichier image de plus sur votre serveur.

Que faire pour récupérer les anciennes miniatures ?

Si comme moi vous avez utilisé pendant des années des champs personnalisés pour indiquer l’URL de vos miniatures d’articles (avec le script timthumb.php par exemple), le plus durable est de les convertir en images mises en avant. L’extension Get the Image de Justin Tadlock n’est plus une piste : elle n’a pas été mise à jour depuis novembre 2017. Quant à timthumb.php, son auteur a cessé de le maintenir en 2014, après une faille de sécurité majeure : retirez-le de votre thème s’il y figure encore.

Si WP-CLI est disponible sur votre hébergement, ce script associe à chaque article l’image de la médiathèque dont l’adresse figure dans le champ personnalisé. Enregistrez-le dans un fichier wpc-featured-from-meta.php :

<?php
/**
 * Sets the featured image of each post from an old custom field holding an image URL.
 *
 * Dry run: wp eval-file wpc-featured-from-meta.php thumbnail
 * Apply:   wp eval-file wpc-featured-from-meta.php thumbnail apply
 */

defined( 'WP_CLI' ) || exit;

function wpc_featured_from_meta( $meta_key, $apply ) {
	$post_ids = get_posts(
		array(
			'post_type'      => 'post',
			'post_status'    => 'any',
			'posts_per_page' => -1,
			'fields'         => 'ids',
			'meta_key'       => $meta_key,
		)
	);

	foreach ( $post_ids as $post_id ) {
		if ( has_post_thumbnail( $post_id ) ) {
			continue;
		}

		$url           = trim( (string) get_post_meta( $post_id, $meta_key, true ) );
		$attachment_id = attachment_url_to_postid( $url );

		if ( ! $attachment_id ) {
			WP_CLI::warning( sprintf( 'Post %d: no Media Library file matches %s', $post_id, $url ) );
			continue;
		}

		if ( $apply ) {
			set_post_thumbnail( $post_id, $attachment_id );
		}

		WP_CLI::log( sprintf( 'Post %d: featured image %d%s', $post_id, $attachment_id, $apply ? '' : ' (dry run)' ) );
	}
}

wpc_featured_from_meta( $args[0] ?? 'thumbnail', 'apply' === ( $args[1] ?? '' ) );

Lancez-le une première fois sans apply : il affiche ce qu’il ferait, sans rien modifier. Après une sauvegarde de votre base de données, relancez-le avec apply. Remplacez thumbnail par le nom de votre champ personnalisé :

wp eval-file wpc-featured-from-meta.php thumbnail
wp eval-file wpc-featured-from-meta.php thumbnail apply

Le script ignore les articles qui ont déjà une image mise en avant et conserve vos champs personnalisés. Il signale les adresses qu’il ne retrouve pas dans la médiathèque, comme une image hébergée sur un autre site ou l’adresse d’une taille réduite : traitez ces articles à la main, puis supprimez le fichier du script.

Il est recommandé de toujours utiliser un thème WordPress basé sur la fonction de miniature fournie en natif. De cette manière, vous bénéficiez d’une plus grande stabilité pour les versions à venir et une meilleure compatibilité avec les plugins qui utilisent de plus en plus cette fonctionnalité. Vous pouvez également lire ce tutoriel sur la manière de récupérer la première image d’un article via PHP, évitant ainsi d’avoir recours aux miniatures.

Pour les articles sans image à la une, apprenez à définir une miniature d’article par défaut.