Comment créer un shortcode personnalisé sur WordPress ?


Sur WordPress, la création de shortcodes vous ouvre tout un monde de possibilités de personnalisation de votre contenu. En bref, il s'agit d'un raccourci qui permet d'insérer facilement du code dans vos contenus sans avoir besoin de le taper à chaque fois. Lors de l'affichage de la page sur le site, ce raccourci est remplacé par le contenu du code : par exemple, le shortcode [formulairedecontact] devient un formulaire.

Dans cet article, je vous explique quels usages intéressants vous pouvez faire d'un shortcode et comment cela fonctionne pour créer un shortcode personnalisé sur WordPress, avec ou sans plugin.

A quoi peut servir la création d'un shortcode personnalisé sur WordPress ?

Un shortcode WordPress vous permet d'utiliser à plusieurs reprises un même bout de code sans avoir à le taper à chaque fois sur les pages. Il peut s'agir d'un code que vous avez écrit vous-même si vous maîtrisez le codage informatique ou d'un code que vous avez trouvé sur le web pour effectuer une action bien précise. Le recopier à chaque fois que vous en avez besoin serait fastidieux et peut-être source d'erreurs, on crée donc un raccourci vers ce code que l'on va pouvoir exploiter facilement sur toutes les pages où l'on en a besoin.

Un shortcode peut par exemple être utilisé pour...

  • Insérer du contenu dynamique : par exemple, vous souhaitez insérer un formulaire de contact, une galerie photo, un bloc de contenu précis à différents endroits, un raccourci peut vous permettre de le faire facilement.
  • Simplifier l'actualisation des articles : aujourd'hui, sur beaucoup de sujets, il est important de conserver des informations à jour pour qu'un article reste bien référencé sur les moteurs de recherche. On peut tout à fait imaginer créer un shortcode pour les données ayant besoin d'être réactualisées. On met à jour une seule fois le code et tous les articles où est utilisé ce shortcode sont automatiquement actualisés sans avoir à éditer manuellement chacun des contenus.
  • Personnaliser l'apparence du site : vous pouvez concevoir des call-to-action, des boutons, des onglets, des blocs personnalisés (mise en avant d'une offre, de chiffres clés, etc) que vous pouvez ensuite "appeler" à la demande grâce au raccourci à n'importe quel endroit où vous en avez besoin.
  • Simplifier la gestion du site : souvent, les personnes qui mettent à jour un site web au quotidien ne sont pas les mêmes que celles qui assurent le développement et la gestion technique du site. Dans une entreprise par exemple, c'est souvent l'équipe marketing-communication qui met à jour le contenu du site web et les développeurs et/ou le webmaster qui s'en occupent sur le plan technique. Utiliser des shortcodes permet à des gens qui ne maîtrisent pas le codage d'implémenter facilement des fonctionnalités complexes. Par exemple, même si Jeanne ne saurait pas du tout coder un formulaire de contact, elle peut en insérer un en 2 clics avec son shortcode, qui renvoie à un code informatique créé par un développeur.

Les shortcodes sont très utilisés par bon nombre d'extensions WordPress pour donner aux utilisateurs de la liberté dans l'utilisation qu'ils font du plugin. Par exemple, mes contenus longs comportent un sommaire listant les titres principaux des parties de l'article, le plugin propose un shortcode qui me permet de placer ce sommaire à l'endroit de mon choix si l'emplacement par défaut ne me convient pas.

En résumé, le shortcode WordPress rend l'ajout de contenu complexe accessible à des utilisateurs sans compétences en programmation.

Comment fonctionne un shortcode ?

On commence par écrire tout le code informatique auquel correspond le shortcode dans un fichier placé sur le serveur du site : en général, on le fait soit dans le fichier functions.php du thème actif, soit via une extension WordPress. On définit quel sera l'intitulé du shortcode et le code qu'il permet d'afficher. Si vous ne savez pas coder mais que vous comprenez le principe, vous pourrez réutiliser du code trouvé sur le web pour créer un shortcode personnalisé malgré tout !

Côté utilisateur, un shortcode se présente comme un texte écrit entre crochets, par exemple [galeriephoto]. On le place dans un article, une page ou un widget, à l'endroit où l'on souhaite faire apparaître le contenu.

Il peut comporter des attributs supplémentaires permettant de contrôler plus finement l'apparence ou le comportement du shortcode, par exemple [galeriephoto affichage="grandesimages" bordure="aucune"].

A chaque fois que WordPress va afficher une page ou un article où le shortcode est utilisé, il va le remplacer dynamiquement par le code informatique associé sans que l'utilisateur du site ait eu besoin de taper ce code.

La définition du shortcode est donc stockée dans les fichiers PHP du thème ou des plugins. En revanche, les utilisations du shortcode sont stockées dans la base de données de WordPress, au même titre que vos contenus.

Ordinateur portable avec code affiché

Comment créer un shortcode personnalisé ?

Pour créer un shortcode personnalisé sur WordPress, la première étape consiste à écrire le code de ce raccourci et à l'insérer sur votre site. Quand on débute, le plus simple est d'insérer les shortcodes dans le fichier functions.php du thème WordPress (ou du thème enfant) que vous utilisez. Si vous avez régulièrement recours à des shortcodes, il peut être intéressant d'en faire un plugin sur mesure...

Exemple de shortcode simple

Imaginons que je souhaite créer un shortcode simple pour afficher le nombre d'articles publié sur mon site, qui se mettra à jour automatiquement lorsque de nouveaux contenus seront publiés, comme je le fais actuellement dans la sidebar :

