Comment coder une extension WordPress : Tutoriel complet

Coder une extension WordPress : Tutoriel complet pas à pas à l’aide d’un cas concret : Coder une extension WordPress qui estime le temps de lecture d’un article à partir d’un nombre de mots.

Vous pouvez retrouver cette extension WordPress et l’intégralité des scripts détaillé ci-dessous sur mon dépôt GitHub : https://github.com/crea-troyes/wp-temps-lecture.

Objectif du tutoriel : Apprendre à créer un plugin WordPress de A à Z qui affiche automatiquement le temps de lecture estimé d’un article, à partir du nombre de mots.

Pourquoi créer un plugin WordPress ?

WordPress est la plateforme de blogging la plus utilisée au monde. Elle permet d’étendre ses fonctionnalités grâce aux plugins WordPress. Créer votre propre plugin peut vous permettre :

• d’automatiser des tâches,
• d’ajouter des fonctions spécifiques à votre site,
• de personnaliser votre blog sans modifier le cœur de WordPress.

Dans ce tutoriel, vous apprendrez à développer un plugin WordPress simple mais utile : un compteur de mots qui affiche le temps estimé de lecture d’un article. C’est une fonctionnalité très appréciée des lecteurs, car elle les aide à savoir combien de temps ils doivent consacrer à la lecture de vos articles.

Étape 1 : Préparer l’environnement de développement WordPress

Avant de coder un plugin WordPress, vous avez besoin de :

✔️ 1.1 Installer WordPress en local

Si ce n’est pas encore fait, installez WordPress en local avec un outil comme :

• MAMP (Mac / Windows)
• XAMPP
• Local by Flywheel

Placez WordPress dans le dossier /htdocs (pour MAMP) ou équivalent.

1.2 Accéder au dossier wp-content/plugins

Dans la racine de votre site WordPress, naviguez vers le dossier :

wp-content/plugins/

C’est ici que tous les plugins ou extensions WordPress personnalisés sont enregistrés.

Étape 2 : Créer la structure de base de l’extension

2.1 Créer un dossier pour votre extension

Dans wp-content/plugins/, créez un dossier appelé :

reading-time-counter

Ce nom doit être unique et en anglais, avec des tirets (-).

2.2 Créer le fichier principal du plugin

Dans ce dossier, créez un fichier PHP :

reading-time-counter.php

2.3 Ajouter l’en-tête du plugin

Collez le code suivant dans le fichier reading-time-counter.php :

<?php
/**
 * Plugin Name: Reading Time Counter
 * Description: Ce plugin WordPress affiche le temps de lecture estimé d’un article en fonction du nombre de mots.
 * Version: 1.0
 * Author: Alban GUILLIER
 * License: GPL2
 */

Cette en-tête est obligatoire pour que WordPress reconnaisse l’extension. Elle contient les métadonnées principales.

2.4 Activer le plugin ou extension dans l’administration WordPress

• Allez dans votre administration WordPress.
• Cliquez sur Extensions > Extensions installées.
• Cliquez sur Activer pour le plugin “Reading Time Counter”.

Étape 3 : Analyser le contenu pour calculer le temps de lecture

3.1 Comprendre le principe

L’idée est simple :

• On compte les mots de l’article.
• On estime que la vitesse moyenne de lecture est de 200 mots par minute.
• On affiche le résultat au début du contenu.

3.2 Créer une fonction pour calculer le temps de lecture

Ajoutez ce code à la suite de votre fichier reading-time-counter.php :

function rtc_calculate_reading_time($content) {
    // Nombre de mots
    $word_count = str_word_count(strip_tags($content));

    // Temps de lecture estimé (en minutes)
    $reading_time = ceil($word_count / 200);

    // Affichage personnalisé
    $reading_time_display = "<p><strong>⏱️ Temps de lecture estimé : {$reading_time} minute(s)</strong></p>";

    // Ajouter le temps de lecture avant le contenu
    return $reading_time_display . $content;
}

Cette fonction prend le contenu de l’article, compte les mots, calcule le temps de lecture, et l’ajoute au début du texte.

Étape 4 : Ajouter notre fonction au contenu des articles

WordPress offre des hooks (crochets) pour modifier le comportement du CMS.

Nous allons utiliser le hook the_content pour afficher notre extension :

add_filter('the_content', 'rtc_calculate_reading_time');

Code final jusqu’ici :

Voici ce que contient le fichier reading-time-counter.php jusqu’à présent :

