Comment créer un plugin WordPress qui affiche un message à la fin de chaque article ?

Cet article vise à vous montrer la création d’une extension toute simple pour WordPress. Nous allons passer en revue les choses basiques à connaître pour créer un plugin WordPress. Go !

L’objectif est de créer un plugin qui affiche un message promotionnel à chaque fin d’article.

La structure d’un plugin WordPress

Commençons par créer un dossier « promopost » et créons un fichier « promopost.php » dedans. Ouvrez maintenant le fichier « promopost.php » avec un éditeur de code. Le nom du dossier et le nom du fichier php doivent être identiques et en minuscules ;).

Ajoutons le code suivant au début de notre plugin :

<?php
    /*
    Plugin Name:  PromoPost
    Plugin URI:   https://www.tutowp.fr/tutowp
    Description:  Ajout d'un message promo à la fin de tous les posts WordPress
    Version:      1.0
    Author:       TutoWP
    Author URI:   https://www.tutowp.fr/tutowp
    */

Ce code permet de définir les réglages de base de notre plugin. Son nom, son url, sa version etc.

Ajoutons la ligne suivante à la suite de notre code :

defined('ABSPATH') or die('Oups !');

Cette portion de code permet d’éviter l’accès direct au fichier du plugin. C’est une mesure de sécurité. Nous pouvons maintenant rentrer dans le vif du sujet !

Commençons la création de notre plugin WordPress

La création de plugin sur WordPress fait généralement appel à des hooks et des filtres. Ces deux concepts sont deux pierres angulaires du fonctionnement de WordPress.

Qu’est ce qu’un hook WordPress ?

Les hooks permettent d’afficher ou de faire des actions à certains endroits de WordPress. Par exemple, il existe un hook permettant d’ajouter des éléments dans le header du site.

Qu’est ce qu’un filtre WordPress ?

Les filtres permettent de modifier les contenus de WordPress avant qu’ils s’affichent chez l’utilisateur.

Comment utiliser les hooks et filtres pour notre plugin ?

Pour les besoins de notre plugin, nous allons utiliser un filtre pour ajouter du contenu à la fin de nos articles puis un hook pour ajouter un fichier css afin de mettre en forme ce contenu.

Ajoutons ceci à notre code :

function pp_add_promo($the_content){

    $promo = '<div class="promo">';
        $promo .= '<p>Vous voulez apprendre à créer un thème WordPress facilement ? <a href="https://www.tutowp.fr/comment-creer-un-theme-wordpress-facilement/">Suivez notre cours</a> !</p>';
    $promo .= '</div>';

    return $the_content.$promo;
}
add_filter('the_content', 'pp_add_promo');

Nous créons une fonction « pp_add_promo » qui prend en paramètre $the_content (qui correspond au contenu original de l’article).

Dans cette fonction, nous créons une variable $promo qui contient le HTML de notre message. La ligne 7 permet de retourner le contenu de notre article + le contenu promotionnel. (La concaténation des deux textes s’effectue grâce au « . »)

La fonction « add_filter » permet d’associer notre fonction « pp_add_promo » au filtre « the_content ». C’est là que la magie opère.

Lorsque WordPress affiche le contenu d’un article, il vérifie s’il existe une fonction associée au filtre « the_content ». Si c’est le cas, WordPress exécute la fonction associée en donnant à cette fonction le contenu de l’article. La fonction exécutée doit retourner le nouveau contenu.

Ainsi, dans le cas de notre plugin, nous récupérons le contenu de l’article et nous ajoutons un message promotionnel à la suite de celui-ci.

Il ne reste plus qu’à ajouter un fichier css pour mettre en forme le contenu.

Ajout d’un fichier css à notre plugin WordPress

Pour commencer, créez un fichier « promopost.css » dans le dossier « promopost » puis ajoutez ce contenu dans le fichier :

.promo {
    background: #ececec;
    padding: 2rem;
    text-align: center;
}

Ce code css basique permet de mettre un fond gris, de centrer le contenu et de mettre une marge intérieure à notre bloc .promo créé auparavant.

Enfin, ajoutons le code suivant à notre plugin (dans le fichier « promopost.php ») :

function pp_style() {
    wp_enqueue_style('promopost', plugin_dir_url(__FILE__).'/promopost.css');
}
add_action('wp_enqueue_scripts', 'pp_style');

Nous créons une fonction « pp_style » qui fait appel à la fonction wp_enqueue_style (qui permet de charger le fichier css de notre plugin). Pour faire appel à un fichier qui est dans le dossier du plugin, il faut utiliser la fonction « plugin_dir_url(__FILE__) ».

Enfin, nous associons notre fonction « pp_style » au hook « wp_enqueue_scripts ». Ce hook « wp_enqueue_scripts » permet de charger les scripts et les fichiers css dans WordPress.

Activation du plugin et résultat

Il ne reste plus qu’à activer votre plugin en vous rendant dans le menu « Extensions » de WordPress.

Une fois fait, admirez le résultat :

Nous pourrions améliorer ce plugin pour faire en sorte que le message soit administrable dans le backoffice de WordPress mais cela fera l’objet d’un autre article 🙂

Bonne création !

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !