• 15 hours
  • Easy

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 3/13/18

Les shortcodes

Log in or subscribe for free to enjoy all this course has to offer!

Un shortcode est une balise de texte formatée spécialement que l'on peut placer directement dans un article ou une page de votre blog. Cette balise est automatiquement interprétée par WordPress et permet d'ajouter des fonctionnalités (une galerie image, une insertion vidéo, etc.) sans programmation de votre part! Grâce aux shortcodes, votre blog devient dynamique puisque son contenu peut être changé à tout moment, en temps réel et sans compétence informatique.

Utiliser un shortcode

Format

Pour utiliser un shortcode, il suffit de mettre son nom dans le contenu d'un article, encadré de crochets.

[nom_du_shortcode]

Par exemple, WordPress connaît un shortcode gallery qui renvoie l'ensemble des médias de type image associés à un article, dont l'affichage sur le site changera en fonction du nombre d'images dans la bibliothèque sans qu'il y ait besoin de modifier l'article en question.

Choisissez donc un article ou une page possédant des images, et introduisez le shortcode au sein de son contenu (voir la figure suivante).

L'ajout du shortcode dans le contenu d'un article
L'ajout du shortcode dans le contenu d'un article

Lorsqu'un visiteur parcourra l'article choisi, il verra, comme sur la figure suivante, l'ensemble des images associées à celui-ci.

Affichage du shortcode « Gallery »
Affichage du shortcode « Gallery »

Paramètres

Pour ajouter de la souplesse aux shortcodes, il est tout à fait possible de leur attribuer des paramètres utilisés par la fonction PHP lors du rendu, en rajoutant des paires clés/valeur à la suite du nom du shortcode.

[nom_du_shortcode attribut1="valeur1" attribut2="valeur2"]

On peut aussi ajouter une grosse portion de texte dans un shortcode en l'écrivant sous une forme différente, avec une balise ouvrante et une balise fermante. Ce texte sera alors considéré comme un nouveau paramètre, généralement utilisé comme contenu du shortcode.

[nom_du_shortcode]le contenu vient ici[/nom_du_shortcode]

De plus, le contenu peut être du texte brut ou bien du HTML ; il n'y a pas de restriction. Ce sera ensuite le rôle du shortcode de traiter le texte fourni en cas de besoin.

Créer un shortcode

Que diriez-vous de créer un shortcode simple, dont le rôle sera par exemple de lister les derniers articles publiés sur votre blog ? Placé par exemple dans une page statique, il fournira sous forme de liste les titres des derniers articles avec un lien vers chacun d'eux.

Pour traiter le shortcode, il faudra utiliser une nouvelle classe de notre plugin qui sera dédiée au rendu de la liste des derniers articles. Ajoutez donc un nouveau fichier recent.php dans lequel vous définirez une classe Zero_Recent, elle-même étant instanciée dans le constructeur de la classe Zero_Plugin, comme cela a été fait pour les classe précédentes.

<?php
class Zero_Plugin
{
    public function __construct()
    {
        //...
        include_once plugin_dir_path( __FILE__ ).'recent.php';
        new Zero_Recent();

Il faut ensuite déclarer le shortcode afin que WordPress sache le reconnaître dans le contenu d'une publication. On utilise pour cela la méthode add_shortcode(), qui attend en paramètres le nom du shortcode ainsi que la fonction à appeler lors de son rendu. Placez donc cet appel dans le constructeur de la classe Zero_Recent.

<?php
class Zero_Recent
{
    public function __construct()
    {
        add_shortcode('zero_recent_articles', array($this, 'recent_html'));
    }
}

WordPress a dorénavant connaissance du nouvel élément, il ne lui manque que la définition de la fonction à appeler pour l'afficher. Cette dernière recevra deux arguments lors de son appel : le premier est un tableau des paramètres permettant de configurer le shortcode, le second est la valeur du contenu si le shortcode a été déclaré avec les deux balises ouvrante et fermante.

<?php
public function recent_html($atts, $content)
{
}

La première chose à faire est d'initialiser des valeurs par défaut pour les paramètres du shortcode, si jamais ceux-ci n'ont pas été fournis. En effet, un shortcode doit au maximum pouvoir être utilisé sans paramètres, il faut donc prévoir un comportement fonctionnel dans ce cas. Pour fusionner simplement le tableau de paramètres fournis et les valeurs par défaut, WordPress propose la fonction shortcode_atts().

<?php
$atts = shortcode_atts(array('numberposts' => 5), $atts);

Une fois les arguments filtrés, vous pouvez récupérer la liste des derniers articles avec la fonction get_posts(), pour laquelle les paramètres doivent être envoyés dans un tableau comme premier argument. La fonction renverra alors une liste d'articles, qui sont par défaut triés par date décroissante, ce qui correspond à nos besoins.

<?php
$posts = get_posts($atts);

Il ne reste plus qu'à parcourir la liste des articles et à les insérer dans une liste au format HTML, avec un lien permettant d'afficher chacun d'entre eux. Si la variable $content a été définie par l'utilisateur du shortcode, vous pouvez l'insérer par exemple au dessus de la liste, ce qui permet de rajouter un texte de présentation.

<?php
public function recent_html($atts, $content)
{
    $atts = shortcode_atts(array('numberposts' => 5, 'order' => 'DESC'), $atts);
    $posts = get_posts($atts);

    $html = array();
    $html[] = $content;
    $html[] = '<ul>';
    foreach ($posts as $post) {
        $html[] = '<li><a href="'.get_permalink($post).'">'.$post->post_title.'</a></li>';
    }
    $html[] = '</ul>';

    echo implode('', $html);
}

Le shortcode est terminé et prêt à être utilisé ! Rendez-vous pour cela dans l'éditeur de contenu d'une de vos publications, et placez le code suivant à l'intérieur :

[zero_recent_articles numberposts=3]
Voici les derniers articles publiés sur le blog :
[/zero_recent_articles]

À l'affichage de la page, comme sur la figure suivante, vous obtenez la liste à jour des trois derniers articles publiés.

Affichage des trois derniers articles
Affichage des trois derniers articles
  • Un shortcode est un morceau de code PHP que l'on insère directement au sein d'une publication. Il permet l'affichage de contenu sans savoir même coder.

  • Les shortcodes peuvent récupérer des paramètres fournis par le contributeur d'un article pour modifier leur affichage.

  • Il existe plusieurs formats pour les shortcodes, avec une seule ou deux balises pour rajouter du contenu.

Example of certificate of achievement
Example of certificate of achievement