slDesign

IX – Intégrer des widgets

Il est possible d’intégrer un ou plusieurs widgets au sein de votre theme ; l’objet de cet article n’étant pas la création d’un widget, je vais en créer un très simple…. J’ai simplement repris le plugin text qui existe déjà dans WordPress. Vous trouverez la liste des widgets existants dans le fichier ‘wp-includes/default-widgets.php’.

Commencez à créer un dossier ‘inc/’ dans votre thème et ensuite créez un fichier ‘widgets.php’ ; nous allons y éditer le code de notre widget.

Etape 1 – Création de la class

Un Widget est un objet, nous allons donc créer un nouvel objet qui est une extension de la class WP_Widget

class sld_text_widget extends WP_Widget{
	//code ici
}

Etape 2 – Initialiser le Widget

Cette étape nous permet d’avoir le Widget initialisé dans la liste des widgets disponibles. Cette opération est réalisée par le biais du constructeur (‘sld_text_widget’).

	/**
	 * Initialise et donne les informations sur le Widget
	 */
	function sld_text_widget(){
		$widget_ops = array('classname' => 'author', 'description' => __( "Show HTML or simple Text","sldesign") );
      	$this->WP_Widget(false, __('slDesign | Text','sldesign'), $widget_ops);
	}

Etape 3 – Initialiser les variables du widget

Ces variables sont celles utilisées par notre widget ; on y retrouve la variable “title” et notre variable “text”

	/**
	 * Initialise les variables du Widget
	 */
	function widget($args, $instance){
		extract($args);
		$title = apply_filters( 'widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base);
		$text = apply_filters( 'widget_text', $instance['text'], $instance );
		echo $before_widget;
		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
<?php echo $instance['filter'] ? wpautop($text) : $text; ?>

<?php
		echo $after_widget;
	}

Etape 4 – Gestion des modifications du widget

Lors de la saisie du contenu, cette fonction va nous permettre d’enregistrer les modifications saisies.

	/**
	 * Mise à jour des informations
	 */
	function update($new_instance, $old_instance){
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		if ( current_user_can('unfiltered_html') )
			$instance['text'] =  $new_instance['text'];
		else
			$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
		$instance['filter'] = isset($new_instance['filter']);
		return $instance;
	}

Etape 5 – Formulaire du Widget

Ce formulaire nous permet de renseigner les informations

/**
	 * Formulaire utilisé pour les paramétres du widget
	*/
	function form($instance){
	$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
		$title = strip_tags($instance['title']);
		$text = format_to_edit($instance['text']);
?>
		<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 esc_attr($title); ?>" /></p>

		<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

		<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> /> <label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php

	}

Etape 5 – Initialiser l’ensemble

Reste a ajouter une action permettant d’initialiser le tout

//Initialisation du widget
function sldWidgetInit(){
	register_widget('sld_text_widget');
}

add_action('widgets_init','sldWidgetInit');

Ce fichier est ensuite appelé via notre fichier functions.php

//Chargement des widgets du thème
 if(WP_VERSION >= 2.8) require_once(TEMPLATEPATH.'/lib/widgets.php');

Notre widget est maintenant créé et nous pouvons l’inclure dans notre sidebar

Code complet du fichier widgets.php

<?php
class sld_text_widget extends WP_Widget{

	/**
	 * Initialise et donne les informations sur le Widget
	 */
	function sld_text_widget(){
		$widget_ops = array('classname' => 'author', 'description' => __( "Show HTML or simple Text","sldesign") );
      	$this->WP_Widget(false, __('slDesign | Text','sldesign'), $widget_ops);
	}

	/**
	 * Initialise les variables du Widget
	 */
	function widget($args, $instance){
		extract($args);
		$title = apply_filters( 'widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base);
		$text = apply_filters( 'widget_text', $instance['text'], $instance );
		echo $before_widget;
		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
			<div class="textwidget"><?php echo $instance['filter'] ? wpautop($text) : $text; ?></div>
		<?php
		echo $after_widget;
	}

	/**
	 * Mise à jour des informations
	 */
	function update($new_instance, $old_instance){
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		if ( current_user_can('unfiltered_html') )
			$instance['text'] =  $new_instance['text'];
		else
			$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
		$instance['filter'] = isset($new_instance['filter']);
		return $instance;
	}

	/**
	 * Formulaire utilisé pour les paramétres du widget
	*/
	function form($instance){
	$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
		$title = strip_tags($instance['title']);
		$text = format_to_edit($instance['text']);
?>
		<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 esc_attr($title); ?>" /></p>

		<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

		<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> /> <label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php

	}
}

//Initialisation du widget
function sldWidgetInit(){
	register_widget('sld_text_widget');
}

add_action('widgets_init','sldWidgetInit');
?>