Rajouter des images à vos widgets

Dans le précédent tuto sur les widgets catégories et tags, j’ai montré un moyen pour afficher ses widgets et les listes habituelles de liens qu’elles contiennent,avec des images, pour rendre le site plus attrayant : voici un rendu possible :

Un widget catégories qui m’affiche toutes mes catégories sous forme d’images, et en dessous, un deuxième widget qui m’affiche mes tags(mots clés) avec leur images associées. Le principe en gros est de boucler sur toutes les catégories ou tags, et d’afficher pour chaque valeur une image contenant le même nom que la catégorie ou le tag..Aujourd’hui il existe une foule de plugins qui permettent d’arriver à tel résultant sans effort. On va plutôt voir comment y parvenir sans plugin.

Ici on va voir comment rendre la chose encore plus facile pour un client. Cette fois on ne crée pas de dossier à la racine du blog, ce qui se révèle finalement assez contraignant pour quelqu’un qui ne s’y connait pas.

wp_upload_dir

On va donc cibler le dossier image habituel de wordpress, grâce notamment à la fonction :
wp_upload_dir, avec laquelle on peut accéder au dossier image : voici ce qu’elle nous renvoie :

* 'path' - base directory and sub directory or full path to upload directory.
* 'url' - base url and sub directory or absolute URL to upload directory.
* 'subdir' - sub directory if uploads use year/month folders option is on.
* 'basedir' - path without subdir.
* 'baseurl' - URL path without subdir.
* 'error' - set to false.

Plus précisément, ça correspond à ça:

Array (
        [path] => C:\path\to\wordpress\wp-content\uploads10
        [url] => http://example.com/wp-content/uploads/2010/05
        [subdir] => /2010/05
        [basedir] => C:\path\to\wordpress\wp-content\uploads
        [baseurl] => http://example.com/wp-content/uploads
        [error] =>
    )

Le code

En regardant de plus près on voit que l’ [url] nous renvoie directement vers le dossier image courant. Par rapport au tuto précédent, je vais donc simplement remplacer le chemin vers le dossier image.Voici le code:

        $uploads = wp_upload_dir();
$upload_path = $uploads['url'];
$cats = get_categories();
foreach ((array)$cats as $cat) {
$catdesc = $cat->category_description;
echo'<ul><li>';
echo '<a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . $upload_path .'/' .$cat->cat_name. '.jpg" alt="' . $cat->cat_name . '" class="front-img" /></a><span class="category-image-description">' . $catdesc . '</span></br>';
echo '</li></ul>';

}

Le code du widget en entier, à insérer dans functions.php :

/*Widget Category*/ 

class list_categories_widget extends WP_Widget {

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

    /** @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
        $uploads = wp_upload_dir();
$upload_path = $uploads['url'];
$cats = get_categories();
foreach ((array)$cats as $cat) {
$catdesc = $cat->category_description;
echo'<ul><li>';
echo '<a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . $upload_path .'/' .$cat->cat_name. '.jpg" alt="' . $cat->cat_name . '" class="front-img" /></a><span class="category-image-description">' . $catdesc . '</span></br>';
echo '</li></ul>';

}
        ?>

        <?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  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_categories_widget");'));

Le client n’aura plus qu’a tester le widget apparu en back office:

S’il veut afficher ses catégories avec des images, il lui faudra enregistrer des images au même nom que ses catégories, et placer le widget via le backoffice.

On va voir maintenant pour la partie tag.

Des images pour vos tags:

Je teste exactement le même code en changeant juste les variables…Yes!! ca marche!!

Le code

Voici le code pour le widget tag : ici encore, un widget tag apparaît dans le backoffice, le client n’a plus qu’a enregistrer des images au même nom que ses mots clés.

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

        $uploads = wp_upload_dir();
$upload_path = $uploads['url'];

         $tags = get_tags();
foreach ((array)$tags as $tag) {
$tagdesc = $tag->description;
echo'<ul><li class="widget-li">';
echo '<a href="' . get_tag_link($tag) . '" title="'. strip_tags($tagdesc) .'"><img src="' .  $upload_path . '/' . $tag->name . '.jpg" alt="' . $tag->name . '" class="front-img" /></a><span class="tag-image-description">' . $tagdesc . '</span>';
echo'</ul></li>';

}
        ?>
        <?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");'));

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