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->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.
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>';
}
}
?>