Comment utiliser les shortcodes WordPress ?

Grâce aux codes courts WordPress que l’on appelle Shortcode, il est possible d’intégrer des éléments interactifs à vos pages, mais aussi créer des mises en pages complexes sur votre site. Cela signifie utiliser des ShortCode sur votre hébergement WordPress.

En effet, si vous désirez par exemple ajouter une galerie d’images à votre site, il vous suffira de saisir le code suivant :

utiliser les shortcodes

Le shortcode ci-dessus permet de mettre en place une galerie d’images comprenant quatre colonnes d’une taille moyenne.

De ce fait, les codes courts permettent d’éliminer les besoins en scripts, parfois complexes. De plus, l’ajout de ces derniers ne nécessite pas de compétences en matière de codage. Les shortcodes sont devenus au fil du temps, l’un des moyens les plus populaires pour créer et mettre en place vos différents contenus.

Cet article va vous permettre de comprendre le fonctionnement des codes courts. De plus, vous allez découvrir comment utiliser l’API permettant de créer les vôtres.

Qu’est-ce qu’un Shortcodes ou code court ?

La plupart du temps, un code court utilise des balises entre crochet, les crochets permettant de définir leur utilisation. De plus, chacun d’eux à une fonction bien particulière tel que l’intégration d’un diaporama, la mise en place d’un formulaire de contact ou bien encore, ajouter un tableau comparatif de vos tarifs.

Histoire des shortcodes

Les codes courts encore appelé shortcodes ont vu le jour en 1998 lors de la première utilisation de ces derniers sur un forum nommé UBB (Ultimate Bulletin Board). En effet, à cette période, ils ont introduits le BBCode (Bulletin Board Code), une collection de balises pouvant être utilisé par les visiteurs du forum.

Bien que BBCode soit beaucoup plus simple et léger que le codage HTML, ce dernier fonctionne sur le même principe. L’utilisation de ces balises est cependant beaucoup plus sûre que du HTML dans la mesure où les utilisateurs ne peuvent pas introduire de code HTML, et de ce fait introduire des vulnérabilités en matière de sécurité.

Peu après cette première utilisation, d’autres CMS, principalement des forums tel que PHPBB et vBulletin ont intégrés cette fonctionnalité.

WordPress interdit le code PHP de s’exécuter à l’intérieur du contenu du site pour les mêmes raisons de sécurité. De ce fait, afin de surmonter cette limite, depuis la version WordPress 2.5 sorti en 2008, les codes courts ont aussi été intégrés à ce CMS.

Que sont les codes courts WordPress ?

Les codes courts WordPress permettent de mettre en place différents contenus sur votre site mais aussi de personnaliser votre mise en page sans avoir besoin de connaissance en codage et sans avoir besoin de créer de script HTML.

Quels sont les deux types de shortcodes?

WordPress dispose de deux types de shortcodes qui sont les suivants :

  • Codes courts à fermeture automatique : Ces derniers n’ont pas besoin de balises de fermeture tel que le code caption.
  • Codes courts de fermeture : A l’inverse du code court à fermeture automatique, il est nécessaire de disposer d’une balise de fermeture.

Quels sont les codes courts par défaut sur WordPress ?

Dès l’installation de WordPress, vous disposez de 6 shortcodes préinstallé qui sont les suivantes :

  • audio : Permet l’intégration de fichiers audios.
  • caption : Permet principalement d’ajouter des légendes à vos images, cependant ce dernier peut aussi être utilisé pour n’importe quel élément HTML
  • embeb : Grâce à ce raccourci, il vous est possible de définir différents attributs à vos incorporations.
  • gallery : ce code court permet l’insertion d’une galerie d’images à votre site.
  • playlist : Affiche votre collection de fichiers audios et vidéos.
  • video : Si vous désirez intégrer une vidéo à votre site, il vous sera nécessaire d’utiliser ce code qui permet de lire des vidéos dans plusieurs formats tel que mp4, webm, m4v, webm, ogv, wmv, flv.

Comment utiliser les Shortcodes WordPress ?

Bien que l’insertion des codes courts WordPress soit à la portée de tous, il est nécessaire de bien comprendre le fonctionnement de ces derniers. En effet, il est préférable d’apprendre les différents attributs supportés afin d’obtenir un rendu conforme à vos attentes.

Comment utiliser les shortcodes dans les pages et articles ?

Si vous utilisez l’éditeur Gutenberg pour créer vos pages et articles, vous pouvez utiliser la balise « Code court » se trouvant dans la section « Widgets« .

utiliser les shortcodes

Si vous utilisez l’éditeur classique, l’insertion du code court s’effectue directement dans l’éditeur de texte.

utiliser les shortcodes

Comment utiliser les Shortcodes dans les widgets de barre latérales ?

Tout comme vous avez été en mesure d’insérer des codes courts sur vos pages et articles, vous pouvez le faire dans les widgets de la barre latérale. Pour cela, rendez-vous sur « Apparence/Widget » et ajoutez un widget « Texte » dans la section sur laquelle vous désirez ajouter un code.

utiliser les shortcodes

Il est à noter que les codes courts sur les widgets ne fonctionne pas avec les versions WordPress 4.8 et inférieure.

Comment utiliser les Shortcodes de WordPress dans le header et le footer ?

Bien que les codes courts soient généralement destinés à vos pages et articles, il est tout de même possible de les insérer à n’importe quel endroit de votre site.

De ce fait, si vous avez envie d’ajouter un bouton d’appel à l’action sur votre pied de page (footer) ou dans la rubrique commentaire d’un article, cela reste possible.

En effet, pour cela, il vous faudra ajouter le code suivant dans le fichier concerné par l’ajout, soit header.php, soit footer.php:

<?php echo do_shortcode("[nom_du_code_court]"); ?>

Cette manipulation permettra d’afficher le code court à l’endroit défini par vos soins.

API des codes courts WordPress : Introduction

Grâce à l’API des codes courts, il vous est possible d’utiliser les codes courts, mais aussi les personnaliser afin d’étendre leurs fonctionnalités. De ce fait, il vous est possible de créer du contenu unique pour votre site WordPress tel qu’un diaporama, un slide ou un formulaire de contact.

De plus, l’API prend en charge, les deux types de codes courts, que ces derniers soient à fermeture automatique ou pas.

Comprendre les bases de l’API de Shortcodes

Dès qu’une page est ouverte sur WordPress, les codes courts enregistrés sont recherchés dans le but de les traiter.

En effet, dès qu’un code court est trouvé, l’API des codes courts prend le relais afin de renvoyer l’affichage de ce dernier.

Vous pouvez enregistrer un code court sur WordPress grâce à la fonction add_shortcode() comme suit :

add_shotcode( 'shortcode_name', 'shortcode_handler_function' );
  • shortcode_name : lors de l’analyse du contenu des articles, la balise sera recherché. Il est recommandé de n’utiliser que des minuscules, des chiffres et underscores lors de la définition de la valeur du code court.
  • shortcode_handler_function : Il s’agit de la fonction du callback qui sera exécutée dès confirmation de la présence d’un code court par WordPress.
  • $atts : Il s’agit du tableau associatif d’attributs. Si cette valeur n’est pas défini, la chaîne sera défini vide par défaut.
  • $content : Le contenu de fermeture que vous allez pouvoir définir.
  • $tag : Cela est intéressant sur deux codes courts partagent la même fonction valide. En effet, dans ce cas, la valeur $tag permettra de déterminer le code court qui doit déclencher la fonction handler.

Où ajouter vos scripts personnalisés de Shortcodes ?

Vos scripts personnalisées s’insèrent dans le fichier functions.php de votre thème. Vous pouvez aussi inclure ces derniers dans une extension.

Dans le cadre de l’ajout à votre thème, il vous est possible d’exécuter la fonction add_shortcode().

Cependant, la manipulation est différente si vous désirez l’ajouter à une extension. En effet, il est recommandé dans ce deuxième cas, de ne l’initialiser qu’après le chargement complet de WordPress. Pour cela, vous pouvez envelopper la fonction add_shortcode() dans un autre fonction comme dans l’exemple suivant :

