Développement de plugins WordPress expliqué simplement : construisez votre premier plugin personnalisé à partir de zéro

Bases des plugins WordPress et environnement de développement

Avant de commencer à écrire du code, il est essentiel de comprendre les concepts de base des extensions WordPress et de mettre en place un environnement de développement adapté. Une extension WordPress est essentiellement un dossier contenant du code PHP, qui étend les fonctionnalités du cœur grâce aux riches API fournies par WordPress. Une extension peut être aussi petite que l’ajout d’un simple shortcode, ou aussi grande que la construction d’un système de gestion complet. L’idée centrale est de “ ne pas modifier le code du cœur ”, ce qui garantit que vos fonctionnalités personnalisées ne seront pas perdues lors des mises à jour de WordPress.

Pour développer efficacement, vous avez besoin d’un environnement de développement local. Vous pouvez utiliser des outils comme XAMPP, MAMP, Local by Flywheel ou Docker pour mettre rapidement en place un serveur incluant PHP et MySQL. Ensuite, installez une instance récente de WordPress. Pendant le développement, il est recommandé dewp-config.phpLe fichier est activé dans le document.WP_DEBUG, afin de révéler rapidement les erreurs.

Le “ cœur ” d’une extension est un fichier PHP principal. Le commentaire d’en-tête de ce fichier est sa carte d’identité ; WordPress lit ces métadonnées pour reconnaître et gérer l’extension dans l’interface d’administration. Un commentaire d’en-tête standard du fichier principal d’une extension se présente comme suit :

Lectures recommandées Qu'est-ce qu'un thème WordPress ?。

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习插件开发的简单插件，它将在文章末尾添加自定义内容。
 * Version:     1.0.0
 * Author:      开发者名称
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Créez votre premier plugin

Commençons par une fonctionnalité concrète : ajouter automatiquement un texte personnalisé à la fin du contenu de chaque article du site. Cet exemple illustrera tout au long du processus les étapes essentielles du développement d’une extension.

Hébergement WordPress par UltraHost

Garantie de remboursement dans les 30 jours, bande passante illimitée et base de données, protection gratuite contre les attaques DDoS. Avantage de 501 TP4T pour les achats sur 3 ans.

page d'accès

Fichier principal du plugin et initialisation

Tout d'abord, dans WordPress,wp-content/pluginsCréez un nouveau dossier dans le répertoire, par exemple.my-first-pluginDans ce dossier, créez le fichier PHP principal, que vous pouvez nommer comme vous le souhaitez.my-first-plugin.phpCopiez-y le code de commentaire d’en-tête ci-dessus.

Ensuite, nous avons besoin d’un moyen sûr pour exécuter le code d’initialisation du plugin. La meilleure pratique consiste à encapsuler toutes les fonctionnalités dans une classe ou à utiliser des fonctions d’espace de noms. Ici, nous utilisons une classe simple pour organiser le code. Dans le fichier principal, après le commentaire d’en-tête, ajoutez la définition de classe suivante :

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 防止直接访问文件
}

class My_First_Plugin {
    public function __construct() {
        // 构造函数，在这里挂载钩子
    }
}

// 初始化插件
new My_First_Plugin();

if ( ! defined( ‘ABSPATH’ ) )Cette ligne de code est une norme de sécurité du développement de plugins WordPress, utilisée pour empêcher les utilisateurs d’accéder directement à vos fichiers de plugin via une URL.

Ajouter du contenu au pied de page de l’article avec des hooks

L’architecture des extensions de WordPress repose sur le système de “ crochets ” (Hooks), divisé en actions (Action) et filtres (Filter). Les actions vous permettent d’exécuter du code à des moments précis, tandis que les filtres vous permettent de modifier des données.

Lectures recommandées Guide ultime de l’optimisation des performances d’un site WordPress : analyse complète, de la configuration de base aux extensions de cache。

Notre objectif est d’ajouter du texte après le contenu de l’article ; il s’agit d’un processus de “ filtrage ” du contenu. Par conséquent, nous utiliseronsthe_contentCe filtre. Modifiez le constructeur et les méthodes de la classe comme suit :

