Créer un widget tags avec images

En terminant mon précédent tuto sur comment afficher une liste d’images à la place de l’habituelle liste de catégories, dans la sidebar, j’ai répliqué le code pour voir si ca marchait avec les tags et oui!!ca marche!!

Donc je partage ici ce widget qui fonctionne de la même manière que le widget catégorie..

On doit créer au préalable un dossier images, à la racine du site, puis y mettre des images dont le nom correspond aux noms de vos tags.

Dans le backoffice, sous l’onglet article on a la possibilité de créer des mots clés, notamment pour renforcer la classification de nos articles.

Une fois nos mot clés crées, on va vouloir les afficher sur le site, via nos widgets.C’est le widget « tags cloud« , qui peut ne pas convenir à tout le monde.

Au mieux, si l’on transforme le css, on peut obtenir par défaut une liste, plutôt qu’un nuage. En jouant avec le filtre wp_tag_cloud(args) également on peut modifier ce rendu. Mais aucune possibilité de lier des images à nos mots clés

On va donc reprendre l’exemple de notre widget catégorie, modifier quelque peu le code, pour obtenir une liste d’image, plutôt que les mots clés eux mêmes..

Pour le rendu, chacun fera à sa sauce ..

Par exemple, on peut jouer sur la classe .widget image :

.widget img {
max-width: 250px;
max-height: 100px;
}

Le rendu peut changer radicalement dans votre sidebar: d’une liste d’image on peut en faire une grille:

Voici le code de mon widget (inséré dans functions.php) : on retrouve le code habituel de création de widget, auquel je n’ai rajouté aucune option (j’ai repris puis épuré un widget de pipin’s ), avec la fonction get_tags() pour me ramener tous mes tags, ici aussi on va chercher dans notre dossier dédié, l’image dont le nom correspond exactement à celui d’un tag..


class list_tags_widget extends WP_Widget {

    /** constructor -- name this the same as the class above */
    function list_tags_widget() {
        parent::WP_Widget(false, $name = 'Voyage Tags');
    }

    /** @see WP_Widget::widget -- do not rename this */
    function widget($args, $instance) {
        extract($args);
        $title = apply_filters('widget_title', $instance['title']); // the widget title
        ?>
        <?php echo $before_widget; ?>
        <?php if ($title) {
            echo $before_title . $title . $after_title;
        } ?>
        <?php

        
         $tags = get_tags();
foreach ((array)$tags as $tag) {
$tagdesc = $tag->tag_description;
echo '<a href="' . get_tag_link($tag) . '" title="'. strip_tags($tagdesc) .'"><img src="' . get_bloginfo ('template_url') . '/images/' . $tag->name. '.jpg" alt="' . $tag->cat_name . '" class="front-img" /></a>';
}
        ?>
        <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update -- do not rename this */
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);

        return $instance;
    }

    /** @see WP_Widget::form -- do not rename this */
    function form($instance) {

        $title = esc_attr($instance['title']);
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>


        <?php
    }

}

// end class list_categories_widget
add_action('widgets_init', create_function('', 'return register_widget("list_tags_widget");'));

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