Objectifs
WordPress propose depuis longtemps un système bien pratique pour ajouter des widgets ou des fonctions dans des pages bien précises.
On va expliquer ici comment le faire simplement.
Par la suite, on va essayer de voir s’il est possible d’appeler ces shortcodes de manière asynchrone via ajax.
Organisation
Je créé un dossier mesShortcodes dans wp-content/plugins/.
Un shortcode simple
Fonction du shortcode
On créé un shortcode dont le but est d’afficher « coucou, je suis un shortcode ».
Dans le dossier mesShortcodes, on créé le fichier monPremierShortcode.php
monPremierShortcode.php
<?php
/*
* Plugin Name: Super Coucou Shortcode
* Description: Affiche "coucou, je suis un shortcode !" où vous voulez sur la page !
* Version: 1.0
* Author: Vous
* Author URI: https://www.labriquehurlante.com
*/
// On créé notre petite fonction qui affichera le texte
function mon_premier_shortcode(){
return "coucou, je suis un shortcode !";
}
// Ajoute le shortcode nommé "coucou", qui appellera la fonction mon_premier_shortcode()
add_shortcode('coucou', 'mon_premier_shortcode'); ?>
Activation
On active le plugin dans le panneau des extensions
Ensuite, plus qu’à écrire notre shortcode dans la page, comme suit :
Résultat
Donne : coucou, je suis un shortcode !
Shortcode avec des paramètres
Il est possible d’entrer des paramètres dans un shortcode. Ici on va modifier notre premier exemple afin que par défaut il affiche la phrase de base, et si on entre un texte en paramètre, il affiche ce texte.
Le code modifié
<?php
/*
* Plugin Name: Super Coucou Shortcode
* Description: Affiche "coucou, je suis un shortcode !" ou un texte personnalisé
* Version: 1.1
* Author: Vous
* Author URI: https://www.labriquehurlante.com
*/
function mon_premier_shortcode($atts) {
// extract change les valeur du tableau en variables
extract(shortcode_atts(
array(
'texte' => 'coucou, je suis un shortcode !'
), $atts));
return $texte;
}
add_shortcode('coucou', 'mon_premier_shortcode');
?>Et cette fois-ci on peut insérer un paramètre :
Résultats
donne :
coucou, je suis un shortcode !
donne :
Je vous salue bien bas !
Appel de fichiers
On peut mettre tout ce qu’on veut finalement, puisque c’est une fonction qui est appelée. Ici on va appeler un fichier shortcode.css créé dans le même répertoire que notre fichier monPremierShortcode.php.
shortcode.css
p.monShortcode {
background-color: #2ba6cb;
color: #ffffff;
padding: 1rem;
}monPremierShortcode.php
<?php
/*
* Plugin Name: Super Coucou Shortcode
* Description: Affiche "coucou, je suis un shortcode !" ou un texte personnalisé
* Version: 1.3
* Author: Vous
* Author URI: https://www.labriquehurlante.com
*/
function mon_premier_shortcode($atts) {
// extract change les valeurs du tableau en variables
extract(shortcode_atts(
array(
'texte' => 'coucou, je suis un shortcode !',
'design' => false
), $atts));
// Si le paramètre design vaut true
if($design == true) {
// On appelle le fichier css
wp_enqueue_style( 'shortcode-css',
content_url() . '/plugins/mesShortcodes/shortcode.css',
array() );
// on renvoit notre texte avec une classe
return "<p class='monShortcode'>" . $texte . "</p>";
} else {
return $texte;
}
}
add_shortcode('coucou', 'mon_premier_shortcode');
?>Résultat
donne :
salut, ça va?
Annexes
Source de l’image : pritect.net