class My_First_Plugin {
    public function __construct() {
        // 将自定义方法挂载到‘the_content’过滤器上
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
    }

/**
     * 在文章内容后添加自定义页脚
     *
     * @param string $content 原始文章内容。
     * @return string 修改后的文章内容。
     */
    public function add_footer_to_content( $content ) {
        // 确保只在主循环的单篇文章页面显示
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_footer = '<div class="my-plugin-footer"><p>Merci d’avoir lu cet article ! Généré par [Mon premier plugin].</p></div>';
            $content .= $custom_footer;
        }
        return $content;
    }
}

add_filter()La fonction convertit la méthode de classeadd_footer_to_contentS’inscrire àthe_contentFiltre. Lorsque WordPress s’apprête à afficher le contenu de l’article, il appelle notre méthode et lui transmet le contenu d’origine. Grâce à des conditions, nous nous assurons d’ajouter le pied de page uniquement sur la page de l’article individuel, afin d’éviter de l’ajouter en double sur la page d’accueil ou les pages d’archives. Enfin, nous ajoutons le HTML personnalisé à la fin du contenu et le renvoyons.

Ajouter des options d’administration pour l’extension

Une extension mature permet généralement aux utilisateurs de la configurer dans l’administration. Nous allons ajouter une option de réglage simple au texte de pied de page que nous venons de créer, afin de permettre aux utilisateurs de personnaliser le texte affiché.

hosting.com Hébergement partagé

Hautes performances avec les CPU AMD EPYC, stockage SSD NVMe et LiteSpeed, support interne expert 24h/24 et 7j/7, mesures de sécurité avancées, notamment SSL, protection contre la force brute, les logiciels malveillants et le DDoS, économies pouvant aller jusqu'à 73%.

page d'accès

Créer la page du menu des paramètres

Nous devons ajouter une sous-page sous le menu “ Réglages ” dans l’interface d’administration de WordPress. Cela nécessite l’utilisation deadd_options_page()Une fonction est généralement « montée » (c’est-à-dire associée à un objet ou à un contexte spécifique) sur…admin_menuSur le crochet d'action.

Tout d’abord, ajoutez une nouvelle méthode dans la classe des plugins pour enregistrer les menus et les pages :

class My_First_Plugin {
    // ... 之前的构造函数和方法 ...

public function __construct() {
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        // 挂载后台管理菜单
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        // 挂载初始化设置选项
        add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

public function add_admin_menu() {
        add_options_page(
            '我的第一个插件设置', // 页面标题
            '自定义页脚设置',     // 菜单标题
            'manage_options',     // 所需权限
            'my-first-plugin',    // 菜单slug
            array( $this, 'options_page_html' ) // 回调函数，用于输出页面HTML
        );
    }
}

Champs de configuration d’enregistrement et page de rendu

Ensuite, nous devons utiliser l’API Settings de WordPress pour enregistrer, sauvegarder et valider les options de manière sécurisée. Cela impliqueregister_setting(), add_settings_section()etadd_settings_field()et d'autres fonctions.

Lectures recommandées Qu'est-ce que WooCommerce ? Un article détaillé explique ses fonctionnalités principales et ses scénarios d'utilisation.。

public function settings_init() {
    // 注册一个设置选项组
    register_setting( 'my_first_plugin_settings', 'my_first_plugin_options' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '页脚内容配置',
        array( $this, 'section_callback' ),
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'footer_text',
        '页脚显示文本',
        array( $this, 'footer_text_field_render' ),
        'my-first-plugin',
        'my_first_plugin_section'
    );
}

public function section_callback() {
    echo '<p>Configurez ici le contenu textuel affiché à la fin de l’article.</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。'; // 默认值
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">Prend en charge des balises HTML simples, telles que <strong>, <em>, <a>。</p>
    
    <div class="wrap">
        <h1></h1>
        <form action='/fr/options.php/' method='post' data-trp-original-action="options.php">
            
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
    &lt;?php
}

Enfin, modifier la fonction de sortie du front-endadd_footer_to_content, afin qu’il lise le texte à partir des options de la base de données :

public function add_footer_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'my_first_plugin_options' );
        $footer_text = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。';
        $custom_footer = '<div class="my-plugin-footer"><p>'`. wp_kses_post($Footer_text)`.'</p></div>';
        $content .= $custom_footer;
    }
    return $content;
}

