Ça faisait longtemps que je n’avais pas écrit de tutoriel, alors je me lance. Aujourd’hui c’est de Shortcodes dont nous allons parler.
Partons du principe que vous savez déjà de quoi il s’agit (sinon c’est ici).

Pour ce tutoriel, nous allons prendre un exemple simple mais à mon avis très utile, il s’agit d’afficher les derniers postes d’un type de contenu donné dans n’importe quelle zone du site acceptant les shortcodes. Autant dire à peut près partout !

1. Créer le shortcode

function recent_post_list( $atts, $content = null ) {
	//le contenu du shortcode
}
add_shortcode( 'recent_list_shortcode','recent_post_list');

Nous aurons donc un simple shortcode qui sera : [recent_list_shortcode]

2. Ajouter les paramètres

Les paramètres du shortcode sont des éléments facultatifs ou obligatoires pour le personnaliser.
(Ici, je les ai rendu obligatoires pour faciliter la compréhension de l’exemple.)

function recent_post_list( $atts, $content = null ) {

	//récupère les paramètres
	$atts = shortcode_atts(
	array(
		'post_type' => 'post',
		'limit' => 'limit'
	), $atts);
	//transforme les paramètres en variables
	extract($atts);

	//le reste de la fonction
}
add_shortcode( 'recent_list_shortcode','recent_post_list');

Notre shortcode avec ces 2 paramètres ressemblera maintenant à ceci : [recent_list_shortcode post_type= »post » limit= »9″].

3. Créer la requête

Nous allons ici créer une requête WordPress standard. Le but étant d’afficher des postes d’un type donné et dans une quantité donnée.

function recent_post_list( $atts, $content = null ) {	

	//...

	//créer la requête
	$query =  array(
		'post_status' => 'publish',
		'post_type' => $post_type,
		'posts_per_page' => $limit,
		'orderby' => 'date',
		'order' => 'DESC',
	);
	$post = query_posts($query);

	//...
}
add_shortcode( 'recent_list_shortcode','recent_post_list');

Comme je le disais dans le point 2, les paramètres du shortcode qui nous sert ici d’exemple sont obligatoires. En effet, les variables $post_type et $limit sont obligatoires pour la requête présentée fonctionne. On aurait très bien leur attribuer une valeur par défaut lorsque non définies.

4. Mise en place du loop

Le loop est ce qui permet d’afficher des contenus tant qu’il y en à afficher…pas très clair tout ça. En gros, il s’agit d’une boucle qui dit : tant que je trouve un nouveau poste qui correspond à ma requête (cf point 3), je l’affiche.

function recent_post_list( $atts, $content = null ) {

	//...

	echo '<div id="recent-list">';

		while (have_posts()): the_post();
			echo '<div class="grid one-third">';
			//ici j'appel le même template qui me sert à afficher mes posts dans les pages d'archives par exemeple
			get_template_part('content');
			echo '</div>';
		endwhile;					

		wp_reset_query();

	echo '</div>';

	//...
}
add_shortcode( 'recent_list_shortcode','recent_post_list');

Notez l’ajout de wp_reset_query() qui peut éviter certains conflits lorsque vous avez d’autres loops qui suivent l’affichage de votre shortcode (ce qui a été mon cas). Cette fonction permet de réinitialiser les paramètres de la requête personnalisée.Notez l’ajout de ob_start() avant le loop et de return ob_get_clean();.

5. La fonction complète

function recent_post_list( $atts, $content = null ) {

	//récupère les paramètres
	$atts = shortcode_atts(
	array(
		'post_type' => 'post',
		'limit' => 'limit'
	), $atts);
	//transforme les paramètres en variables
	extract($atts);

	//créer la requête
	$query =  array(
		'post_status' => 'publish',
		'post_type' => $post_type,
		'posts_per_page' => $limit,
		'orderby' => 'date',
		'order' => 'DESC',
	);
	$post = query_posts($query);

	ob_start();

	$return .= '<div id="recent-list">';

		while (have_posts()): the_post();
			echo '<div class="grid one-third">';
			get_template_part('content');
			echo '</div>';
		endwhile;					

		wp_reset_query();

	echo '</div>';
	return ob_get_clean();
}
add_shortcode( 'recent_list_shortcode','recent_post_list');

Ces deux fonctions PHP « standard » permettent de ne pas afficher le contenu du echo mais de le stocker temporairement dans le tampon. On s’assure ainsi du bon affichage du contenu du shortcode.

6. Alternative via plugin

Pour les plus pressés ou ceux qui n’aiment pas mettre les mains dans le code, voici un plugin qui vous permet d’arriver à un résultat identique et qui offre de nombreux paramètres supplémentaires.

Un must have !

 

 

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 7 commentaires

7 commentaires

  1. Pour WordPress.com ou trouver des explications sur les shortcodes.
    Je ne trouve pas sur le web. Si vous avez des indications ou des blog qui en parlent je suis preneur.
    Très bonne journée a vous
    Laurent

  2. Bonjour,
    C’est bien beau d’expliquer comment implémenter une telle fonctionnalité, mais vous ne donnez pas l’information la plus importante :
    Où doit-on écrire ces lignes de code ? Dans quel fichier ? Où dans l’arborescence de WordPress ?
    Cela me semble logique d’expliquer cela avant même d’expliquer le reste.. Merci par avance.

    • Cher dpp972,
      J’apprécie très moyennement la manière dont vous vous adressez à moi. Cette article est rédigé sur mon temps libre, gratuitement et pour le plaisir de partager.
      Si vous ne savez où mettre ce code, je vous invite à chercher sur le web, de la même manière que vous l’avez fait pour tomber ici.
      Pour répondre à votre question, vous pouvez commencez par mettre cette fonction dans votre fichier functions.php par exemple.
      C’est cadeau, ça me fait plaisir.
      A bientôt,

  3. Bonjour, comment faire si l’on souhaite ajouter des articles dans une page avec un shortcode qui peut prendre en paramètre les tags et les catégories des articles? je pense afficher les articles avec le même template que sur la boucle de la homepage et avoir d’autre paramètres comme filtre d’article.
    Merci pour votre aide

  4. Bonjour,
    je n’ai pas tout compris dans le passage de parametre. j’ai l’impression que l’on recupere uniquement les parametres de WP
    est ce qu’on peut appeler le shorrtcode en lui donnant un id correspondant à la table de la bdd ?
    ou par exemple l’identifiant de l’article
    merci pour le tuto et peut être pour la réponse
    Cordialement

    • Bonjour Mélanie,
      Si vous utilisez votre shortcode dans le WYSIWYG vous pouvez utiliser la fonction du shortcode get_the_ID() pour récupérer l’ID de la page.