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