Affichage dynamique du nombre d'articles et commentaires sur WordPress
Affichage dynamique du nombre d'articles et commentaires sur WordPress

Ouvrez le fichier functions.php du thème ou thème enfant (lire ici plus de conseils pour le modifier) et ajoutez ce code à la fin :

function afficher_nombre_posts_shortcode() 
{
$nombre_posts = wp_count_posts()->publish;
return $nombre_posts;
}
add_shortcode('nombre_posts', 'afficher_nombre_posts_shortcode');

Vous pouvez aussi commenter le code pour vous souvenir ensuite plus facilement à quoi correspond chaque shortcode, par exemple en ajoutant ces lignes au-dessus :


// ==================================================================
// Afficher le nombre d'articles publiés
// ==================================================================
function afficher_nombre_posts_shortcode() 
{
$nombre_posts = wp_count_posts()->publish;
return $nombre_posts;
}
add_shortcode('nombre_posts', 'afficher_nombre_posts_shortcode');

Notez qu'il est préférable de faire ces changements dans un thème enfant (child theme) pour éviter de perdre vos modifications lors des mises à jour du thème principal.

Ensuite, pour insérer le shortcode dans un article ou widget, il suffit d'écrire [nombre_posts] à l'endroit de votre choix. WordPress remplacera automatiquement le shortcode par la bonne information.

Exemple de shortcode plus complexe

Imaginons maintenant que je souhaite créer un autre shortcode, [derniers_posts], qui afficherait la liste des derniers articles publiés sur votre site, avec des options pour personnaliser le nombre de posts à afficher et éventuellement une catégorie spécifique.

Cette fois-ci, insérez ce code dans functions.php :


// ==================================================================
// Derniers articles publiés
// ==================================================================
function afficher_derniers_posts_shortcode($atts) {
    // Attributs par défaut
    $atts = shortcode_atts(
        array(
            'nombre' => 5,     // Nombre de posts à afficher
            'categorie' => '', // Possibilité de spécifier une catégorie spécifique, laisser vide pour toutes les catégories
        ),
        $atts,
        'derniers_posts'
    );

    $query_args = array(
        'post_type' => 'post',
        'posts_per_page' => intval($atts['nombre']),
        'category_name' => sanitize_text_field($atts['categorie']),
        'order' => 'DESC',
        'orderby' => 'date'
    );

    $query = new WP_Query($query_args);
    $output = '';

    if ($query->have_posts()) {
        $output .= '';

        // Réinitialiser la requête post globale
        wp_reset_postdata();
    } else {
        $output .= 'Aucun post trouvé.';
    }

    return $output;
}
add_shortcode('derniers_posts', 'afficher_derniers_posts_shortcode');

Pour insérer la liste des derniers posts dans un article ou widget, vous pouvez tout simplement utiliser le shortcode [derniers_posts] . Vous pouvez aussi le personnaliser en indiquant un nombre d'articles à afficher (5 par défaut) et une catégorie spécifique en mentionnant son slug, par exemple [derniers_posts nombre="10 categorie="creer-un-blog"].

Il est bien sûr possible d'envisager des shortcodes encore plus complexes en utilisant par exemple des API externes, ou de travailler davantage l'apparence du rendu avec le langage CSS.

Comment créer des shortcodes WordPress avec un plugin ?

Il existe de nombreux plugins WordPress qui facilitent la création et la gestion des shortcodes. Ces plugins sont particulièrement utiles si vous n'êtes pas à l'aise avec la programmation ou si vous cherchez une solution rapide et flexible.

Citons quelques références...

1) Shortcodes Ultimate, qui propose une vaste gamme de shortcodes prêts à l'emploi (onglets, boutons, sliders, carousels, vidéos responsive, etc).

2) Des plugins d'insertion de code PHP, qui permettent d'écrire son code et de créer un shortcode associé directement dans l'interface de WordPress, comme WP Code ou Insert PHP Code Snippet.

3) Shortcoder, qui permet de créer des shortcodes avec votre propre contenu HTML, JavaScript et CSS. C'est une excellente option pour créer des shortcodes personnalisés sans écrire de code PHP.

4) Intense Shortcodes, qui inclut plus de 110 shortcodes pour insérer des onglets, des tableaux de prix, un menu, des accordéons, des effets au survol sur des images, des players audio, des vidéos, etc.

Les shortcodes fonctionnent-ils partout sur WordPress ?

Par défaut, les shortcodes sont conçus pour fonctionner dans le contenu des articles et des pages de WordPress. On peut également les utiliser dans les widgets du thème WordPress. Depuis WordPress 4.9, cette fonctionnalité est prise en charge par défaut, il n'est plus nécessaire de l'activer.

En revanche, par défaut, les shortcodes ne sont pas actifs dans les extraits d'articles (excerpts) ou dans les titres d'articles ou de pages. Toutefois, vous pouvez modifier ce comportement par défaut en ajoutant du code dédié dans le fichier functions.php de votre thème WordPress (ou thème enfant).

Ouvrez le fichier functions.php dans le répertoire du thème qui se trouve dans "wp-content" > "themes". A la fin de ce fichier, ajoutez ce filtre personnalisé qui permet d'utiliser les shortcodes dans les extraits :

add_filter('the_excerpt', 'do_shortcode');

Et/ou celui-ci qui permet de les activer dans les titres de posts et pages :

function enable_shortcode_in_titles($title) 
{
return do_shortcode($title);
}
add_filter('the_title', 'enable_shortcode_in_titles');

J'espère que cet article vous aidera à tirer profit de tout le potentiel des shortcodes !


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *



Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.