Tip WordPress: utiliser les shortcodes

Publié par Gui dans Tips, Wordpress

Les shortcodes sont des macros fonctions qui peuvent être utilisées aussi bien dans les contenus d’articles qu’au sein du code d’un fichier.

Ils permettent d’exécuter du code sans réellement toucher au code lui même, grâce à des mots-clés du type [mafonction param1=valeur1 param2=valeur2].

Introduction

Les shortcodes sont apparus dans la version 2.5 de WordPress. Ils sont depuis beaucoup utilisés par les plugins et thèmes, car il faut bien le dire, ils sont très pratiques !

En effet, mettons que vous êtes rédacteur et que vous souhaitez insérer dans certains articles une liste de documents pdf liés à un article. Bien sûr, vous n’avez pas de connaissances en programmation. Que faire?

Votre développeur aura pris soin de créer un shortcode qui fait le boulot ! Ainsi il vous suffira d’ajouter ce code dans votre article et le tour est joué !

[liste-fichiers type=pdf]

Création d’un shortcode

Pour illustrer la création d’un shortcode, nous allons créer un outil nous permettant d’ajouter différentes vidéos provenant de différents réseaux (Youtube et Vimeo par exemple).

L’intérêt ici est surtout de conserver la mise en page de la vidéo et de la faire évoluer au fur et à mesure que l’API du service change, sans toucher au contenu lui même.

Au final, nous utiliserons donc ce code pour insérer une vidéo :


Création de la fonction de traitement

Nous allons donc créer une fonction insert_video, à placer dans votre fichier functions.php.

function insert_video($atts) {
	extract(shortcode_atts(array(
		'type'		=> 'youtube',
		'id' 	=> '',
		'width' 	=> '566',
		'height' 	=> '318'
		'color1' 	=> ''
	), $atts));
}

Cette fonction prend un arguement $atts dont on va extraire les paramètres saisis dans le shortcode. WordPress fait tout le boulot de « parsing » pour nous pour que nous n’ayons plus qu’à nous préoccuper des variables.

Ainsi nous pouvons directement utiliser dans la suite de la fonction les variables $type, $id, $width, $height et $color1.

Les arguments présents dans la méthode « extract » sont ceux qui sont attendus. On peut le cas échéant leur attribuer une valeur par défaut.

Vérification et conversion

Nous pouvons donc ensuite effectuer quelques traitements, comme vérifier que l’identifiant est bien présent et ajuster la hauteur et la largeur dans le cas où l’une ou l’autre n’est pas présente.

if (empty($id)) return '<!-- Video: identifiant absent -->';

if ($height && !$atts['width']) $width = intval($height * 16 / 9);
if (!$atts['height'] && $width) $height = intval($width * 9 / 16);

Utilisation de l’API

Nous allons maintenant utiliser la bonne API selon le type de la vidéo.

switch($type)
{
	case "youtube":
		$url = "http://www.youtube.com/embed/$id?color1=$color1";
	break;

	case "vimeo":
		$url = "http://player.vimeo.com/video/$id?color=$color1";
	break;
}

Affichage

Enfin il ne nous reste plus qu’à afficher la vidéo via une iframe :

$url = html_entity_decode($url);
$video = "<iframe src="$url" width="$width" height="$height"></iframe>";

return do_shortcode($video);

Lier cette fonction au système de WordPress

Maintenant que notre fonction est prête, il ne nous reste plus qu’à informer wordpress qu’un nouveau shortcode est disponible :

add_shortcode('video', 'insert_video');

Le premier paramètre est le nom du shortcode et le second, la fonction associée. Le code est à placer en dehors de la fonction insert_video.

Résumé

Voici la fonction complète à ajouter à votre fichier functions.php :

function insert_video($atts) {
	extract(shortcode_atts(array(
		'type'		=> 'youtube',
		'id' 	=> '',
		'width' 	=> '566',
		'height' 	=> '318',
		'color1'	=> ''
	), $atts));

	if (empty($id)) return '<!-- Video: identifiant absent -->';

	if ($height && !$atts['width']) $width = intval($height * 16 / 9);
	if (!$atts['height'] && $width) $height = intval($width * 9 / 16);

	switch($type)
	{
		case "youtube":
			$url = "http://www.youtube.com/embed/$id?color1=$color1";
		break;

		case "vimeo":
			$url = "http://player.vimeo.com/video/$id?color=$color1";
		break;
	}

	$video = "<iframe src='$url' width='$width' height='$height'></iframe>";

	return do_shortcode($video);
}
add_shortcode('video', 'insert_video');

Tips

Comme je le mentionnais en introduction, il est également possible d’utiliser un shortcode ailleurs que dans un article. Pour cela, il vous faudra exécuter la fonction suivante :

do_shortcode("");

Si vous souhaitez l’utiliser dans un widget, il vous faudra probablement ajouter un filtre comme cela :

add_filter('widget_text', 'do_shortcode', 10);

Conclusion

Les shorcodes sont donc un bon moyen d’ajouter des fonctionnalités de manière astucieuse et facilement utilisables pour des non programmeurs. Il offre un code réutilisable et permet de factoriser des développements.

Ressources, idées et suggestions de shortcodes

Vous pouvez pour obtenir plus d’informations vous référer comme toujours à l’excellent codex de WordPress.

Autrement, n’hésitez pas à faire part de vos idées de shortcodes dans les commentaires !

Vous trouverez également de l’inspiration dans cet article de nettuts sur les shortcodes.

4 commentaires

  1. Xavier Artot

    Bonjour,
    sympa, même si le faite que WP parse les variables pour nous, c’est jamais évident pour moi.
    En tout cas merci pour vos partages :)

  2. Etty

    Glad I’ve finally found soitnhmeg I agree with!

  3. sildenafil

    You’ve managed a first class post

  4. دانلود آهنگ

    Thank you very much. I searched for this very

Laisser une réponse


Post shadow