Shortcodes WordPress : rendez votre projet dynamique

WordPress compte parmi les systèmes de gestion de contenu (CMS pour Content Management System en anglais) les plus utilisés au monde. D’innombrables plugins ont contribué à l’expansion du programme de blogging, permettant de créer des projets des plus variés. Le programme représente une solution simple et rapide pour répandre des contenus sur le World Wide Web, pour les blogueurs, rédacteurs, etc qui n’ont pas de connaissances spécifiques en HTML ou CSS. Si vous souhaitez faire vos premiers pas dans la rédaction Web, WordPress est un programme tout à fait adapté. Les développeurs WordPress ont par ailleurs introduit en 2008 la fonctionnalité Shortcode, avec laquelle il est possible d’ajouter des éléments dynamiques pour vos apports rédactionnels.

Que sont les shortcodes ?

Les shortcodes ont été ajoutés avec la version 2.5 de WordPress. Il s’agit de courtes commandes placées au sein d’un texte et reliées à un code PHP. Ces dernières sont placées soit dans un dossier functions.php relié, soit dans un fichier functions.php séparé. Si les pages sont chargées avec un shortcode, WordPress se charge de l’exécution et de l’interprétation des scripts respectifs. Le visiteur voit ainsi le contenu créé via la fonction PHP plutôt qu’avec le code. Le shortcode fait fonction d’espace vide, comme par exemple pour des éléments simples tels que de courtes descriptions, des contenus dynamiques tels que des pop-ups ainsi que des galeries d’images.  

L’implémentation d’un shortcode dans WordPress ne représente pas de grand défi : il est directement ajouté à l’éditeur à la place correspondante sur la contribution. Pour que WordPress reconnaisse ces derniers en tant que code, ils sont placés entre crochets [ ]. Un shortcode de forum peut par exemple ressembler à cela : [publications-actuelles]. Reliées à la fonction PHP adaptée, les contributions récentes sont ainsi affichées à l’emplacement défini. Avec des paramètres supplémentaires, il est possible de spécifier les shortcodes WordPress. Pour limiter l’annonce à cinq articles récents par exemple, vous pouvez ajouter [posts=5] à la commande existante.

Pourquoi les shortcodes WordPress sont-ils si importants ?

Les Shortcodes sont très pratiques sur WordPress, et ce pour deux principales raisons : cela permet d’une part aux utilisateurs qui n’ont pas de connaissances sur JavaScript ou CSS d‘intégrer des contenus dynamiques. Vous n’avez même pas besoin des connaissances élémentaires à propos de PHP pour ces Shortcodes, car diverses commandes incluant les scripts correspondant sont disponibles de manière standard sur WordPress. Un aperçu par liste (en anglais) se trouve pour cela sur la page officielle. Vous y trouverez par ailleurs des instructions pour utiliser ces shortcodes. De nombreux shortcodes WordPress ont aussi été développés par les utilisateurs, que vous pouvez trouver gratuitement sur différentes plateformes telles que SNIPPLR ou WPdevSnippets. De plus, de nombreux plugins et templates proposent leurs propres shortcodes. Vous n’avez à faire de la programmation que si vous souhaitez modifier un script existant ou que vous avez besoin d’un script complètement nouveau. Le deuxième grand avantage des shortcodes est le gain de temps : si vous utilisez par exemple un passage de texte particulier, un logo ou un autre élément dans votre publication, l’utilisation d’un shortcode programmé correspondant constitue un gain de temps très important. Si vous souhaitez changer quelque chose à cet élément ultérieurement, vous n’êtes pas contraint à le faire séparément pour chaque article. Adaptez simplement le code PHP et les modifications seront prises en compte pour toutes les pages de votre projet WordPress qui contiennent la commande.

Créer ses propres shortcodes WordPress : comment faire ?

Il est clair que le noyau d’un shortcode est le script PHP qui est exécuté. Il ne s’agit pas ici d’expliquer comment programmer un tel script, car cela reviendrait à effectuer un cours de base en programmation PHP et nous éloignerait du sujet. Vous découvrirez plutôt comment intégrer des shortcodes à votre projet, et comment les désactiver. Ajoutez pour cela le code PHP respectif soit dans le dossier du thème utilisé dans functions.php, soit dans un fichier PHP séparé. Pour s’assurer que vos shortcodes ne disparaîtront pas lors de la prochaine mise à jour du thème, vous devriez aménager un « child-theme ».  Cette démarche est relativement simple et est expliquée sur l’assistance du forum WordPress.

Créer une fonction de rappel (Callback)

