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

janvier 2019

Quentin

3

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 :

Exemple d’utilisation du plugin WordPress

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 !

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

  1. Cédric ARN dit :

    super étape par étape on apprend à coder simplement, j’aivais longuement hésiter à le faire et je m’y met maintenant

  2. OliOne dit :

    Merci pour ce tuto. Vivement la suite.
    Beaucoup de tutos en ligne pour la création de plugin s’en tiennent aux bases.
    Difficile de mettre la main sur un tuto qui va plus loin, avec un panneau admin adapté au nouveau plugin créé.
    A quand la suite? Vous avez une date de publication prévue?

    1. Quentin dit :

      Bonjour et merci pour votre commentaire. Pour le moment, il n’y a pas de suite de prévu mais votre retour est intéressant. Ca me donne des idées 😉

Laisser un commentaire

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