function shortcodes_init() {
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La fonction add_action() permettra d’accrocher la fonction shortcodes_init afin de déclencher cette dernière qu’une fois le chargement de WordPress fini.

Comment créer un Shortcodes personnalisé sur WordPress ?

Maintenant que les bases ont été abordées concernant les codes courts, il est temps de commencer d’en créer.

Pour cela, il est nécessaire de disposer de quelques connaissances en PHP afin de savoir modifier vos fichiers de thèmes WordPress.

1. Shortcodes utilisant [current_year]

Dans cette partie, nous allons créer un code court [current_year] permettant d’afficher l’année en cours sur votre site internet.

Pour cela, nous allons utiliser une extension barebones permettant d’ajouter des fonctions de code court.

Pour cela, il est nécessaire en premier lieu, de créer une nouvelle extension. Rendez-vous sur votre espace FTP, dans le répertoire « /wp-content/plugins/ »

utiliser les shortcodes

Nommez votre plugin « codecourt » ou le nom de votre choix.

utiliser les shortcodes

Allez dans le répertoire que vous venez d’ajouter afin de créer un fichier php du même nom que votre répertoire. Dans notre cas, le nom du fichier sera codecourt.php.

utiliser les shortcodes

Une fois le fichier créé, éditez-le et ajoutez-y l’entête suivant :

<?php
/*Plugin Name: codecourt
Version: 1.0
Description: Mise en place de l'année en cours sur WordPress
Author: Yves Dupond
Author URI: https://exemple.com
Licence: GPLv2 or later
Licence URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codecourt
*/

Ce simple code est actuellement suffisant. Enregistrez le fichier puis rendez-vous sur votre Tableau de bord WordPress afin d’activer l’extension.

utiliser les shortcodes

La deuxième étape consiste à enregistrer le code court et sa fonction handler en ajoutant le code suivant sur notre fichier codecourt.php :

/**
*[current_year] Retourne l'année en cours
* @return string Current Year*/
add_shortcode( 'current_year', 'codecourt_year' );
function codecourt_init(){
function codecourt_year(){
return getdate()['year'];
}
}
add_action('init', 'codecourt_init');
?>

Voici comment lire le code :

  • La balise @return se trouvant dans le commentaire PHP en haut de code permet de définir le type de sortie renvoyée.
  • current_year : Il s’agit de la balise de fermeture automatique que vous devez ajouter à votre contenu.
  • codecourt_year : défini le nom de la fonction de traitement des codes courts permettant le renvoi de la chaîne de sortie.
  • codecourt_init : fonction d’encapsulation reliée à « init ». Cela permet de s’assurer que le code soit uniquement exécuté après chargement complet de WordPress.
  • getdate() : fonction PHP renvoyant un tableau d’informations sur la date de l’horodotage actuel.

Afin de tester le code court qui vient d’être créé, il suffit d’insérer ce dernier à n’importe quel endroit, par exemple sur une page WordPress.

utiliser les shortcodes

Si cela fonctionne, vous devriez visualiser ceci sur la page sur laquelle le code a été inséré :

utiliser les shortcodes

2. Shortcodes pour un bouton d’appel à l’action

Il est possible de créer un code court d’appel à l’action. Tout comme le premier exemple, il s’agit d’une balise à fermeture automatique.

Dans la mesure où le résultat final est un bouton, ses attributs tels que href, id, class, target et label peuvent être utilisé afin de le personnaliser.

De plus, il vous est possible d’utiliser les attributs tel que class et id afin de styliser vos boutons.

Afin de mieux comprendre, je vous invite à copier-coller dans le fichier concerné, le code suivant

add_shortcode( 'cta_buttun', 'codecourt_cta' );

function codecourt_cta( $atts ) {

$a = shortcode_atts( array(

'link' => '#',

'id' => 'codecourt',

'color' => 'blue',

'size' => '',

'label' => 'Button',

'target' => '_self',

), $atts );

$output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' .esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';

$output;

Afin de mieux comprendre ce code, voici un aperçu de ce dernier, ligne par ligne :

  • shotcode_atts() : Cette fonction WordPress permet de combiner les attributs de code court de l’utilisateur avec des attributs connus. De ce fait, le tableau sera un tableau contenant toutes les clés des attributs connus, fusionnées avec les valeurs des attributs de code courts définis par l’utilisateur.
  • Une variable ( $a) est défini dans la fonction des gestions des codes courts. En effet, grâce à la syntaxe ‘attribute’ => ‘valeur-defaut’, nous allons pouvoir attribuer une valeur à chaque attribut.
  • Grâce à la syntaxe PHP pour les tableaux « $a[‘attribut’]« , il va être possible d’extraire les valeurs de chaque clé d’attribut.
  • Enfin, la variable $output permet de stocker le code HTML de l’élément bouton.

Vous pouvez tester le fonctionnement du code en l’insérant sur une page :

utiliser les shortcodes

Grâce au code court, il est possible de personnaliser la taille et la couleur du bouton. Dans le code ci-dessus, nous avons déjà défini les valeurs par défaut dans la fonction de traitement. Cependant, il est nécessaire d’inscrire et faire figurer la feuille de style dans la liste des ressources disponibles.

Vous pouvez pour cela, ajouter le code suivant dans votre fichier :

/** CSS pour bouton CTA */

function salcodes_enqueue_scripts() {

global $post;

if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {

wp_register_style( 'salcodes-stylesheet', plugin_dir_url( __FILE__ ) . 'cdd/style.css' );

wp_enqueue_style( 'salcodes-styleheet' );

}

}

add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La fonction salcodes_enqueue_scripts() permet de définir la variable globale $post. De plus, cela permet de confirmer deux conditions via :

  • is_a() : permet de vérifier si $post est une instance de l’objet.
  • has_shortcode() vérifie que le contenu de l’article contient bien le code court [cta_button].

De ce fait, si les deux conditions sont remplies, la fonction enregistre et mets la feuille de style dans la file d’attente. En dernier, la fonction plugin_dir_url() permet d’obtenir l’url du répertoire de l’extension.

3. Shortcodes en utilisant $content

Le dernier exemple consiste à construire un code court appelé [boxed] permettant d’afficher n’importe quel contenu entre ses balises dans une boîte avec des titres colorés.

En premier lieu, enregistrez le code court et définissez sa fonction dans le gestionnaire :

/**
*[boxed] retourne le code HTML pour votre boite avec des titres colorés
*$return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );
function salcodes_boxed( $atts, $content = null, $tag = ' ' ) {
$a = shortcode_atts( array (
'title' => 'Title',
'title_color' => 'white',
'color' => 'blue',
), $atts );
$output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' .esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';

return $output;

}
  • $content = null : permet l’enregistrement du code court comme un type d’encapsulation.
  • $tag : défini la variable $tag du code court.

Dans cet exemple, nous allons utiliser des styles CSS en ligne afin de modifier le contenu.

Comme dans l’exemple précédent, les styles utilisés à l’intérieur des codes courts seront mis en file d’attente.
Pour cela, nous allons mettre à jour la fonction salcodes_enqueue_scripts() :

/** Enqueue Styles 
function salcodes_enqueue_scripts() {
global $post;
$has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );

if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
wp_register_style( 'salcodes-styleheet', plugin_dir_url( __FILE__ ) . 'css/style.css' );
wp_enqueue_style( 'salcodes-stylesheet' );
}
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La variable $has_shortcode est une variable permettant de vérifier su l’un des codes courts existe sur la page ou un article. Cette variable est définie par l’utilisateur.

Avantages et inconvénients des Shortcodes de WordPress

Les avantages sont les suivants :

  • Cela permet de simplifier l’ajout de fonctionnalité à votre site WordPress grâce à une ligne de code.
  • Ils permettent de ne pas être obligé d’écrire de scripts complexes pour chaque insertion.
  • Plus simple que d’ajouter du code HTML à votre site
  • Vous avez la possibilité de les regrouper dans la même extension, ce qui vous permettra de les garder, même en cas de changement de thèmes.
  • Si vous êtes développeur Web, le fait d’avoir tous les codes près à l’emploi peut être un atout et vous faire gagner du temps.
  • Vous pouvez modifier le comportement d’un code grâce à l’ajout d’un attribut.

Les inconvénients sont les suivants :

  • Les codes courts ne sont pas intuitifs pour l’utilisateur final. Ces derniers sont de ce fait, plus adaptés pour les développeurs Web.
  • Si vous intégrer un code court à un thème, ils ne fonctionneront plus en cas de changement de ce dernier.
  • Les codes courts peuvent casser le HTML en raison de balises conflictuelles
  • Les codes courts ajoutent une charge supplémentaire à votre serveur. De ce fait, plus le nombre augmente, plus la charge va augmenter.

Shortcodes et blocs Gutenberg

L’arrivé de Gutenberg a réduit l’utilisation des codes courts. En effet, il est désormais possible en utilisant cet éditeur, d’ajouter des blocs depuis son interface.

De plus, Gutenberg propose un bloc dédié à la mise en place de codes courts. De ce fait, de nombreux développeurs proposent désormais des produits et services compatible avec Gutenberg.

Conclusion

Bien qu’il soit facile d’ajouter de nouvelles fonctionnalités à votre site WordPress en utilisant des codes courts encore appelé shortcode, il est préférable de disposer d’un minimum de connaissance en codage.

Commander

Tutoriels relatifs

Barre Before Footer

Hébergez votre site web Wordpress dès aujourd’hui !