WordPress : gérer des shortcodes avec un plug-in

Lorsque j’écris un article, j’essaye toujours de mettre un lien vers la source. Mais comment faire un joli lien sans avoir à s’embêter chaque fois à le mettre en forme proprement (comme c’est le cas ici, en couleur et avec une petite icône) ? En créant un plug-in gérant un « shortcode ».Short-quoi ? Si vous utilisez régulièrement WordPress, vous avez probablement déjà eu affaire aux shortcodes : il s’agit de tags écrits entre [] qui permettent de réaliser simplement certaines choses avec l’éditeur WordPress. Par exemple, le shortcode [video] permet d’insérer facilement une vidéo HTML5 dans un post.

Et vous allez voir que c’est très simple de créer ces propres shortcodes.

Commencez par créer un fichier de plug-in, comme je vous l’avais expliqué il y a quelques jours. Pour gérer un shortcode, vous allez devoir ajouter deux choses dans ce fichier :

• une fonction qui va traiter ce shortcode. Elle doit accepter deux paramètres, un array nom => valeur représentants les attributs du shortcode (les paramètres passés dans la balise du shortcode, par exemple le traitement de la balise [[shortcode attribut1= »valeur1″]] passera l’array (« attribut1 » => « valeur1 », « attribut2″=> »valeur2 ») à la fonction traitant le shortcode) et une chaîne reprenant tout le texte situé entre la balise ouvrante et la balise fermante du shortcode,
• un appel à add_shortcode pour associer le shortcode à sa fonction de traitement.

Voilà par exemple ce que ça donne pour gérer mes sources, avec un shortcode [src], sans aucun attribut et dont le contenu est le code HTML des liens vers les sources :

La fonction de traitement détecte automatiquement s’il y a un lien ou plusieurs (pour mettre « Source : » au singulier ou au pluriel) et encapsule les liens dans un <div> avec la classe CSS qui va bien pour afficher les liens avec le bon style.

Notez également la fonction de callback passé à preg_replace_callback dans src_sc : c’est elle qui permet d’ajouter automatiquement le lien vers la version mise en cache de la source. Le principe est très simple : pour chaque lien, on extrait l’URL vers laquelle il pointe, puis on calcule le md5 de cette URL et on cherche dans le cache si on trouve des fichiers correspondant à ce md5. Si c’est le cas, on ajoute les liens vers le cache après le lien direct :

Reste à voir la définition de la classe CSS pour appliquer le style aux liens. Là vous avez deux possibilités : soit étendre le CSS directement via votre plug-in, soit utiliser un plug-in permettant d’ajouter manuellement du CSS via l’interface d’administration. Pour ma part, j’ai opté pour la seconde solution, vu que j’utilisais déjà la fonction « CSS personnalisé » du plug-in Jetpack pour d’autres raisons.

Pour le faire via votre plug-in, la première solution consiste à intégrer directement votre CSS personnalisé à l’en-tête de la page (simple, mais moins efficace pour la gestion des caches) :

• ajoutez à votre plug-in une fonction sans paramètre faisant un echo du style CSS dans une balise HTML <style>,
• dans votre plug-in, déclarez votre fonction comme action sur l’événement wp_head (génération de l’en-tête de la page) :
  
  PHP

  add_action('wp_head','<nom de votre fonction>');

  1	add_action('wp_head','<nom de votre fonction>');

Pour profiter pleinement de la mise en cache, il est préférable de créer un fichier CSS pour le plug-in, et de déclarer à WordPress de le prendre en compte :

• ajoutez un fichier CSS dans l’arborescence de votre plug-in,
• dans votre plug-in, indiquez à WordPress qu’il doit utiliser ce fichier CSS :
PHP

wp_enqueue_style('cssDeMonPlugin', plugins_url('',__FILE__).'<chemin vers votre CSS à partir du fichier PHP du plug-in>');

1	wp_enqueue_style('cssDeMonPlugin', plugins_url('',__FILE__).'<chemin vers votre CSS à partir du fichier PHP du plug-in>');

Et voilà, vous n’avez plus d’excuse pour ne pas mettre de liens vers vos sources