bannière de la page Créer un shortcode sur WordPress

Créer un shortcode sur WordPress

Accueil » Blog » Wordpress » Créer un shortcode sur WordPress

Le shortcode sur wordpress est un incontournable dans le développement d’un thème. Il sert principalement à injecter du code (PHP, HTML, JS et/ou CSS) a n’importe quel endroit de notre site. Vous avez la possibilité d’injecter un shortcode dans n’importe quel zone de texte de wordpress. Vous pouvez l’ajouter dans le wysiwyg de la rédaction d’un article, d’une page, mais aussi dans le widget text natif à WordPress.

Quelques exemples d’utilisations du shortcode sur wordpress

Cas numéro 1

Vous souhaitez afficher le même code html (texte, image, tableau, boutton, etc.) à plusieurs reprises sur votre site, les shortcode se prettent très bien à ce cas. Vous allez attribuer votre code à votre shortcode dans votre fichier functions.php. Ainsi, vous pouvez ajouter votre code HTML grâce au shortcode sur wordpress.

Cas numéro 2

Vous souhaitez afficher une liste d’éléments récupérés par un custom post, vous avez la possibilité de faire tout ce traitement en PHP et de l’afficher encore une fois où vous le souhaitez sur votre site.

Le Format d’un shortcode

Pour écrire un shortcode, cela se présente de cette façon : [mon_shortcode]. C’est ce bout de code que vous placerez dans votre éditeur de texte. Il vous ai aussi possible de passer des paramètre à votre shortcode de cette manière : [mon_shortcode name= »Alexandre »]. Ainsi, j’ai envoyé un paramètre name avec la valeur Alexandre. Ce paramètre je vais pouvoir le récupérer pour le traiter. On peut très bien imaginer que je passe en paramètre le nom d’un post type pour récupérer des post type particulier.

 

Shortcode sur wordpress

 

Comment définir un shortcode sur wordpress ?

Pour créer un shortcode, rien de plus simple. Il vous suffit d’aller dans votre fichier functions.php à la racine de votre thème et d’ajouter ce code :

// Déclaration du shortcode "mon_shortcode"
add_shortcode("mon_shortcode", "monshortcode");

// Fonction de rappel pour le shortcode "mon_shortcode"
function monshortcode() {
    return "Bonjour !";
}

Dans ce cas précis, vous avez la possibilité de mettre le shortcode [mon_shortcode] dans l’éditeur de texte.

Si vous souhaitez faire un traitement (comme récupérer des posts par exemple), vous pouvez le faire directement dans la fonction « monshortcode ». Il est surtout très important de retourner l’HTML et surtout de ne pas faire un echo. Car les shortcode sont chargés tout au début du traitement de la page et seulement affiché là où on souhaite les afficher.

 

Récupérer mes paramètres

Pour récupérer les attributs de mon shortcode, rien de plus simple. Je peux passer en paramètre de ma fonction une variable qui sera un tableau avec tous mes attributs. Pour récupérer le nom sur cet exemple :

[mon_shortcode name="Alexandre"]

Je dois faire comme ceci :

// Enregistrer le shortcode "mon_shortcode"
add_shortcode( "mon_shortcode", "monshortcode" );

// Définir la fonction "monshortcode"
function monshortcode(){
    return "Bonjour !";
}

ainsi, le code qui sera affiche est : « Bonjour Alexandre ! »