<?php
/**
 * Plugin Name: Reading Time Counter
 * Description: Ce plugin WordPress affiche le temps de lecture estimé d’un article en fonction du nombre de mots.
 * Version: 1.0
 * Author: Alban GUILLIER
 * License: GPL2
 */

function rtc_calculate_reading_time($content) {
    $word_count = str_word_count(strip_tags($content));
    $reading_time = ceil($word_count / 200);
    $reading_time_display = "<p><strong>⏱️ Temps de lecture estimé : {$reading_time} minute(s)</strong></p>";
    return $reading_time_display . $content;
}

add_filter('the_content', 'rtc_calculate_reading_time');

🎉 Bravo ! Votre premier plugin WordPress fonctionne déjà : chaque article affiche un temps de lecture estimé.

Étape 5 : Tester et affiner l’extension

• Rendez-vous sur un article de votre site.
• Vérifiez que la mention « Temps de lecture estimé : X minute(s) » s’affiche bien.
• Testez avec des articles longs et courts.

Étape 6 : Créer une page d’administration pour l’extension

Nous allons créer une nouvelle page accessible depuis le tableau de bord WordPress.

6.1 Ajouter une fonction pour le menu d’admin

Dans le fichier reading-time-counter.php, ajoutez ce code à la fin :

function rtc_add_admin_menu() {
    add_options_page(
        'Reading Time Counter - Paramètres',  // Titre de la page
        'Reading Time',                       // Libellé dans le menu
        'manage_options',                     // Capacité requise
        'rtc_settings',                       // Slug unique
        'rtc_display_settings_page'           // Fonction de rappel
    );
}
add_action('admin_menu', 'rtc_add_admin_menu');

6.2 Créer la fonction d’affichage de la page

Toujours dans le même fichier, à la suite du code déjà écrit :