wp_kses_post()La fonction garantit que seuls des balises HTML sûres sont autorisées dans le texte saisi par l’utilisateur, ce qui constitue une mesure de sécurité importante.

Hébergement partagé InterServer

Hébergement mutualisé $2.50 USD par mois, premier mois $0.1 USD code promo tryinterserver, 461 scripts cloud apps, installation en un clic.

page d'accès

Internationalisation des plugins et bonnes pratiques

Pour permettre aux utilisateurs du monde entier d’utiliser l’extension, l’internationalisation (i18n) est une étape indispensable. WordPress utilise le framework GNU gettext pour réaliser la traduction.

Champs de texte et fonctions de traduction

Tout d’abord, assurez-vous que l’en-tête des commentaires de votre extension définitText DomainPar exemplemy-first-pluginEnsuite, dans le plugin, encadrez toutes les chaînes de caractères qui doivent être traduites en utilisant une fonction spécifique.

Modifiez notre code précédent afin d’ajouter la prise en charge de la traduction au texte de sortie :

// 在构造函数中加载翻译文件
public function __construct() {
    // ... 其他钩子 ...
    add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
}

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

// 修改设置页面的字符串
public function section_callback() {
    echo '<p>'\n' . esc_html__( 'Configurez ici le contenu du texte qui s'affichera à la fin de l'article.', 'my-first-plugin' ) . '</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? __( '感谢阅读本文！由【我的第一个插件】生成。', 'my-first-plugin' );
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">&lt;?php esc_html_e( &#039;支持简单的HTML标签，如 <strong>, <em>, <a>。', 'my-first-plugin' ); ?&gt;</p>
    &lt;?php
}

// Remarque : Le “ texte du pied de page ” saisi par l&#039;utilisateur n&#039;a généralement pas besoin d&#039;être traduit, car il s&#039;agit d&#039;un contenu spécifique défini par l&#039;administrateur.

__()Utilisé pour traduire et retourner des chaînes de caractères.esc_html__()Pour traduire et échapper la sortie HTML_e()Utilisé pour traduire et renvoyer directement la chaîne. Le deuxième paramètre de la fonction est le domaine de texte et doit être cohérent avec la définition du plugin.

Sécurité, performances et organisation du code

Outre l’internationalisation, il convient également de suivre les bonnes pratiques suivantes :
1. Sécurité : Vérifier, nettoyer et échapper toutes les données saisies par les utilisateurs. Utiliser…sanitize_text_field(), esc_html(), wp_kses_post()et d'autres fonctions. Utilisezwp_nonce_field()Prévenir les attaques CSRF.
2. Performance : Utilisez les hooks de manière judicieuse pour éviter d’exécuter des requêtes inutiles à la base de données à chaque chargement de la page. Vous pourriez également envisager de mettre en cache temporairement les résultats affichés.
3. Organisation du code : Pour les plugins complexes, les fichiers doivent être divisés en modules fonctionnels. Le fichier principal est chargé de l’orientation générale du programme, tandis que les classes et les méthodes doivent être placées dans des fichiers distincts correspondant à chaque module.includes/Répertoire où placer les ressources front-end (CSS, JS)assets/Catalogue.
4. Désinstallation et nettoyage : Si votre plugin a créé des tables de base de données ou des options, il doit disposer d’une fonction de désinstallation permettant de supprimer ces données. Cela peut être réalisé via une action indépendante…uninstall.phpCela peut être réalisé à l'aide de fichiers.

résumés

À travers ce tutoriel, nous avons suivi l’ensemble du processus de développement d’un plugin personnalisé pour WordPress doté de fonctionnalités de base : de la mise en place de l’environnement de développement, à la création de la structure de base du plugin, en passant par l’ajout de fonctionnalités à l’aide du système de hooks, jusqu’à la réalisation des pages de configuration en back-end, sans oublier les aspects d’internationalisation et de sécurité. Vous avez appris comment utiliser ces outils pour créer des plugins efficaces et fiables.add_filteretadd_actionInteragir avec le cœur de WordPress, comment utiliser l’API Settings pour créer des pages d’options fiables, ainsi que comment passer parload_plugin_textdomainFaites en sorte que le plugin prenne en charge plusieurs langues. N’oubliez pas que, lors du développement de plugins, la sécurité, la maintenance et l’expérience utilisateur sont des facteurs primordiaux. Sur cette base, vous pourrez explorer des fonctionnalités plus avancées telles que les types d’articles personnalisés, les métadonnées, les codes courts et les points d’extrémité API REST, afin de créer des extensions WordPress encore plus puissantes.

