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