function rtc_display_settings_page() {
    ?>
    <div class="wrap">
        <h1>Paramètres du plugin Reading Time Counter</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('rtc_settings_group');
            do_settings_sections('rtc_settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Cette fonction affiche un formulaire qui permet de sauvegarder les réglages de l’extension.

Étape 7 : Enregistrer les options du plugin

Nous allons permettre à l’utilisateur de :

• Choisir la vitesse de lecture (mots/minute)
• Choisir où afficher le compteur (avant ou après le contenu)
• Personnaliser le texte d’introduction

7.1 Déclaration des paramètres

Ajoutez cette fonction à la suite de notre fichier :

function rtc_settings_init() {
    register_setting('rtc_settings_group', 'rtc_words_per_minute');
    register_setting('rtc_settings_group', 'rtc_position');
    register_setting('rtc_settings_group', 'rtc_intro_text');

    add_settings_section(
        'rtc_settings_section',
        'Réglages principaux',
        null,
        'rtc_settings'
    );

    // Champ : vitesse de lecture
    add_settings_field(
        'rtc_words_per_minute',
        'Vitesse de lecture (mots/minute)',
        function () {
            $value = get_option('rtc_words_per_minute', 200);
            echo "<input type='number' name='rtc_words_per_minute' value='" . esc_attr($value) . "' min='50' />";
        },
        'rtc_settings',
        'rtc_settings_section'
    );

    // Champ : position
    add_settings_field(
        'rtc_position',
        'Position du compteur',
        function () {
            $value = get_option('rtc_position', 'before');
            echo "<select name='rtc_position'>
                    <option value='before'" . selected($value, 'before', false) . ">Avant le contenu</option>
                    <option value='after'" . selected($value, 'after', false) . ">Après le contenu</option>
                  </select>";
        },
        'rtc_settings',
        'rtc_settings_section'
    );

    // Champ : texte personnalisé
    add_settings_field(
        'rtc_intro_text',
        'Texte affiché avant le temps de lecture',
        function () {
            $value = get_option('rtc_intro_text', '⏱️ Temps de lecture estimé :');
            echo "<input type='text' name='rtc_intro_text' value='" . esc_attr($value) . "' size='50' />";
        },
        'rtc_settings',
        'rtc_settings_section'
    );
}
add_action('admin_init', 'rtc_settings_init');

Étape 8 : Adapter le plugin pour utiliser les réglages

Modifiez maintenant la fonction rtc_calculate_reading_time() pour qu’elle tienne compte des options de l’utilisateur :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

function rtc_calculate_reading_time($content) {
    $word_count = str_word_count(strip_tags($content));
    $words_per_minute = get_option('rtc_words_per_minute', 200);
    $reading_time = ceil($word_count / $words_per_minute);

    $intro_text = get_option('rtc_intro_text', '⏱️ Temps de lecture estimé :');
    $position = get_option('rtc_position', 'before');

    $reading_time_display = "<p><strong>{$intro_text} {$reading_time} minute(s)</strong></p>";

    if ($position === 'after') {
        return $content . $reading_time_display;
    } else {
        return $reading_time_display . $content;
    }
}

Étape 9 : Ajouter du style CSS (facultatif mais conseillé)

Ajoutez un petit style pour embellir l’affichage. Dans le fichier reading-time-counter.php, ajoutez les lignes suivantes pour relier notre feuille de styles :

function rtc_enqueue_styles() {
    wp_enqueue_style('rtc-style', plugin_dir_url(__FILE__) . 'style.css');
}
add_action('wp_enqueue_scripts', 'rtc_enqueue_styles');

Puis, créez un fichier style.css dans le dossier de l’extension, à sa racine, et ajoutez :

.rtc-reading-time {
    font-size: 16px;
    background: #f0f0f0;
    padding: 10px;
    border-left: 5px solid #0073aa;
    margin-bottom: 20px;
}

Enfin, modifiez légèrement le HTML dans la fonction rtc_calculate_reading_time :

$reading_time_display = "<div class='rtc-reading-time'><strong>{$intro_text} {$reading_time} minute(s)</strong></div>";

✅ Résultat attendu

Votre plugin WordPress permet maintenant :

• d’afficher le temps de lecture estimé basé sur un calcul réel,
• de configurer ce comportement via une page d’administration,
• d’améliorer l’expérience utilisateur de vos visiteurs.

Étape 10 : Rendre l’extension WordPress multilingue (i18n)

L’internationalisation (i18n) permet à votre extension WordPress d’être traduit facilement par d’autres utilisateurs dans n’importe quelle langue.

10.1 Charger le domaine de traduction

Ajoutez cette fonction dans reading-time-counter.php :

function rtc_load_textdomain() {
    load_plugin_textdomain('reading-time-counter', false, dirname(plugin_basename(__FILE__)) . '/languages');
}
add_action('plugins_loaded', 'rtc_load_textdomain');

10.2 Préparer les chaînes traduisibles

Utilisez la fonction __() ou _e() autour de chaque texte affiché à l’utilisateur.

Exemple :

$intro_text = get_option('rtc_intro_text', __('⏱️ Temps de lecture estimé :', 'reading-time-counter'));

Et dans la page d’admin :

<h1><?php _e('Paramètres du plugin Reading Time Counter', 'reading-time-counter'); ?></h1>

10.3 Créer les fichiers de langue

1. Créez un dossier languages/ dans votre plugin.
2. Utilisez un outil comme Poedit ou Loco Translate pour générer un fichier .pot :
   • Nom : reading-time-counter.pot
   • Domaine : reading-time-counter

Cela permet aux traducteurs de créer des fichiers .po / .mo comme fr_FR.mo (français) ou de_DE.mo (allemand).

Étape 11 : Sécuriser le code du plugin WordPress

Il est important de protéger les données saisies par les utilisateurs et de s’assurer que personne ne peut exploiter notre code.

✔️ 11.1 Vérifier les autorisations

Avant toute action administrative :

if (!current_user_can('manage_options')) {
    wp_die(__('Vous n\'avez pas les droits nécessaires pour accéder à cette page.', 'reading-time-counter'));
}

Placez-le dans la fonction rtc_display_settings_page().

11.2 Valider les données d’entrée

Ajoutez des callbacks pour valider les champs :

register_setting('rtc_settings_group', 'rtc_words_per_minute', [
    'sanitize_callback' => 'absint',
]);

register_setting('rtc_settings_group', 'rtc_position', [
    'sanitize_callback' => function($value) {
        return in_array($value, ['before', 'after']) ? $value : 'before';
    },
]);

register_setting('rtc_settings_group', 'rtc_intro_text', [
    'sanitize_callback' => 'sanitize_text_field',
]);

Étape 12 : Ajouter les fichiers nécessaires au plugin

Pour que votre plugin WordPress soit propre et prêt à être distribué, organisez-le ainsi :

reading-time-counter/
│
├── reading-time-counter.php
├── style.css
├── languages/
│   └── reading-time-counter.pot
├── README.txt

Exemple de README.txt (pour WordPress.org)

=== Reading Time Counter ===
Contributors: votrenom
Tags: lecture, temps, mots, compteur, contenu
Requires at least: 5.0
Tested up to: 6.5
Stable tag: 1.0
License: GPLv2 or later

Un plugin simple qui affiche le temps de lecture estimé d’un article WordPress.

== Description ==
Reading Time Counter permet d'afficher un temps de lecture basé sur le nombre de mots de l'article. Entièrement personnalisable via l'administration.

== Installation ==
1. Téléversez le dossier dans /wp-content/plugins/
2. Activez via le menu Extensions.
3. Allez dans Réglages > Reading Time pour configurer.

== Changelog ==
= 1.0 =
* Version initiale du plugin.

Étape 13 : Comment ajouter un shortcode à l’extension

13.1 Créer une fonction de shortcode

Dans ton fichier reading-time-counter.php, ajoute une nouvelle fonction pour générer le texte du temps de lecture :

function rtc_reading_time_shortcode($atts) {
    global $post;

    if (!$post) {
        return '';
    }

    $words = str_word_count(strip_tags($post->post_content));
    $words_per_minute = (int) get_option('rtc_words_per_minute', 200);
    $minutes = ceil($words / $words_per_minute);
    $intro_text = get_option('rtc_intro_text', __('⏱️ Temps de lecture estimé :', 'reading-time-counter'));

    $html = '<div class="rtc-reading-time">';
    $html .= esc_html($intro_text) . ' ' . $minutes . ' ' . __('minute(s)', 'reading-time-counter');
    $html .= '</div>';

    return $html;
}

✅ Cette fonction :

• récupère l’article courant ($post),
• calcule le nombre de mots,
• récupère les réglages sauvegardés,
• renvoie du HTML sécurisé avec esc_html().

13.2 Déclarer le shortcode

Toujours dans ton fichier reading-time-counter.php, ajoute cette ligne après ta fonction :

add_shortcode('reading_time', 'rtc_reading_time_shortcode');

13.3. Utiliser le shortcode dans WordPress

Il te suffira maintenant, dans n’importe quel article ou page, d’écrire :

[ reading_time]

🎯 Résultat : ça affichera dynamiquement le temps de lecture pour cet article précis.

Bonus : ajouter des options au shortcode

Si tu veux être encore plus perfectionniste, tu peux permettre à l’utilisateur de personnaliser le texte d’introduction directement via le shortcode :

Exemple d’appel :

[ reading_time intro="Lecture estimée:"]

Modifie ta fonction ainsi :

function rtc_reading_time_shortcode($atts) {
    global $post;

    if (!$post) {
        return '';
    }

    $atts = shortcode_atts([
        'intro' => get_option('rtc_intro_text', __('⏱️ Temps de lecture estimé :', 'reading-time-counter')),
    ], $atts, 'reading_time');

    $words = str_word_count(strip_tags($post->post_content));
    $words_per_minute = (int) get_option('rtc_words_per_minute', 200);
    $minutes = ceil($words / $words_per_minute);

    $html = '<div class="rtc-reading-time">';
    $html .= esc_html($atts['intro']) . ' ' . $minutes . ' ' . __('minute(s)', 'reading-time-counter');
    $html .= '</div>';

    return $html;
}

Étape 14 : Préparer la publication de l’extension WordPress

Si vous souhaitez partager votre plugin avec la communauté WordPress, voici comment procéder.

14.1 Créer un compte sur WordPress.org

• Inscrivez-vous ici : https://login.wordpress.org/register
• Connectez-vous sur https://wordpress.org/plugins/

14.2 Soumettre votre plugin

• Préparez une archive .zip propre de votre plugin.
• Soumettez votre plugin ici : https://wordpress.org/plugins/developers/add/

Vous devrez ensuite suivre les instructions de l’équipe de validation.

Résumé des fonctionnalités de votre plugin WordPress

Conclusion : Créer une extension WordPress, c’est possible !

Félicitations 🎉 ! Vous venez de créer un plugin WordPress complet, personnalisable, sécurisé et prêt à l’emploi. Ce projet vous a permis d’apprendre :

• la structure de base d’un plugin WordPress,
• les hooks (add_filter, add_action) indispensables,
• comment créer une interface d’options,
• les bonnes pratiques pour sécuriser et traduire votre plugin.

🔗 Envie d’aller plus loin ?

👉 Consultez sur le Créa-blog d’autres tutoriels WordPress, PHP, et développement web 100% gratuits.

• Apprenez à coder un thème enfant pour WordPress

Vous pouvez retrouver cette extension WordPress et l’intégralité des scripts détaillé ci-dessous sur mon dépôt GitHub : https://github.com/crea-troyes/wp-temps-lecture.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr