Custom Widget

Custom Widget

Voici un exemple de code basique pour la création d’un widget personnalisé.

Vous pouvez faire un nouveau fichier php du style (widget-contact.php)

Il faut également charger ce fichier dans le function.php de votre theme avec cette ligne par exemple:

require get_template_directory() . '/dossier_widget/widget-contact.php';

Il faut bien sur changer (ctrl+f pour rechercher ou ctrl+r pour remplacer)

  • DEMO_TITRE
  • text-domain
<?php

function register_DEMO_TITRE_widget() {
    register_widget( 'DEMO_TITRE_widget' );
}
add_action( 'widgets_init', 'register_DEMO_TITRE_widget' );

class DEMO_TITRE_widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'text-domain', // Base ID
            __('Mon site - DEMO TITRE', 'text-domain'), // Name
            array( 'description' => __( 'Mon site - DEMO TITRE', 'text-domain' ), ) // Args
        );
    }

    /**
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        $titre = apply_filters( 'widget_contact', $instance['titre'] );
        $tel = apply_filters( 'widget_contact', $instance['tel'] );
        $mail = apply_filters( 'widget_contact', $instance['mail'] );
        $adresse = apply_filters( 'widget_contact', $instance['adresse'] );

        echo $args['before_widget']; ?>

        <h3><?php echo $titre ?></h3>
        <ul id="infos-contact">
            <li><i class="fa fa-phone"></i><?php echo $tel ?></li>
            <li><i class="fa fa-envelope-o"></i><?php echo $mail ?></li>
            <li><i class="fa fa-home"></i><?php echo $adresse ?></li>
        </ul>

        <?php echo $args['after_widget'];
    }

    /**
     * @param array $instance
     */
    public function form( $instance ) {
        $titre      = ( isset( $instance[ 'titre' ] )) ? $instance["titre"] : "";
        $tel        = ( isset( $instance[ 'tel' ] )) ? $instance["tel"] : "";
        $mail       = ( isset( $instance[ 'mail' ] )) ? $instance["mail"] : "";
        $adresse    = ( isset( $instance[ 'adresse' ] )) ? $instance["adresse"] : "";
        ?>

        <!--Titre-->
        <p><label for="<?php echo $this->get_field_id('titre'); ?>"><?php _e('Titre:', 'text-domain'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('titre'); ?>" name="<?php echo $this->get_field_name('titre'); ?>" type="text" value="<?php echo $titre; ?>" /></p>

        <!--Telephone-->
        <p><label for="<?php echo $this->get_field_id('tel'); ?>"><?php _e('Téléphone:', 'text-domain'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('tel'); ?>" name="<?php echo $this->get_field_name('tel'); ?>" type="text" value="<?php echo $tel; ?>" /></p>

        <!--Courriel-->
        <p><label for="<?php echo $this->get_field_id('mail'); ?>"><?php _e('Courriel:', 'text-domain'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('mail'); ?>" name="<?php echo $this->get_field_name('mail'); ?>" type="text" value="<?php echo $mail; ?>" /></p>

        <!--Adresse-->
        <p><label for="<?php echo $this->get_field_id('adresse'); ?>"><?php _e('Adresse:', 'text-domain'); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('adresse'); ?>" name="<?php echo $this->get_field_name('adresse'); ?>"><?php echo $adresse; ?></textarea></p>
    <?php
    }

    /**
     * @param array $new_instance
     * @param array $old_instance
     * @return array
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['titre'] = ( ! empty( $new_instance['titre'] ) ) ? strip_tags( $new_instance['titre'] ) : '';
        $instance['tel'] = ( ! empty( $new_instance['tel'] ) ) ? strip_tags( $new_instance['tel'] ) : '';
        $instance['mail'] = ( ! empty( $new_instance['mail'] ) ) ? strip_tags( $new_instance['mail'] ) : '';
        $instance['adresse'] = ( ! empty( $new_instance['adresse'] ) ) ? strip_tags( $new_instance['adresse'] ) : '';

        return $instance;
    }

}

 

 

2 réactions au sujet de « Custom Widget »

  1. Salut Nicolas Le Breton
    J’ai découvert ton blog un peu par hasard en faisant des recherches sur la création d’un plugin portfolio. Je me suis mis à la réalisation d’un site à partir du framework Bootstrap 3 et je dois dire que la rapidité de mise en œuvre m’a bluffé. N’étant pas programmeur de formation, ce framework apporte pas mal de facilité pour moi.
    Je me suis mis dans l’idée de transposer ce site html en WordPress, puis de l’agrémenter de fonctionnalités, à l’image de ce que l’on peu voir sur des sites comme Themeforest pour ne citer que lui.
    J’ai constaté que ton site était aussi basé sur Bootstrap et donc ma requête est la suivante. N’envisages-tu pas de proposer un tuto complet sur la création d’un theme WordPress un jour ?
    Bonne continuation

    1. En ce moment je ne prends plus trop le temps de faire des articles / recherche sur WordPress. Je te conseil de regarder du coté des frameworks WordPress, il y a des outils assez bien fait pour créer son thème. Je te souhaite bon courage.

Laisser un commentaire

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