Qu’est-ce qu’un shortcode

Un shortcode est un bout de code à insérer dans n’importe quel éditeur de contenu au sein de WordPress.
En clair, vous pouvez proposer de nouvelles fonctionnalités accessibles simplement depuis l’administration de WordPress, enrichissez WordPress, c’est facile !

Création d’un shortcode

Avant tout, il est nécessaire de savoir qu’un shortcode se déclare dans le fichier functions.php de votre projet WordPress.
La déclaration d’un shortcode se présente comme ceci :
– une méthode qui sera appelée par le shortcode

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

    return 'coucou';

}

– la déclaration du shortcode
(attention : pas d’underscore dans le nom du shortcode)

add_shortcode('fairecoucou', 'faire_coucou');

Tout simplement.

Ici le shortcode sera appelé depuis l’éditeur wysiwyg de wordpress avec

[fairecoucou]

et se contentera d’afficher « coucou ».

Si vous avez observé le bout de code précédent vous avez surement remarqué deux paramètres qui ont deux utilités différentes :

• $atts pour les shortcodes self-closing
• $content pour les shortcodes enclosing

Les attributs dans un shortcode self-closing

Il est possible d’ajouter différents attributs au sein même d’un shortcode, par exemple

[fairecoucou size="20px"]

Pour récupérer ces attributs, c’est assez simple :
Un tableau associatif est créé avec les différents attributs. Ici, pour accéder à l’attribut size, il nous suffit de faire $atts[‘size’].
Ce qui nous donne par exemple :

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

    return '<span style="font-size: '.$atts['size'].';">coucou</span>';
}

Ce qui nous permet d’afficher « coucou » (notez la taille du texte)

Le contenu dans un shortcode enclosing

Il est possible de récupérer le contenu ajouté par l’utilisateur entre l’ouverture et la fermeture du shortcode (et ça c’est puissant) :

[fairecoucou]cher ami[/fairecoucou]

Le contenu est stocké dans une variable $contenu et accessible de cette manière dans notre fonction appelée par le shortcode :

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

    return 'coucou + '.$content.'';
}

Ce qui nous affichera « coucou + cher ami ».

La variable $content n’est pas « échappée », ce qui permet à l’utilisateur d’ajouter du HTML s’il le souhaite.
Donc si l’utilisateur utilise

[fairecoucou]<a href="https://connect.adfab.fr" target="_blank">cher ami</a>[/fairecoucou]

nous aurons « coucou + cher ami » en sortie.

Ajouter des attributs dans un shortcode enclosing

Il est bien sûr possible de réunir les deux types de shortcodes cités précédemment.
La fonction :

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

    return '<span style="font-size: '.$atts['size'].';">coucou + '.$content.'';
}

Le shortcode avec un attribut et un contenu :

[fairecoucou size="20px"]<a href="https://connect.adfab.fr" target="_blank">cher ami</a>[/fairecoucou]

La sortie :
coucou + cher ami

Aller plus loin

Utiliser les shortcodes pour faciliter la mise en page par l’utilisateur

Disons que nous utilisons Twitter Bootstrap 3, si l’utilisateur veut ajouter un bouton, nous pouvons lui faciliter la tache de cette façon :

function button ($atts, $content = null){
    return '<button class="btn btn-warning" type="button">'.$content.'</button>';
}
add_shortcode('button', 'button');

Le shortcode :

Warning

Utilisation un peu plus avancé des shortcodes

Les shortcodes sont interprétés à l’affichage de la page, et non au moment de l’enregistrement du contenu, nous pouvons donc ajouter du contenu dynamique et utiliser des fonctions WordPress sans problème.

Par exemple, nous allons créer du contenu uniquement  visible par les membres. Nous utiliserons donc is_user_logged_in().

function logged_content($atts, $content = null){
     if ( is_user_logged_in() )
        return $content;
}
add_shortcode('logged', 'logged_content');

L’appel du shortcode :

[logged]Message secret pour les membres[/logged]

Je vous invite à lire la documentation pour aller encore plus loin et n’hésitez pas à me poser des questions, nous sommes là pour ça !