FAQ Foire aux questions

Pourquoi mon plugin ne s’affiche-t-il pas dans le menu d’administration ?

Cela est généralement dû à des problèmes de droits d’accès ou à des erreurs de code. Tout d’abord, veuillez vous assurer que…add_options_pageOuadd_menu_pageParamètre d’autorisation spécifié dans la fonction (par ex.‘manage_options’) correspond au rôle d’utilisateur actuellement connecté. Ensuite, vérifiezadmin_menuVérifiez si le hook est correctement attaché et que la fonction de rappel ne contient pas d’erreurs de syntaxe susceptibles d’interrompre l’exécution de PHP. La méthode la plus simple consiste à l’activer dans l’administration de WordPress.WP_DEBUG, vérifiez s'il y a des messages d'erreur correspondants qui s'affichent.

Comment ajouter des fichiers CSS et JavaScript personnalisés à une extension ?

La bonne approche consiste à utiliser…wp_enqueue_style()etwp_enqueue_script()Fonction. Pour les ressources frontales, elles doivent être montées surwp_enqueue_scriptssur les hooks d’action ; pour les ressources du back-office d’administration, elles sont montées suradmin_enqueue_scriptsSur le crochet.

Dans votre classe de plugin, vous pouvez ajouter la méthode suivante :

public function enqueue_frontend_assets() {
    wp_enqueue_style( ‘my-plugin-style’, plugin_dir_url( __FILE__ ) . ‘assets/css/style.css’, array(), ‘1.0.0’ );
}

Puis dans le constructeur viaadd_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_frontend_assets’ ) );Inscrivez-vous. Cela permet de garantir une gestion correcte des dépendances et d’éviter les conflits avec d’autres extensions ou thèmes.

Comment nettoyer les options de données que j’ai créées lorsqu’un utilisateur désinstalle le plugin ?

WordPress propose deux méthodes principales. La première consiste à enregistrer un hook de désinstallation, mais cela est peu courant dans les extensions orientées objet. La méthode la plus recommandée et la plus standard consiste à créer ununinstall.phpCe fichier se trouve au même niveau que votre fichier de plugin principal.

Lorsque l’utilisateur supprime une extension via l’administration de WordPress, WordPress vérifie et exécute automatiquement ce fichier.uninstall.phpvous devez d’abord vérifierWP_UNINSTALL_PLUGINVérifiez si la constante est définie, puis supprimez en toute sécurité toutes les options, tables de base de données personnalisées et autres données créées par l’extension. Par exemple :

if ( ! defined( ‘WP_UNINSTALL_PLUGIN’ ) ) {
    exit;
}
delete_option( ‘my_first_plugin_options’ );
// 如果有自定义表：$wpdb->query( “DROP TABLE IF EXISTS {$wpdb->prefix}my_table” );

Comment mon plugin peut-il être compatible avec de plus nombreuses versions de WordPress ?

La clé pour maintenir la compatibilité consiste à utiliser avec précaution les fonctions et fonctionnalités des nouvelles versions, et à fournir des solutions de remplacement pour les anciennes versions. Avant d’appeler des fonctions qui peuvent n’exister que dans les nouvelles versions, utilisezfunction_exists()Effectuez des vérifications. Par exemple, si vous souhaitez utiliser une fonctionnalité introduite dans la version 5.0wp_dateUne fonction peut :

if ( function_exists( ‘wp_date’ ) ) {
    $date = wp_date( get_option( ‘date_format’ ), $timestamp );
} else {
    $date = date_i18n( get_option( ‘date_format’ ), $timestamp );
}

De plus, indiquez clairement dans les commentaires en tête du plugin ainsi que dans le fichier de documentation (readme) la version minimale de WordPress pour laquelle les tests ont été effectués. Effectuer des tests régulièrement sur des versions plus anciennes de WordPress est la meilleure façon de garantir la compatibilité.