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:

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

14/11/2016 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress