Introduction aux shortcodes de WordPress


wordpress-shortcodes

Introduits dans la version 2.5, les shortcodes sont une des fonctionnalités les plus utiles et puissantes de WordPress pour les développeurs.
Lorsque vous placez un shortcode dans le contenu d’un post ou d’une page, il sera automatiquement remplacé par un autre contenu généré par la fonction liée, comme un genre de “macro”.

 

Exemple basique

Pour l’exemple, nous allons créer un shortcode pour afficher une bannière publicitaire dans le corps de vos articles. Cela peut s’avérer utile pour plusieurs raisons :
– Plus besoin de copier/coller le code de la bannière à chaque fois
– Vous pourrez le placer à l’endroit de votre choix dans le corps de chaque article
– Si à l’avenir vous souhaitez changer le code de la bannière, vous n’aurez pas besoin de le modifier dans chaque article

function my_ad_shortcode() {
	$output = '<div class="banner-ad">
	<a href="http://the_ad_link/">
	<img alt="" src="http://the_banner.gif" />
	</a></div>';
	return $output;
}
add_shortcode('my-ad', 'my_ad_shortcode');

Placez ce code dans le fichier function.php (ou dans le code d’un plugin) et vous aurez créé ce shortcode sur votre site.
Maintenant lorsque vous placerez [my-ad] dans le contenu d’un article, il renverra la bannière.

On peut bien sûr aller beaucoup plus loin avec les shortcodes, et faire pratiquement n’importe quoi avec php avant de “renvoyer” le résultat, et également passer des attributs et du contenu aux shortcodes.
Voyons ces possibilités.

Shortcode avec attributs

Améliorons un peu le shortcode précédent pour permettre de choisir différentes tailles de bannière ainsi que le lien vers lequel elle doit pointer.

function my_ad_shortcode($atts) {
	extract(shortcode_atts(array(
		'size' => '250x250',
		'link' => 'http://the_ad_link/'
		), $atts));

	switch($size):
		case '250x250':
			$banner = "http://my_250x250_banner.gif";
			break;
		case '300x250':
			$banner = "http://my_300x250_banner.gif";
			break;
	endswitch;

	$output = '<div class="banner-ad">';
	$output .= '<a href="'.$link.'">';
	$output .= '<img alt="" src="'.$banner.'" />';
	$output .= '</a>';
	$output .= '</div>';

	return $output;
}
add_shortcode('my-ad', 'my_ad_shortcode');

Maintenant notre shortcode a deux attributs : “size” et “link”.
Notez que ces attributs ont des valeurs par défaut prévues dans le code ci-dessus, afin que le shortcode reste utilisable sans obligatoirement passer ces attributs. Il est maintenant utilisable de la façon suivante :
[my-ad size=”300×250″ link=”http://the_banner_link/”]

Les shortcodes englobants

On peut aussi créer des shortcodes “englobants”, et placer n’importe quel contenu à l’intérieur, afin de les utiliser de la façon suivante :
[myshortcode] du contenu ici [/myshortcode]

function my_shortcode($atts, $content = NULL) {
	$output = $content;
	return $output;
}
add_shortcode('myshortcode', 'my_shortcode');

Le shortcode ci-dessous ne fait finalement rien, mais vous aurez compris l’idée 🙂

Activer les shortcodes en dehors du seul contenu des articles

Par défaut les shortcodes ne sont disponibles que dans le corps des articles et pages, et ignorés s’ils sont placés ailleurs. Mais il est très facile de les rendre disponibles dans les widgets texte, dans les “excerpts”, dans les commentaires etc. avec les codes suivants :

add_filter('widget_text', 'do_shortcode'); // Active les shortcodes dans les "text widgets"
add_filter( 'the_excerpt', 'do_shortcode'); // Active les shortcodes dans les excerpts
add_filter( 'comment_text', 'do_shortcode' ); // Active les shortcodes dans le corps des commentaires

Les shortcodes peuvent également être utilisés directement dans le code de votre thème, avec la fonction do_shortcode() :

do_shortcode('[shortcode]');

Voilà qui conclut cette introduction aux shortcodes, n’hésitez pas à poser vos questions dans les commentaires ci-dessous, et restez à l’affût pour plus d’exemples, je publierai bientôt quelques shortcodes particulièrement utiles!