Comment-créer facilement un Widget WordPress

La création d’un Widget WordPress 3.x a été très simplifié comparé aux versions précédentes à 2.8. Dans la suite de cet article je vais essayer de vous montrer comment réaliser un widget WordPress qui affichera un flux Rss.

1ère étape : La création du plugin

La première chose à faire est de créer un plugin qui contiendra notre widget.

Pour cela allez sur le répertoire /wp-content/plugins/ et créer un nouveau répertoire que je nommerais « bass-flux-rss » (vous êtes libre de choisir le votre).

Ensuite créer dedans un nouveau fichier nommé « fluxrss.php »

Commencez par l’éditer en renseignant les information suivantes :

<?php 
/**
 * Plugin Name: Flux RSS
 * Plugin URI: https://www.dootech.fr/creer-un-widget-wordpress
 * Description: Un Widget qui permet de récupérer la liste des news d'un flux RSS
 * Author: Bassem LAJMI
 * Author URI: http://www.bass-m.me
 */
?>

A ce stade, si vous allez dans Extensions, vous pouvez constater que le nouveau plugin est déjà visible, en revanche il ne contient aucun code.

Etape 2 : L’édition du Widget

Continuons en ajoutant le code suivant :

add_action('widgets_init', 'flux_rss_init'); 
function flux_rss_init() { 
    register_widget('flux_rss_widget'); 
}

Créons ensuite une nouvelle classe portant le même nom que celui indiqué dans register_widget() en l’occurrence ici c’est « flux_rss_widget » qui contiendra 4 fonctions principales la première est widget(), update(), form() et la dernière du même nom que la classe (ici flux_rss_widget()).

 Etape 3 : Fonctions du Widget

 Pour initialiser le Widget nouvellement créé 

function flux_rss_widget(){
$options = array(
'classname' => 'flux-rss-widget',
'description' => 'Ce widget permet de récupérer la liste des news/articles en fonction d\'un flux RSS donné.'
); //
$this-&gt;WP_widget('flux-rss-widget', 'Widget Flux RSS', $options);
}

Pour l’affichage du Widget dans le frontend.  Vous pouvez consulter la documentation officielle de WordPress pour la fonction fecth_feed.

function widget($args, $vars) {
		extract($args);
		echo $before_widget;
			echo $before_title.$vars['titre'].$after_title;

			include_once( ABSPATH . WPINC . '/feed.php' );

			// Get a SimplePie feed object from the specified feed source.
			$rss = fetch_feed( $vars['url_rss'] );
			if ( ! is_wp_error( $rss ) ) : // Checks that the object is created correctly

			    // Figure out how many total items there are, but limit it to 5. 
			    $maxitems = $rss->get_item_quantity( 5 ); 

			    // Build an array of all the items, starting with element 0 (first element).
			    $rss_items = $rss->get_items( 0, $maxitems );

			endif;
			?>

			<ul>
			    <?php if ( $maxitems == 0 ) : ?>
			        <li><?php _e( 'No items', 'my-text-domain' ); ?></li>
			    <?php else : ?>
			        <?php // Loop through each feed item and display each item as a hyperlink. ?>
			        <?php foreach ( $rss_items as $item ) : ?>
			            <li>
			                <a href="<?php echo esc_url( $item->get_permalink() ); ?>" target="_blank" 
			                    title="<?php printf( __( 'Posted %s', 'my-text-domain' ), $item->get_date('j F Y | g:i a') ); ?>">
			                    <?php echo esc_html( $item->get_title() ); ?>
			                </a>
			            </li>
			        <?php endforeach; ?>
			    <?php endif; ?>
			</ul>
			<?php
			echo $after_widget;
	}

Pour la mise à jour

function update($new, $old) {
   return $new;
}

Pour le formulaire

function form($vars) {
	$default = array(
		'titre' => 'Flxu RSS'
	);
	$vars = wp_parse_args($vars, $default);

	echo '<p><label for="">Titre :</label>
			<input type="text" name="'. $this->get_field_name('titre') .'" id="'. $this->get_field_id('titre') .'" value="'. $vars['titre'] .'" ></p>';
	echo '<p><label for="">Flux RSS :</label>
			<input type="text" name="'. $this->get_field_name('url_rss') .'" id="'. $this->get_field_id('url_rss') .'" value="'. $vars['url_rss'] .'" ></p>';

}

Et voilà notre Widget Flux RSS est terminé et fonctionnel.

Wordpress widget flux rss

Le code source complet est livré ci dessous, vous pouvez bien évidemment le modifier à votre convenance.

<?php 
/**
 * Plugin Name: Flux RSS
 * Plugin URI: https://www.dootech.fr/creer-facilement-un-widget-wordpress
 * Description: Un Widget qui permet de récupérer la liste des news d'un flux RSS
 * Author: Bassem LAJMI
 * Author URI: http://www.bass-m.me
 */

add_action('widgets_init', 'flux_rss_init');

function flux_rss_init() {
	register_widget('flux_rss_widget');
}

class flux_rss_widget extends WP_widget {
	function flux_rss_widget(){
		$options = array(
			'classname' => 'flux-rss-widget',
			'description' => 'Ce widget permet de récupérer la liste des news/articles en fonction d\'un flux RSS donné.'
		); //
		$this->WP_widget('flux-rss-widget', 'Widget Flux RSS', $options);
	}

	function widget($args, $vars) {
		extract($args);
		echo $before_widget;
			echo $before_title.$vars['titre'].$after_title;

			include_once( ABSPATH . WPINC . '/feed.php' );

			// Get a SimplePie feed object from the specified feed source.
			$rss = fetch_feed( $vars['url_rss'] );
			if ( ! is_wp_error( $rss ) ) : // Checks that the object is created correctly

			    // Figure out how many total items there are, but limit it to 5. 
			    $maxitems = $rss->get_item_quantity( 5 ); 

			    // Build an array of all the items, starting with element 0 (first element).
			    $rss_items = $rss->get_items( 0, $maxitems );

			endif;
			?>

			<ul>
			    <?php if ( $maxitems == 0 ) : ?>
			        <li><?php _e( 'No items', 'my-text-domain' ); ?></li>
			    <?php else : ?>
			        <?php // Loop through each feed item and display each item as a hyperlink. ?>
			        <?php foreach ( $rss_items as $item ) : ?>
			            <li>
			                <a href="<?php echo esc_url( $item->get_permalink() ); ?>" target="_blank" 
			                    title="<?php printf( __( 'Posted %s', 'my-text-domain' ), $item->get_date('j F Y | g:i a') ); ?>">
			                    <?php echo esc_html( $item->get_title() ); ?>
			                </a>
			            </li>
			        <?php endforeach; ?>
			    <?php endif; ?>
			</ul>
			<?php
			echo $after_widget;
	}

	function update($new, $old) {
		return $new;
	}

	function form($vars) {
		$default = array(
			'titre' => 'Flxu RSS'
		);
		$vars = wp_parse_args($vars, $default);

		echo '<p><label for="">Titre :</label>
				<input type="text" name="'. $this->get_field_name('titre') .'" id="'. $this->get_field_id('titre') .'" value="'. $vars['titre'] .'" ></p>';
		echo '<p><label for="">Flux RSS :</label>
				<input type="text" name="'. $this->get_field_name('url_rss') .'" id="'. $this->get_field_id('url_rss') .'" value="'. $vars['url_rss'] .'" ></p>';

	}
}
?>