Shortcode

Un shortcode est un morceau de code entre crochets à intégrer dans le contenu d'un site WordPress. Ce morceau de code permet d'intégrer rapidement et simplement un bout de code HTML dans votre site.

1
[gallery ids = "20,21,22" size = "medium"]

(Pour information, les blocs sont amenés à remplacer petit à petit les shortcodes.)

https://codex.wordpress.org/Gallery_Shortcode

MéthodeFonction

Pour créer un shortcode , il faut réaliser une fonction qui retourne le code HTML envoyé à notre site.

Cette fonction attend deux paramètres. Le premier correspond à un tableau des attributs que votre shortcode transmet, le second correspond au contenu éventuel écrit entre le crochet d'ouverture et le crochet de fermeture.

1
[vv_shortcode color = 'blue' size='14' ]Mon texte[/vv_shortcode]

Ce qui donne :

1
$atts = [color=>'blue', size=>14 ]
2
$content = 'Mon texte'
3
Exemple de fonction :
1
function vv_shortcode_func($atts, $content)
2
{
3
    $atts = shortcode_atts(
4
        array(
5
            'color' => 'red'
6
        ),
7
        $atts
8
    );
9
10
    return "<h2 style='color:{$atts['color']}'>$content</h2>";
11
}
shortcode_atts : la fonction permet de surcharger le tableau $atts par le premier paramètre (à la façon de la fonction array_merge).
On retourne un code HTML réalisé à l'aide du tableau $atts et de la chaîne $content.
MéthodeAjouter à la liste des shortcodes
Pour que ce shortcode soit effectif, il faut l'ajouter à la liste des shortcodes de wordpress.
La fonction add_shortcode permet d'effectuer l'ajout.
1
add_shortcode('vv_shortcode', 'vv_shortcode_func');
Le premier paramètre correspond au nom du shortcode et le second au nom de la fonction.
MéthodeDans quel fichier ?
Le code doit être ajouté à un fichier lancé par wordpress :
  • Dans le fichier functions.php de votre thème. Le risque est que si vous changez de thème, vous perdez votre shortcode.
  • Dans une extension.
Ajoutez le dossier vv-shortcode dans le dossier plugins.
Ajoutez le fichier vv-shortcode.php
1
<?php
2
3
/**
4
 * Plugin Name: Exemple ShortCode
5
 * Description: permet de découvrir la création de shortCode.
6
 * Version: 1.0.0
7
 * Author: Moi
8
 * License: GPL-3.0
9
 */
10
11
function vv_shortcode_func($atts, $content)
12
{
13
    $atts = shortcode_atts(
14
        array(
15
            'color' => 'red'
16
        ),
17
        $atts
18
    );
19
20
    return "<h2 style='color:{$atts['color']}'>$content</h2>";
21
}
22
23
add_shortcode('vv_shortcode', 'vv_shortcode_func');
24
Activez vv-shortcode dans vos extensions.
Dans une page ou un article ajoutez le bloc code court et écrivez le code :
1
[vv_shortcode color='blue']Mon texte[/vv_shortcode]
Mettez à jour et visualisez le résultat.
ComplémentSécurité
Afin que la page de votre extension ne soit pas appelée directement par le client mais seulement par une autre page de votre site, on ajoute une instruction de vérification.
On teste l'existence d'une constante de wordpress, dans le cas négatif on n’interrompt la lecture du fichier.
1
if (!defined('ABSPATH')) {
2
    exit;
3
}
Il est recommandé de tester si le nom que vous utilisez pour votre shortcode n'existe pas déjà.
1
if (!shortcode_exists('vv_shortcode')) {...}
Ce qui donne :
1
<?php
2
3
/**
4
 * Plugin Name: Exemple ShortCode
5
 * Description: permet de découvrir la création de shortCode.
6
 * Version: 1.0.0
7
 * Author: Moi
8
 * License: GPL-3.0
9
 */
10
if (!defined('ABSPATH')) {
11
    exit;
12
}
13
14
if (!shortcode_exists('vv_shortcode')) {
15
16
    function vv_shortcode_func($atts, $content)
17
    {
18
        $atts = shortcode_atts(
19
            array(
20
                'color' => 'red'
21
            ),
22
            $atts
23
        );
24
25
        return "<h2 style='color:{$atts['color']}'>$content</h2>";
26
    }
27
28
    add_shortcode('vv_shortcode', 'vv_shortcode_func');
29
}