Diije

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é ?

Le code complet :

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 !