La fonction PHP qui est exécutée dès que WordPress enregistre un shortcode est ce qu’on appelle en anglais callback function, ou fonction de rappel en français. Elle est en tant que telle transmise à une autre fonction aux paramètres définis sous certaines conditions. La fonction exemple suivante fouille la base de données et elle produit un lien vers la contribution écrite pour le shortcode [publications-actuelles] :

function publications-actuelles_function() {
    query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
    if (have_posts()) :
        while (have_posts()) : the_post();
            $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
        endwhile;
    endif;
    wp_reset_query();
    return $return_string;
}

Le texte qui doit remplacer le shortcode, se trouve sur la variable $return_string (PHP caractérise toutes les variables avec $). La fonction PHP (functions publications actuelles) donne cette variable en retour. Si vous utilisez la commande –echo par erreur au lieu de cela, l’élément introduit par shortcode atterrit soudainement dans le contenu actuel.

Enregistrer des Shortcodes sur WordPress

Vous devez attirer l’attention de WordPress sur le fait qu’il s’agit dans le cas de la fonction créée d’une fonction de shortcode qui doit être exécutée automatiquement, si une page contenant la commande [publication_actuelle] est chargée. Pour ce faire, ajoutez le code suivant au fichier PHP :

add_shortcode ('publications actuelles', 'function publications actuelles');

Vous avez maintenant le nom du Shortcode [publication_actuelle], qui sera plus tard utilisé dans l’éditeur, et la fonction utilisée est définie. Pour qu’aucun conflit n’apparaisse entre les différents shortcodes WordPRess, il est important de choisir un nom clair et unique.

Définir des paramètres pour les shortcodes aux fonctions les plus importantes

Pour apporter plus de flexibilité à votre shortcode WordPress, vous avez la possibilité d’ajouter des paramètres optionnels. Avec l’exemple utilisé jusqu’ici, il s’agit de déterminer combien d’articles peuvent être affichés. Vous avez besoin d’une seconde fonction pour cela : la fonction shortcode _atts() d’une part, qui combine les attributs shortcode générés  par l’utilisateur avec des attributs natifs et qui entre automatiquement les valeurs par défaut nécessaires. D’un autre côté, la fonction PHP extract() est présupposée pour extraire les attributs de shortcodes. Indiquez la valeur 1 par défaut dans le cas où le champ d’argument reste libre, de la manière suivante ('posts' => 1):

function publications_actuelles_function($atts){
    extract(shortcode_atts(array(
        'posts' => 1,
    ), $atts));
    $return_string = '<ul>';
    query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
    if (have_posts()) :
        while (have_posts()) : the_post();
            $return_string .='<li><ahref="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
    endif;
    $return_string .= '</ul>';
    wp_reset_query();
    return $return_string;
}

Spécifiez maintenant le shortcode dans le texte, par exemple [publications_actuelles posts="5"], ce n’est pas seulement le dernier article qui apparaitra, mais bien l’énumération des 5 articles les plus récents.

Utiliser certains contenus comme paramètres de shortcode

Vous pouvez modifier l’exemple présenté plus haut et y ajouter de plus un élément de contenu comme paramètre tout à fait précis. Ce paramètre de contenu doit définir le titre d’un titre <h3> dans notre exemple. Complétez pour cela le script Callback avec la variable $content et insérez le titre HTML <h3> devant l’énumération <ul> :

function publications_actuelles_function($atts, $content = null) {
    extract(shortcode_atts(array(
        'posts' => 1,
    ), $atts));
    $return_string = '<h3>'.$content.'</h3>';
    $return_string .= '<ul>';
    query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
    if (have_posts()) :
        while (have_posts()) : the_post();
             $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
    endif;
    $return_string .= '</ul>';
    wp_reset_query();
    return $return_string;
}

De la même manière qu’un tag HTML, encadrez maintenant le titre souhaité dans votre texte avec un shortcode ouvrant et fermant :

[publications_actuelles posts ="5"]titre de l’énumération des articles récents [/publications_actuelles]

Utiliser un shortcode WordPress dans un Widget

Nous vous avons jusqu’à présent uniquement montré comment intégrer des shortcodes dans l’éditeur de texte WordPress. Il arrive aussi souvent que l’intégration de commandes dans un Widget comme une barre latérale s’avère intéressante et pertinente. WordPress ne reconnaît pas les shortcodes de manière standard mais vous pouvez vite changer cela grâce à une petite ligne de code supplémentaire dans le fichier PHP :

add_filter('widget_text', 'do_shortcode');

Avec ce code, vous signalez à WordPress de vérifier aussi les shortcodes des éléments textuels dans les Widgets.

Désactiver les shortcodes non utilisés

Si vous n’avez plus besoin d’un shortcode WordPress en particulier, vous avez deux possibilités pour le désactiver : la solution optimale serait de supprimer la fonction de rappel du fichier PHP ainsi que toutes les saisies de code de votre contribution. Si au lieu de cela vous n’effacez que la fonction de rappel, WordPress ne reconnaîtra plus le shortcode en tant que tel et le code apparaîtra en langage clair au milieu de l’article. Etant donné que cette méthode signifie un fort investissement pour les shortcodes fréquemment utilisés, il existe une seconde possibilité : au lieu d’effacer le code et la fonction PHP, la fonction de rappel est quasiment bloquée :

add_shortcode(publications_actuelles', '__return_false');

Shortcodes pratiques pour votre Blog

Après avoir eu un petit aperçu de la structure des shortcodes et leur intégration à WordPress, nous vous donnons des exemples de shortcodes pratiques pour votre utilisation.

Ajouter un lien sous forme de bouton

Pour ajouter un lien sous forme de bouton, il suffit d’un shortcode avec la fonction de rappel suivante :

function link_button_function( $atts, $content = null ) {
    return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('link-button', 'link_button_function');

Vous pouvez décider du graphisme du bouton à mettre en place simplement entre des shortcodes ouvrants et fermants :

[link-button]Cliquez ici![/link-button]

Afficher le menu WordPress

Vous pouvez afficher le menu choisi de votre projet WordPress dans un article avec le code suivant:

function menu_function($atts, $content = null) {
    extract(
        shortcode_atts(
            array( 'name' => zero, ),
            $atts
        )
    );
    return wp_nav_menu(
        array(
            'menu' => $name,
            'echo' => false
            )
    );
}
add_shortcode('menu', 'menu_function');

Si vous souhaitez utiliser ce shortcode, indiquez simplement le nom du menu respectif comme paramètre, comme par exemple :

[menu name="menu principal"]

Intégrer Google Maps

Avec la technologie Shortcode, vous pouvez intégrer simplement et rapidement des portions de cartes issues de Google Maps à votre projet, sans avoir à adapter le code source. Voici le code à ajouter dans le fichier PHP :

function googlemap_function($atts, $content = null) {
    extract(shortcode_atts(array(
        "width" => '640',
        "height" => '480',
        "src" => ''
    ), $atts));
    return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=IHR_API_SCHLUESSEL"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

Le shortcode qui fait partie des commandes standard est lié à trois paramètres : hauteur (height), largeur (width) et source Google Maps (src). Un tel code devrait donc ressembler à cela dans votre éditeur :

googlemap width="640" height="480" src= https://www.google.com/maps/place/Porte de Brandebourg/@52.5158015,13.3776636,233m?hl=de]

Plugins de shortcodes WordPress : la voie de la facilité

Pour tous ceux qui ne veulent ni créer leurs propres shortcodes, ni intégrer manuellement un fichier PHP préfabriqué, il reste encore une autre possibilité pour profiter de commandes utiles pour leur projet : déverrouiller des commandes pour votre propre projet. Vous trouverez un grand choix de plugins pour ajouter différents Shortcodes à votre projet WordPress sur le site officiel de WordPress. Vous pouvez par exemple avec l’extension Last Updated Shortcode accéder au shortcode du même nom [lastupdated], indiquant qu’un article a récemment été actualisé.   Avec plus de 50 shortcodes et un éditeur CSS, le plugin Shortcodes Ultimate représente un outil pratique pour votre blog. Grâce à ses fonctions, vous pouvez par exemple intégrer des commandes pour  gérer vos onglets, insérer des boutons, boîtes ou barres de menus diverses à votre WordPress. Si vous souhaitez utiliser des plugins de shortcodes, vous devriez garder ceci à l’esprit : les extensions utilisent des ressources et alourdissent votre projet Web en cas d’utilisation disproportionnée. La plupart du temps, vous ne savez par ailleurs pas non plus si un plugin est régulièrement actualisé ou s’il contient des lacunes en termes de sécurité. Il convient aussi de mentionner le fait qu’il n’y a pas seulement des plugins pour l’intégration de shortcodes, mais aussi pour la création et la gestion de vos propres fonctions de rappel. Voici une sélection d’exemples d’extensions permettant ceci :

  • Shortcoder : vous pouvez créer vos propres shortcodes avec des snippets HTML et JavaScript simples.
  • Shortcodes in Use : Avec cet outil d’administration, vous avez un aperçu des différents shortcodes sur vos articles ainsi que leur provenance (plugins, standards, définis par l’utilisateur).
  • Shortcode Reference : en installant ce plugin, vous obtiendrez un aperçu détaillé de tous les shortcodes disponibles pour votre installation WordPress pendant la création de votre contenu.
Cet article vous a-t-il été utile ?