Créer un widget catégorie avec images

Après mon petit tuto sur « comment mettre des images en background de vos tags manuellement » , et après des heures de recherche, voici un bout de code, un widget qui permet de lister ses catégories, comme le fait le widget catégorie par défaut de wordpress. Ici, on ne vas pas afficher le nom de chaque catégorie mais son image.

Création d’un dossier image à la racine du site

Pour y parvenir, on doit créer un dossier images à la racine de son site, au même niveau que les dossiers css, js et tous vos fichiers php.

A l’intérieur on va y mettre des images, en leur donnant pour nom, le nom de chaque catégorie. Vous pouvez simplement les renommer au moment où vous les mettez dans le dossier. Si on a comme catégorie photo et video, voici mon dossier image:

Création du widget

Ensuite on va créer un widget dédié à nos catégories, tout simple sans options particulière (nombre à afficher, type de taxonomie etc)

Pour ca, je me suis pas cassé la tête j’ai repris un exemple de widget selon Pipin’s, Pour l’exemple j’ai placé ce code dans le fichier functions.php, il aurait pu l’être dans un plugin dédié.

Et voici la courte fonction que j’ai placé à l’intérieur de la fonction widget :

Celle ci nous ramène pour chaque catégorie, une image qui porte le même nom que cette catégorie, dans le dossier image crée précédemment.

 $cats = get_categories();
foreach ((array)$cats as $cat) {
$catdesc = $cat->category_description;
echo '<a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . get_bloginfo ('template_url') . '/images/' . $cat->name. '.jpg" alt="' . $cat->cat_name . '" class="front-img" /></a>';
}

Si vos images sont des PNG, on peut changer le jpg pour png dans le code.

Le widget en entier :

/*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

                                                $cats = get_categories();
foreach ((array)$cats as $cat) {
$catdesc = $cat->category_description;
echo '<a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . get_bloginfo ('template_url') . '/images/' . $cat->name. '.jpg" alt="' . $cat->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_categories_widget");'));

Cette solution peut ne pas convenir, dans le sens ou on a quand même besoin de se créer un dossier image, via son éditeur ou ftp, ce que refuserait un client évidemment.Le widget en lui meme est épuré, il ne contient aucune option d’affichage.Ici, on va dire qu’on a juste besoin d’automatiser l’ajout d’une image pour chaque catégorie dans un widget.

Améliorations

Voici le même bout de code modifié pour pouvoir afficher le titre et son image en dessous. Je mets ici tout le widget. Le titre en question est en fait la description que vous pouvez remplir via le backoffice dans l’onglet catégorie.

Voici une autre approche:

        $image_path = (TEMPLATEPATH);
        $image_url = get_bloginfo('stylesheet_directory');
        $cats = get_categories();
        $count = 1;
        foreach ((array) $cats as $cat) {
            $catdesc = attribute_escape(strip_tags($cat->category_description));
            $image = $cat->cat_name . '.jpg';
            if (file_exists($image_path . '/images/' . $image)) {
                $cat_img = '<div class="category-image" id="cat-image-' . $count . '"' . '><a href="' . get_category_link($cat) . '" title="' . $catdesc . '"><img class="image-for-category" src="' . $image_url . '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="' . $catdesc . '">' . $catdesc . '</a></p></div>' . "\n\n";
            } else {
                $cat_img = '<div class="category-image" id="cat-image-' . $count . '"' . '><a href="' . get_category_link($cat) . '" title="' . $cat->cat_name . '"><img class="image-for-category" src="' . $image_url . '/images/default-category-image.jpg' . '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="' . $catdesc . '">' . $cat->cat_name . '</a></p></div>' . "\n\n";
            }
            echo $cat_img;
            $count++;
        }

le code complet:

/*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
        $image_path = (TEMPLATEPATH);
        $image_url = get_bloginfo('stylesheet_directory');
        $cats = get_categories();
        $count = 1;
        foreach ((array) $cats as $cat) {
            $catdesc = attribute_escape(strip_tags($cat->category_description));
            $image = $cat->cat_name . '.jpg';
            if (file_exists($image_path . '/images/' . $image)) {
                $cat_img = '<div class="category-image" id="cat-image-' . $count . '"' . '><a href="' . get_category_link($cat) . '" title="' . $catdesc . '"><img class="image-for-category" src="' . $image_url . '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="' . $catdesc . '">' . $catdesc . '</a></p></div>' . "\n\n";
            } else {
                $cat_img = '<div class="category-image" id="cat-image-' . $count . '"' . '><a href="' . get_category_link($cat) . '" title="' . $cat->cat_name . '"><img class="image-for-category" src="' . $image_url . '/images/default-category-image.jpg' . '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="' . $catdesc . '">' . $cat->cat_name . '</a></p></div>' . "\n\n";
            }
            echo $cat_img;
            $count++;
        }

        ?>

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

Et voici le rendu :

Dans ce code ci, on place avec une condition une image par défaut au cas ou le dossier images serait vide. Pensez donc à placer une image appelée « default-category-image.jpg«

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