Des images en background pour vos tags

Dans ce petit tuto, on va voir comment on peut manuellement ajouter des images à ses widgets, en ciblant un widget en particulier , en l’occurrence les tags ou mots clés.

Il nous faut éditer le fichier sidebar.php, qui sera appelé avec l’habituel get_sidebar();.

Dans le fichier sidebar.php codé en dur, on retrouve souvent des blocs aside les uns en dessous des autres. On peut y ajouter ou modifier le bloc concernant les mots clés, pour leur ajouter une image.

<aside class="widget">     
            <?php
            $tags = get_tags();

            if ($tags) {
            ?><ul class="tags"><?
                    foreach ($tags as $tag) {

                    echo '<li class="tagli"><a href="' . get_tag_link( $tag->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $tag->name ) . '" ' . '>' . $tag->name.'</a></li>';

                    }
                    ?></ul><?
                    }
                    ?>
    </aside>

Ce n’est pas très académique, mais c’est pour l’exemple.Je crée mes propres classes pour ce widget, notamment la classe tagli.
Puis dans mon css, je vais simplement appliquer un background à ces li:

/*sidebar*/
.tagli{display:block;padding:10px;margin: 5px;text-align:center;}
.tagli:nth-child(1) {background: url('https://www.virtual-trip.fr/wp-content/uploads/2014/08/mexique33.png')no-repeat center center;background-size:100%}
.tagli:nth-child(2) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/12/nepal30-e1417994039337.jpg')no-repeat center center;background-size:100%}
.tagli:nth-child(3) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/07/IMG_5812.jpg')no-repeat center center;background-size:100%}
.tagli:nth-child(4) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/07/IMGP0496.jpg')no-repeat center center;background-size:100%}
.tagli:nth-child(5) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/07/IMG_1430.jpg')no-repeat center center;background-size:100%}
.tagli:nth-child(6) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/07/GOPR1446.jpg')no-repeat center center;background-size:100%}
.tagli:nth-child(7) {background:url('https://www.virtual-trip.fr/wp-content/uploads/2014/07/IMG_09911-e1405009105822.jpg')no-repeat center center;background-size:100%}
.tagli:hover{opacity:0.5;color:#000}
.tags{margin: 0 0 1.5em 0em;}
.tagli a{list-style-type:none;text-decoration:none;text-transform:uppercase;color:#fff}

Encore une fois c’est ici un exemple, codé en dur donc absolument pas optimal, ni à concevoir pour un client. C’est utile et pratique pour un site perso. Mais le rendu est nettement plus attrayant qu’une simple liste!!

dans un prochain tuto on verra comment ajouter des images de manière dynamique, et dans l’idéal laisser le choix de l’image à l’utilisateur…à suivre donc.

05/02/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress