Création d’un shortcode via un plugin

Depuis quelques années maintenant, WordPress est devenu très modulable au point de permettre la création de presque tous les types de sites web que ce soit site vitrine, site e-commerce, portfolio, blog, etc.

Cette modularité, le CMS le plus populaire sur le web le doit en grande à ses extensions (ou plugins en anglais). Une extension est un dossier qui contient un ou plusieurs fichiers PHP (mais aussi CSS et Javascript) et qui permet d’ajouter une ou plusieurs fonctionnalités sur un site WordPress. Cela peut être un système de boutique comme le fait WooCommerce, de la sécurité comme le fait SecuPress, de l’optimisation comme le WP Rocket et bien d’autres choses.

Ainsi n’importe quel développeur ayant des capacités en PHP et WordPress peut créer sa propre extension afin d’ajouter à son site la fonctionnalité qu’il souhaite (sous réserve que celle-ci ne soit pas déjà résolu par un plugin existant) ou simplement pour le mettre sur le répertoire de WordPress afin d’en faire profiter les utilisateurs.

Dans cette article nous allons voir comment créer une extension dans lequel nous allons créer un shortcode.

 

Les étapes.

La première étape pour créer une extension est de se rendre dans le dossier wp-content/plugins/. C’est dans ce dossier que sont placés tous les dossiers contenant le code des différents plugins installer sur le site WordPress.

C’est ici que l’on va créer notre dossier qui va contenir nos fichiers de l’extension. Ce dossier va prendre le nom de l’extension. Par exemple, si notre extension s’appelle My Plugin, le dossier s’appellera my-plugin. Dans ce dossier, on va créer le fichier principal de notre plugin qui prendra le même nom que le dossier par convention, ici my-plugin.php.

A l’intérieur de ce fichier et afin que l’extension soit prise en compte par WordPress, il va falloir y placer un en-tête au tout début. Il s’organise comme suit :

shortcode

On y retrouve :

– Plugin Name : Nom de l’extension qui apparaîtra dans la page Extensions de l’interface d’administration de WordPress

– Plugin URI : Site web de l’extension

– Description : description qui apparaîtra dans la page Extensions de l’interface d’administration de WordPress

– Version : la version en cours de l’extension

– Author : l’auteur de l’extension

– Author URI : Site web de l’auteur de l’extension

– Licence : la licence GPL

– Licence URI : le lien du site de la licence en question

– Text Domain : domaine pour la traduction du plugin

– Domain Path : chemin relatif des fichiers de traduction de l’extension

 

Seul Plugin Name est obligatoire pour que l’extension soit prise en compte par WordPress.

A présent l’extension figure dans la liste des plugins installés dans l’interface d’administration de WordPress et ne demande plus qu’à être activé !

Il ne nous reste plus qu’à y insérer du code.

Comme énoncé en début d’article, nous allons ajouter un shortcode via le plugin que nous venons de créer.

 

Qu’est-ce qu’un shortcode ?

Pour faire simple, un shortcode est un morceau de code que l’on va pouvoir utiliser dans ses articles, ses pages, ses sidebars, … sous forme d’instruction entre crochets.

Ils ont été introduits depuis la version 2.5 de WordPress afin d’apporter une multitude de fonctionnalités avec le moins d’efforts possible.

Nous allons donc créer un shortcode très simple afin de voir la démarche à suivre.

Dans le fichier principal de notre plugin, nous allons placer le code suivant.

shortcode

Expliquons ce code :

  • Premièrement nous allons déclarer la fonction qui servira à construire le corps de notre shortcode, c’est-à-dire ce qui sera affiché lorsque l’on va utiliser notre shortcode. Cette fonction prendra un ou deux paramètres : $atts et $content.
  • $atts correspond aux attributs que l’on va donner à notre shortcode. C’est un tableau associatif qui prend le nom de l’attribut en clé et sa valeur par défaut.
  • $content correspond au contenu du shortcode lorsque celui-ci est utilisé avec une paire de balises. Ex: [myshortcode] //contenu [/myshortcode].
  • Deuxièmement, nous allons ajouter le shortcode grâce à la fonction add_shortcode() qui prend en paramètres le nom que l’on veut donner à notre shortcode et la fonction de rappel créée précédemment afin d’afficher le contenu de notre shortcode. Ce qui donne pour notre exemple : [myshortcode langue=’FR’] et il nous affichera « IT Room, agence web sur la région lilloise » ([myshortcode] sans paramètres affichera la même chose car nous avons défini FR par défaut pour l’attribut langue).
  • Et enfin, nous remarquons qu’une fonction englobe le tout itroom_shortcode_demo_init(). Elle va nous permettre d’inclure l’ajout du shortcode via l’utilisation du hook action init.

On peut désormais utiliser notre shortcode dans les éditeurs de texte WYSIWYG de WordPress afin de générer le contenu attendu de ce shortcode.

WYSIWYG

Editeur WYSIWYG.

Le résultat sur la page sera le suivant :

affichage shortcode

Page du site web.

Note : Lorsque l’on crée un shortcode, il est recommandé de rédiger une documentation sur ce dernier et notamment sur les attributs disponibles et comment les utiliser.

Conclusion.

Les shortcodes ont été introduits dans WordPress afin de faciliter les choses pour ses utilisateurs développeurs comme non-développeurs.

Ainsi, la création de shortcodes permet de les inclure très facilement dans nos pages web grâce à une instruction entre crochets mais surtout sans avoir à réécrire une quantité de code qui peut parfois être abondante.

PrestaShop

Prestashop

Platinium partner

Shoppingfeed

Partner

Google

Premier Partner

Google Suite

Partner

Office 365

Partner

Recherche