Créer un widget pour afficher des horaires

Aujourd’hui on va voir comment créer un widget  dans un site wordpress pour afficher des horaires.

L’idée est de permettre à l’utilisateur de pouvoir modifier les horaires à sa guise, le code pourra bien sur etre modifié selon les besoins et l’apparence finale dépendra du css appliqué.Voici un exemple de rendu final:

widget-horaire

Le code peut être largement amélioré ou factorisé,  l’idée ici étant de revoir la base de  la création d’un widget :

La classe du widget

On commence tout d’abord par créer notre classe widget, qui hérite de la classe globale WP_Widget


class Horaires extends WP_Widget {

tout le code ici

}

Le constructeur du widget

A l’intérieur de la classe on va commencer par y mettre le constructeur : on définit ici un id pour le widget, un nom et sa description.

//Constructeur
    function Horaires()
    {
        parent::WP_Widget(false, $name = 'Horaires', array('name' => 'Horaires', 'description' => 'Affichage des horaires'));
    }

le widget coté front end

A la suite on code notre function pour le front end : ici pas de boucle, je détaille au maximum.On crée un titre, puis des inputs pour chaque jour de la semaine, puis un petit lien pour rediriger vers une page annexe.Ici le lien est mis en dur mais on pourrait tout à fait le rendre customisable, ou imaginer autre chose à la place.

 function widget($args, $instance)
    {
      
            //Récupération des paramètres
            extract($args);
            $title = apply_filters('widget_title', $instance['title']);
            
            $horaires_lundi = $instance['horaires_lundi'];
             $horaires_mardi = $instance['horaires_mardi'];
             $horaires_mercredi = $instance['horaires_mercredi'];
             $horaires_jeudi = $instance['horaires_jeudi'];
             $horaires_vendredi = $instance['horaires_vendredi'];
             $horaires_samedi = $instance['horaires_samedi'];
             $horaires_dimanche = $instance['horaires_dimanche'];
            
            //Affichage
            echo $before_widget;
            if ($title)
                echo $before_title . $title .$after_title;
            else
                echo $before_title . $title   . $after_title;

            echo '<ul>';
      
            echo'<li>Lundi <span class="jours">' . $horaires_lundi . '</span></li>';
            echo'<li>Mardi <span class="jours">' . $horaires_mardi .'</span></li>';
            echo'<li>Mercredi <span class="jours">' . $horaires_mercredi .'</span></li>';
            echo'<li>Jeudi <span class="jours">' . $horaires_jeudi .'</span></li>';
            echo'<li>Vendredi <span class="jours">' . $horaires_vendredi . '</span></li>';
            echo'<li>Samedi <span class="jours">' . $horaires_samedi . '</span></li>';
            echo'<li>Dimanche <span class="jours">' . $horaires_dimanche . '</span></li>';
            echo '</ul>';
            echo '<a href="http://www.lien.com" class="widget_horaires_more">En savoir +</a>';
           
            echo $after_widget;

        
    }

Le Widget coté backend

Ensuite même chose pour le backend, on crée notre formulaire en récupérant les variables créees.Les jours de la semaine sont mis en dur mais on pourrait tout à fait imaginer d’autres données à la place, et on pourrait créer autant de nouvelles variables pour les rendre elles aussi customisables.

function form($instance)
    {
        $title = esc_attr($instance['title']);
        $horaires_lundi = esc_attr($instance['horaires_lundi']);
        $horaires_mardi = esc_attr($instance['horaires_mardi']);
        $horaires_mercredi = esc_attr($instance['horaires_mercredi']);
        $horaires_jeudi = esc_attr($instance['horaires_jeudi']);
        $horaires_vendredi = esc_attr($instance['horaires_vendredi']);
        $horaires_samedi = esc_attr($instance['horaires_samedi']);
        $horaires_dimanche = esc_attr($instance['horaires_dimanche']);
       
    ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">
                <?php echo 'Titre:'; ?>
                <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; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_lundi'); ?>">
                <?php echo 'Lundi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_lundi'); ?>" name="<?php echo $this->get_field_name('horaires_lundi'); ?>" type="text" value="<?php echo $horaires_lundi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_mardi'); ?>">
                <?php echo 'Mardi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_mardi'); ?>" name="<?php echo $this->get_field_name('horaires_mardi'); ?>" type="text" value="<?php echo $horaires_mardi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_mercredi'); ?>">
                <?php echo 'Mercredi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_mercredi'); ?>" name="<?php echo $this->get_field_name('horaires_mercredi'); ?>" type="text" value="<?php echo $horaires_mercredi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_jeudi'); ?>">
                <?php echo 'jeudi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_jeudi'); ?>" name="<?php echo $this->get_field_name('horaires_jeudi'); ?>" type="text" value="<?php echo $horaires_jeudi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_vendredi'); ?>">
                <?php echo 'Vendredi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_vendredi'); ?>" name="<?php echo $this->get_field_name('horaires_vendredi'); ?>" type="text" value="<?php echo $horaires_vendredi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_samedi'); ?>">
                <?php echo 'Samedi:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_samedi'); ?>" name="<?php echo $this->get_field_name('horaires_samedi'); ?>" type="text" value="<?php echo $horaires_samedi; ?>" />
            </label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('horaires_dimanche'); ?>">
                <?php echo 'Dimanche:'; ?>
                <input class="widefat" id="<?php echo $this->get_field_id('horaires_dimanche'); ?>" name="<?php echo $this->get_field_name('horaires_dimanche'); ?>" type="text" value="<?php echo $horaires_dimanche; ?>" />
            </label>
        </p>
       
    <?php
    }

Enregistrer les données

Enfin une fonction save pour enregistrer les données insérées

 function update($new_instance, $old_instance)
    {
        $instance = $old_instance;
 
        //Récupération des paramètres envoyés
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['horaires_lundi'] = $new_instance['horaires_lundi'];
        $instance['horaires_mardi'] = $new_instance['horaires_mardi'];
        $instance['horaires_mercredi'] = $new_instance['horaires_mercredi'];
        $instance['horaires_jeudi'] = $new_instance['horaires_jeudi'];
        $instance['horaires_vendredi'] = $new_instance['horaires_vendredi'];
        $instance['horaires_samedi'] = $new_instance['horaires_samedi'];
        $instance['horaires_dimanche'] = $new_instance['horaires_dimanche'];
        

        return $instance;
    }

Enregistrer le widget

Voila, on peut refermer notre classe.A la suite, on ajoute enfin la fonction register pour enregistrer notre widget.

function register_white_bear_horaires_widget() {
    register_widget( 'Horaires' );
}
add_action('widgets_init', 'register_horaires_widget');

 

En backoffice, l’utilisateur pourra donc dans l’onglet Apparence/Widget retrouver un « widget horaires » tout simple qui lui permettra d’afficher ses horaires dans sa sidebar par exemple, ou son footer

widget-horaire-bakc

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.