Sur plusieurs blogs, j’ai pu trouver ce que j’appellerai un « carrousel d’images« , permettant d’afficher l’image d’un billet, cliquable, avec sur celui-ci une partie grisée sur laquelle est écrit le titre de ce billet. C’est une façon visuelle de faire un lien vers un billet, et je crois que cela permet aux visiteurs d’un site de mieux appréhender le contenu qu’ils vont trouver derrière un lien. Au final, l’image associée à un lien est un élément supplémentaire de transparence quant à votre contenu, et donc d’honnêteté envers le visiteur, ce qui ne peut pas être mauvais pour votre site.

Comment réaliser ce carrousel, alors ?

Je vais vous donner la façon dont j’ai mis en place le mien, sans vous cacher que je me suis grandement inspiré (le mot est faible) de ce que j’ai trouvé ailleurs. Alors voilà.

Le carrousel se situant dans la sidebar, c’est là que l’on va mettre le code (attention aux guillemets, ils passent mal, donc repassez derrière le code afin de vérifier ceux-ci).

    <h2><b>Derniers</b> billets </h2>
    <ul>
    <?php query_posts('showposts=10'); ?>
    <?php while (have_posts()) : the_post(); ?>

    <?php $values = get_post_custom_values("Image"); // this grabs the image filename
    if (isset($values[0])) /* this checks to see if an image file exists */ { ?>

    <li>
    <a href="<?php the_permalink() ?>"><img src="<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" width="100%" title="<?php the_title(); ?>" /></a>
    <h3><a href="<?php the_permalink() ?>"><span><?php the_title(); ?></span></a></h3>

    </li>

    <?php } ?>

    <?php endwhile; ?>
    </ul>

Comme vous pouvez le voir, le carrousel n’affiche les liens que si le billet auquel ils sont associé comporte un attribut « Image » (via le is_isset(), qui teste si il y a une image. J’aurais pu mettre un truc qui prend une image par défaut si il n’y en a pas, mais je n’aime pas beaucoup mettre des images par défaut, c’est pas très joli). Cet attribut vient des champs personnalisés, comme vous pouvez le voir ci-dessous, par exemple :

Donc, pour résumer ce que va faire le code :

POUR les 10 derniers billets,

SI le billet comporte un attribut Image (le numéro 0),

Alors on affiche l’image, puis la partie grisée, et enfin le titre.

FIN SI

FIN POUR

Voilà.

Le CSS associé à ce code est très important également, voilà les lignes utilisées pour ce blog :

    li.sidebarPost{overflow: hidden; position: relative; margin-bottom: 10px;}

    img.sidebarThumb { width: 100%; }

    h3.sidebarTitle{position: absolute; display: block; width: 100%; background: url(images/overlay.png) 0 0 repeat; bottom: 2px;}

    h3.sidebarTitle span{display: block; padding: 5px; color: #fff;}

En gros, que fait ce CSS ?

Pour les images, c’est géré par la classe sidebarThumb, pour l’ombre, c’est géré par le sidebarTitle (l’ombre étant faite par le overlay.png), et pour le titre par dessus, c’est le span qui fait tout. Vous pouvez télécharger le overlay.png ici.

Voilà voilà : vous avez le code à mettre dans votre sidebar.php, vous avez celui à mettre dans votre style.css. Il ne vous manque rien.

Pour ma part, j’ai décidé de n’afficher que ce carrousel sur les billets (et non sur les pages d’archives ni de Home), ce qui fait que j’ai mis tout ça dans une condition telle que ci-dessous :

    <?php if( !(is_home() || is_archive()) ) { ?>

    <!– La vous mettez le code PHP que je vous ai donné ci-dessus –>

    <?php } ?>

Je me permets de vous rappeler que la doc des fonctions WP est là : is_home et is_archive.

Notez que vous auriez également pu mettre :

    <?php if( is_single() ) { ?>

    <!– La vous mettez le code PHP que je vous ai donné ci-dessus –>

    <?php } ?>

Si vous avez des questions, mettez-les en commentaire, je m’efforcerai de tenter d’y répondre.