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 :

function src_sc($attributes, $content) {
    $res = '<div class="ibdsrc">Source';
    if (preg_match("#<a.*</a>.*\r?\n?.*<a.*</a>#", $content)) {
        $res .= "s";
    }
    $cached = preg_replace_callback('#<a.*href="([^"]*)".*>.*</a>#U', addCacheURL, $content);
    $res .= " : ".($cached == NULL ? $content : $cached)."</div>";
    return $res;
}
add_shortcode("src", "src_sc");

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 :

function addCacheURL($matches) {
    $res = $matches[0];
    $cacheId = md5($matches[1]);
    $cachePNGFile = "/cache-sources/".$cacheId[0]."/".$cacheId.".png";
    $cacheMAFFFile = "/cache-sources/".$cacheId[0]."/".$cacheId.".maff";
    if (file_exists($cachePNGFile) && file_exists($cacheMAFFFile)) {
        $res .= ' (cache : <a onclick="window.open(\''.$cachePNGFile.'\');" title="Article mis en cache sous forme d&#8217;image PNG">PNG</a>, <a href="'.$cacheMAFFFile.'" title="Article mis en cache en Mozilla Archive Format" rel="nofollow" target="_blank">MAFF</a>)';
    }
    else if (file_exists($cachePNGFile)) {
        $res .= ' (<a onclick="window.open(\''.$cachePNGFile.'\');" title="Article mis en cache sous forme d&#8217;image PNG">cache PNG</a>)';
    }
    else if (file_exists($cacheMAFFFile)) {
        $res .= ' (<a href="'.$cacheMAFFFile.'" title="Article mis en cache en Mozilla Archive Format" rel="nofollow" tarjet="_blank">cache MAFF</a>)';
    }
    else {
        $res .= '<!-- '.$cacheId.' -->';
    }
    return $res;
}

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) :

  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 :

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 🙂