Widget d’affichage des derniers articles
Un des widgets WordPress les plus utilisés est celui qui permet l’affichage des N derniers articles du blog. S’il est très utile sur les pages internes, c’est à dire toutes sauf la page d’accueil, il ne fait que rajouter des liens redondants sur cette dernière.
Pour remédier à ce léger problème, je vous propose de réaliser votre propre widget, qui permettra de prendre en compte la page sur laquelle le visiteur se trouve. Pour cela, nous allons utiliser l’API de Widgets WordPress. En plus de l’aspect positif vis à vis du référencement naturel de votre blog (on évite ainsi des liens dupliqués puisque les derniers articles sont déjà visibles sur la homepage), ce sera l’occasion de vous familiariser avec la création de widgets WordPress.
Nous allons donc ajouter quelques lignes de code au fichier functions.php
de votre thème. Pour comprendre plus facilement l’intérêt de chaque méthode, nous allons voir chacune d’elle en détail, mais les plus pressés peuvent aller directement à la fin de l’article pour récupérer le code complet.
Squelette
Commençons par créer une classe dérivée de WP_Widget
:
class MesArticlesRecents extends WP_Widget { //Constructeur function MesArticlesRecents() { } //Affichage du widget function widget($args, $instance) { } //Mise à jour des paramètres du widget function update($new_instance, $old_instance) { } //Affichage des paramètres du widget dans l'admin function form($instance) { } }
Pas grand chose à dire ici. Voyons la suite pour remplir nos méthodes.
Constructeur
Il s’agit ici d’appeler le constructeur de la classe parente WP_Widget
:
function MesArticlesRecents() { parent::WP_Widget(false, $name = 'Mes Articles Récents', array('name' => 'Mes Articles Récents', 'description' => 'Affichage des derniers articles du blog')); }
On passe 3 paramètres au constructeur :
- L’identifiant du widget, ici
false
. Laisser ce premier paramètre àfalse
permet de forcer WordPress à définir automatiquement l’identifiant. - Le nom du widget.
- Un tableau d’options permettant principalement de spécifier une description du widget, qui sera affichée dans l’interface d’administration.
Affichage
Cette méthode définit l’affichage du widget dans le front-end du blog : qu’est-ce qui sera affiché et comment.
function widget($args, $instance) { if(!(is_home() || is_front_page())) { //Récupération des paramètres extract($args); $title = apply_filters('widget_title', $instance['title']); $nb_posts = $instance['nb_posts']; //Récupération des articles $lastposts = get_posts(array('numberposts'=>$nb_posts)); //Affichage echo $before_widget; if ($title) echo $before_title . $title . $after_title; else echo $before_title . 'Articles Récents' . $after_title; echo '<ul>'; foreach ( $lastposts as $post ) : setup_postdata($post); ?> <li><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></li> <?php endforeach; echo '</ul>'; echo $after_widget; } }
On commence par vérifier que l’on ne se trouve pas sur la page d’accueil. Si c’est le cas, on va alors récupérer les paramètres du widget (le titre à afficher et le nombre d’articles à afficher) puis les articles avec get_posts()
. Par défaut, si aucune option n’est spécifiée, le titre sera Articles Récents et le widget affichera 5 articles (valeur par défaut de get_posts()
).
On passe alors à l’affichage proprement dit : $before_widget
, $after_widget
, $before_title
et $after_title
sont des variables définies lors de l’enregistrement d’une sidebar. Ils correspondent au code HTML à insérer avant et après chaque widget (et son titre). En utilisant ces variables, on s’assure de respecter la mise en forme du thème, s’il est bien fait :p
Pour le reste, il s’agit simplement d’afficher pour chacun des derniers articles, son titre et un lien.
Mise à jour
Notre widget permet de prendre en compte deux paramètres : son titre affiché et le nombre d’articles à inclure. La méthode suivante permet de modifier ces deux paramètres :
function update($new_instance, $old_instance) { $instance = $old_instance; //Récupération des paramètres envoyés $instance['title'] = strip_tags($new_instance['title']); $instance['nb_posts'] = $new_instance['nb_posts']; return $instance; }
A chaque création ou mise à jour d’une instance de notre widget, la méthode enregistre dans la base de données du blog le titre et le nombre d’articles de l’instance.
Administration
Enfin, pour terminer notre classe, il faut permettre à l’administrateur du blog de renseigner ces deux paramètres. Pour cela, la méthode form()
permet d’afficher le formulaire dans l’interface d’administration de WordPress :
function form($instance) { $title = esc_attr($instance['title']); $nb_posts = esc_attr($instance['nb_posts']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> <?php echo 'Titre:'; ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('nb_posts'); ?>"> <?php echo 'Nombre d\'articles:'; ?> <input class="widefat" id="<?php echo $this->get_field_id('nb_posts'); ?>" name="<?php echo $this->get_field_name('nb_posts'); ?>" type="text" value="<?php echo $nb_posts; ?>" /> </label> </p> <?php }
On commence par récupérer les valeurs actuelles des options, puis on les affiche dans les champs correspondants. Pour cela, deux méthodes de la classe WP_Widget
vont être utilisée : get_field_id()
pour récupérer l’ID du paramètre, et get_field_name()
pour son nom.
Et voilà, nos quatre méthodes sont complètes, notre widget est presque terminé.
Enregistrement du Widget
Maintenant que notre classe est complète, reste le plus important : enregistrer le widget pour qu’il apparaisse dans l’interface d’administration de WordPress. Ceci se fait tout simplement à l’aide de la fonction <a href="http://codex.wordpress.org/Function_Reference/register_widget">register_widget()</a>
:
function dfr_register_widget() { register_widget( 'MesArticlesRecents' ); } add_action('widgets_init', 'dfr_register_widget');
Vous devriez désormais trouver dans le menu Apparence > Widgets de votre blog un widget nommé Mes Articles Récents. A vous de le configurer et de le placer là où vous le souhaitez !
Si vous le souhaitez, vous pouvez modifier ce widget pour afficher autre chose que les N derniers articles, en utilisant à bon escient la fonction <a href="http://codex.wordpress.org/Template_Tags/get_posts">get_posts()</a>
. Pourquoi ne pas afficher par exemple les posts d’une catégorie en particulier, ou un type de post personnalisé ?
class MesArticlesRecents extends WP_Widget { //Constructeur function MesArticlesRecents() { parent::WP_Widget(false, $name = 'Mes Articles Récents', array('name' => 'Mes Articles Récents', 'description' => 'Affichage des derniers articles du blog')); } //Affichage du widget function widget($args, $instance) { if(!(is_home() || is_front_page())) { //Récupération des paramètres extract($args); $title = apply_filters('widget_title', $instance['title']); $nb_posts = $instance['nb_posts']; //Récupération des articles $lastposts = get_posts(array('numberposts'=>$nb_posts)); //Affichage echo $before_widget; if ($title) echo $before_title . $title . $after_title; else echo $before_title . 'Articles Récents' . $after_title; echo '<ul>'; foreach ( $lastposts as $post ) : setup_postdata($post); ?> <li><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></li> <?php endforeach; echo '</ul>'; echo $after_widget; } } //Mise à jour des paramètres du widget function update($new_instance, $old_instance) { $instance = $old_instance; //Récupération des paramètres envoyés $instance['title'] = strip_tags($new_instance['title']); $instance['nb_posts'] = $new_instance['nb_posts']; return $instance; } //Affichage des paramètres du widget dans l'admin function form($instance) { $title = esc_attr($instance['title']); $nb_posts = esc_attr($instance['nb_posts']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> <?php echo 'Titre:'; ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('nb_posts'); ?>"> <?php echo 'Nombre d\'articles:'; ?> <input class="widefat" id="<?php echo $this->get_field_id('nb_posts'); ?>" name="<?php echo $this->get_field_name('nb_posts'); ?>" type="text" value="<?php echo $nb_posts; ?>" /> </label> </p> <?php } } function dfr_register_widget() { register_widget( 'MesArticlesRecents' ); } add_action('widgets_init', 'dfr_register_widget');
Evidemment, vous pouvez également vous servir de ce code pour créer tout un tas d’autres widgets WordPress !