Plus : ajouter une "image à la une" à un article

Ajouter une illustration à un post permet de l’illustrer à différents endroits. Page d’entrée, liste, page de post. Cette fonction est présente depuis wordpress 3.0, mais doit être activée et configurée. Démo.

Précédent | 14/20 | Suivant

L’opération se fait en trois temps :
- On déclare l’option dans le fichier functions.php
- On insère le code permettant d’afficher l’image dans la loop wordpress
- On place les images dans les posts

1) Fichier "functions.php"

Comme pour les menu, il est nécessaire de déclarer l’emploi des "images à la une" dans le fichier functions.php.

Voici le code à placer :

<?php
add_theme_support( 'post-thumbnails' );
?>

2) Placer le code dans la loop wordpress

Dans la loop où vous en avez besoin, vous placerez le code minimal suivant. Généralement avant le titre du post, mais vous êtes libre évidemment de le placer où vous voulez.

<?php the_post_thumbnail('); ?>

3) Ajouter des images aux posts

De retour dans l’interface d’administration de wordpress, on constate qu’un bloc est ajouté à la gestion des articles :

En cliquant sur le lien, on suit la procédure d’upload mais on veillera bien à choisir l’option "utiliser comme image à la une".

Sur la page dont la loop a été modifiée, on peut visualiser le résultat :

Aller plus loin

La taille de l’image est celle de l’image uploadée, par défaut. Mais il est possible de forcer la taille de l’image en ajoutant un peu de code.

Deux opérations :
- déclarer un nouveau format d’image
- l’utiliser dans la boucle

1) Déclarer un format d’image
On retourne pour ça dans le fichier "functions.php" pour ajouter cette ligne

<?php
add_image_size( 'carre home', 400, 400, true );
?>

Dans l’ordre, on donne un nom à ce format, une taille en largeur et en hauteur.
Le dernier argument est true ou false, est important :
- True signale si Wordpress doit générer une image à cette taille précise en coupant (crop) dans l’image au besoin. Cette méthode nous intéresse car en plus de faire des images à taille identique, elle force Wordpress a créer une image à cette taille exacte.
- False réduit l’image en proportion dans la zone spécifiée à l’affichage. C’est ce qu’on appelle aussi le "box resizing", l’image se réduit jusqu’à rentrer dans l’espace défini.

2) Updater le code dans la loop
On signale l’utilisation du format dans la loop simplement en ajoutant un argument dans la fonction :

<?php the_post_thumbnail('carre home'); ?>

On peut ajouter d’autres tailles dans le fichier functions.php selon ses besoins, et les demander dans la loop. Simple et efficace.

Forum

  • Plus : ajouter une "image à la une" à un article par claire , 26 mars 2013

    Merci pour ce post !
    J’ai une question : comment rendre l’aimage à la une cliquable ?

    Merci !