Guide complet pour le développement de plugins WordPress : Construire votre premier plugin de zéro à un

Préparation et aménagement de l'environnement.

Avant de commencer à écrire du code, vous aurez besoin d’un environnement de développement approprié. Cela inclut une installation locale de WordPress, un éditeur de code, ainsi que de connaissances de base en PHP. Pour un environnement de développement local, il est recommandé d’utiliser des outils tels que XAMPP, MAMP ou Local by Flywheel, qui permettent de mettre en place rapidement un environnement de serveur contenant PHP et MySQL sur votre ordinateur.

Créer le répertoire de base et les fichiers d'un plugin

Chaque plugin WordPress doit disposer d’un fichier principal, qui sert de point d’entrée pour le plugin. Tout d’abord, vous devez… wp-content/plugins Créez un nouveau dossier dans le répertoire, par exemple… my-first-pluginEnsuite, créez un fichier PHP principal à l’intérieur de ce dossier, qui porte généralement le même nom que le dossier lui-même. my-first-plugin.php。

Le début de ce fichier principal doit contenir une annotation de type « header » contenant les informations standard relatives à votre plugin. WordPress utilise ces informations pour identifier et afficher votre plugin dans l'interface de gestion en arrière-plan.

Lectures recommandées De zéro à un : Découvrez pas à pas les compétences essentielles pour développer des plugins WordPress。

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习 WordPress 插件开发的示例插件。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Comprendre la structure de base du développement de plugins pour WordPress

Un plugin complet fonctionnel ne se compose généralement pas que d’un seul fichier. En plus du fichier principal, vous pouvez disposer de fichiers contenant du JavaScript, du CSS, des images, ainsi que de fichiers de langues pour l’internationalisation. Une structure de répertoires bien conçue facilite l’organisation et la maintenance du code.

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

Une structure recommandée est la suivante :
- my-first-plugin/ (Directoire racine du plugin)
- my-first-plugin.php (Fichier principal)
- includes/ (Dossier contenant les classes ou fonctions relatives aux fonctionnalités essentielles)
- admin/ (Codes relatifs à l'interface d administration en arrière-plan)
- public/ (Dépôt du code lié à l'affichage sur le front-end)
- assets/ (Dépôt de ressources telles que CSS, JavaScript, images, etc.)
- languages/ (Dépôt des fichiers de traduction internationaux)

Rédaction de code PHP de base

Toute la logique fonctionnelle des plugins est mise en œuvre à l’aide de code PHP. WordPress propose une grande variété de…动作钩子et过滤器钩子C’est la base sur laquelle les plugins interagissent avec le noyau de WordPress.

Réaliser une fonction simple à partir d'un court code

Les codes courts sont des outils puissants qui permettent aux utilisateurs d’incorporer facilement des fonctionnalités de plugins dans leurs articles ou leurs pages. Nous allons créer un code court simple qui affichera un salut sur la page.

Dans votre fichier principal… my-first-plugin.php En dessous des commentaires de tête, ajoutez les fonctions et les hooks suivants :

Lectures recommandées Analyse approfondie du développement de plugins pour WordPress : Construire votre première extension fonctionnelle de zéro à un。

// 注册短代码
function mfp_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 设置默认参数并合并用户传入的参数
    $atts = shortcode_atts( array(
        'name' => '访客',
    ), $atts, 'mfp_greeting' );

// 返回要显示的内容
    return '<p>Bonjour, '. esc_html($atts['name'])'. ‘! Bienvenue à utiliser mon premier plugin.</p>'php
add_shortcode('mfp_greeting', 'mfp_greeting_shortcode');

Maintenant, les utilisateurs peuvent saisir des textes dans l’éditeur d’articles. [mfp_greeting name=“小明”]L'interface utilisateur affichera alors : “ Bonjour, Xiao Ming ! Bienvenue à l'utilisation de mon premier plugin. ”

Ajouter une option de configuration au backend.

Afin de rendre les fonctionnalités des plugins configurables, il est généralement nécessaire d’ajouter une page de paramétrage. Voici une démonstration de la manière de créer une sous-page de menu dans le menu “ Paramètres ”.

Tout d'abord, nous utilisons le add_action Les crochets sont enregistrés et configurés lors de l’initialisation par l’administrateur.

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

// 初始化插件设置
function mfp_settings_init() {
    // 注册一个新的设置 section
    add_settings_section(
        'mfp_settings_section', // section ID
        '我的插件设置', // 标题
        'mfp_settings_section_callback', // 回调函数，用于输出 section 描述
        'general' // 显示在哪个设置页，这里是“常规”设置页
    );

// 在 section 内注册一个字段
    add_settings_field(
        'mfp_default_greeting', // 字段 ID
        '默认问候人名', // 字段标题
        'mfp_default_greeting_callback', // 渲染字段输入框的回调函数
        'general', // 设置页面
        'mfp_settings_section' // 所属 section
    );

// 在 WordPress 的 `option` 表中注册这个设置
    register_setting( 'general', 'mfp_default_greeting' );
}
add_action( 'admin_init', 'mfp_settings_init' );

Ensuite, définez les deux fonctions de rappel (callbacks) utilisées ci-dessus pour rendre l’interface.

// Section 描述的回调函数
function mfp_settings_section_callback() {
    echo '<p>J’configure ici les options relatives à mon premier plugin.</p>';
}

// 字段输入框的回调函数
function mfp_default_greeting_callback() {
    // 从数据库获取已保存的值，如果没有则使用默认值
    $option = get_option( 'mfp_default_greeting', 'WordPress 用户' );
    // 输出一个输入框
    echo '<input type="text" name="mfp_default_greeting" value="' . esc_attr( $option ) . '" />';
}

Maintenant, vous pouvez voir cette option de configuration en bas de la page “ Paramètres -> Généraux ” dans l’administration de WordPress.

Gestion des ressources frontales et interaction avec Ajax

Les plugins modernes nécessitent généralement leurs propres styles et leur propre logique d’interaction. WordPress offre des méthodes standard pour enregistrer et charger des fichiers CSS et JavaScript de manière sécurisée.

Lectures recommandées Commencer de zéro : pourquoi choisir le développement de plugins pour WordPress ?。

charger des fichiers CSS et JavaScript de manière sûre

Il ne faut jamais, sous aucun prétexte, écrire directement du code dans vos fichiers PHP. <link> Ou <script> Les chemins de ressources sont codés de manière fixe dans les étiquettes. Il conviendrait d’utiliser une approche plus flexible. wp_enqueue_style et wp_enqueue_script Une fonction.

// 注册并加载前端资源
function mfp_enqueue_public_assets() {
    // 加载一个 CSS 文件
    wp_enqueue_style(
        'mfp-public-style', // 样式表句柄
        plugin_dir_url( __FILE__ ) . 'assets/css/public-style.css', // 样式表 URL
        array(), // 依赖项
        '1.0.0' // 版本号，可用于清除缓存
    );

// 加载一个 JavaScript 文件
    wp_enqueue_script(
        'mfp-public-script', // 脚本句柄
        plugin_dir_url( __FILE__ ) . 'assets/js/public-script.js', // 脚本 URL
        array( 'jquery' ), // 依赖项，这里依赖 jQuery
        '1.0.0',
        true // 是否在页面底部加载
    );

// 重要：将 PHP 变量安全地传递到 JavaScript
    wp_localize_script(
        'mfp-public-script',
        'mfp_ajax_object', // 在 JS 中访问的对象名
        array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'nonce'    => wp_create_nonce( 'mfp_ajax_nonce' ),
            'default_name' => get_option( 'mfp_default_greeting', 'WordPress 用户' )
        )
    );
}
// 在前端页面加载资源
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );
// 在后台管理页面加载资源（如果需要）
// add_action( 'admin_enqueue_scripts', 'mfp_enqueue_admin_assets' );

Réaliser une simple demande Ajax

Ajax permet d’interagir avec le serveur sans avoir à rafraîchir la page. WordPress dispose d’un traitement Ajax intégré.

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

Tout d’abord, dans le fichier JavaScript du côté client (front-end)… public-script.js Envoyer une demande depuis :

jQuery(document).ready(function($) {
    $('#my-button').on('click', function(e) {
        e.preventDefault();
        $.post(
            mfp_ajax_object.ajax_url, // WordPress 提供的 Ajax URL
            {
                action: 'mfp_get_server_time', // 触发的 PHP 钩子标识
                nonce: mfp_ajax_object.nonce, // 安全随机数
            },
            function(response) {
                if (response.success) {
                    $('#result-container').html('服务器时间：' + response.data);
                } else {
                    alert('请求失败：' + response.data);
                }
            }
        );
    });
});

Ensuite, le traitement de cette demande est effectué du côté PHP. Il est nécessaire de disposer de fonctions de traitement de l’enregistrement distinctes (ou simultanées) pour les utilisateurs connectés et pour les utilisateurs non connectés.

// 处理 Ajax 请求的函数
function mfp_ajax_get_server_time() {
    // 验证 nonce，防止 CSRF 攻击
    check_ajax_referer( 'mfp_ajax_nonce', 'nonce' );

// 处理逻辑
    $server_time = current_time( 'mysql' );

// 返回成功响应（JSON 格式）
    wp_send_json_success( $server_time );
}
// 为登录用户注册处理函数
add_action( 'wp_ajax_mfp_get_server_time', 'mfp_ajax_get_server_time' );
// 为未登录用户注册处理函数（如果功能允许）
add_action( 'wp_ajax_nopriv_mfp_get_server_time', 'mfp_ajax_get_server_time' );

Internationalisation des plugins et préparation à leur publication

Pour que votre plugin puisse être utilisé par des utilisateurs WordPress du monde entier, l’internationalisation (i18n) est une étape essentielle. Il est également crucial de procéder à des tests approfondis et à des optimisations avant sa publication.

Utiliser la fonction gettext pour réaliser la traduction de textes.

WordPress utilise le framework GNU gettext pour la traduction. Vous devez envelopper toutes les chaînes de caractères destinées aux utilisateurs à l’aide de fonctions spécifiques.

Modifiez la fonction de code court précédente pour qu'elle prenne en charge la traduction.

function mfp_greeting_shortcode_i18n( $atts ) {
    $atts = shortcode_atts( array(
        'name' => __( '访客', 'my-first-plugin' ), // 默认值也可翻译
    ), $atts, 'mfp_greeting' );

// 使用 sprintf 和 __ 函数组合翻译字符串
    return '<p>' . sprintf( __( '你好，%s！欢迎使用我的第一个插件。', 'my-first-plugin' ), esc_html( $atts['name'] ) ) . '</p>'php
add_shortcode('mfp_greeting', 'mfp_greeting_shortcode_i18n');

Vous devez utiliser des outils tels que Poedit pour analyser tous les éléments similaires dans les plugins. __(‘文本’, ‘my-first-plugin’) La chaîne de caractères suivante est générée : .pot Fichiers de modèle, puis créer les versions correspondantes pour chaque langue (par exemple, le chinois). .po Et après compilation. .mo Faites des copies des fichiers et placez-les dans… /languages Catalogue.

Effectuer les tests finaux et la nettoyage du code.

Avant de publier un plugin, veuillez effectuer les vérifications suivantes :
1. Test des fonctionnalités : Activer le plugin sur une nouvelle installation de WordPress et vérifier que toutes les fonctionnalités (codes courts, paramètres, Ajax, etc.) fonctionnent comme prévu.
2. Revue du code : Vérifier que toutes les données saisies par les utilisateurs aient été traitées conformément aux exigences de sécurité. esc_html, esc_attr, wp_kses_post Les fonctions de type « escape » doivent être utilisées pour garantir la sécurité des données. Est-ce que toutes les requêtes effectuées sur la base de données utilisent ces mécanismes d’escapement ? $wpdb Les classes contiennent des instructions de préparation pour empêcher les injections SQL.
3. Vérification des performances : Assurez-vous que les scripts et les styles ne soient chargés que sur les pages nécessaires (vous pouvez utiliser des balises conditionnelles telles que…) is_admin(), is_single() Effectuez des jugements (déterminez si certaines actions doivent être effectuées ou non) en fonction des données disponibles. Évitez d’exécuter des requêtes inutiles à la base de données à chaque chargement de la page.
4. Nettoyage des fichiers : Supprimer le code de débogage utilisé pendant le processus de développement, les commentaires inutiles ainsi que les fichiers non utilisés.
5. Fichier README : Créer un document détaillé readme.txt Le fichier doit respecter les exigences de WordPress.org et contenir une description de l’extension, des instructions d’installation, ainsi que des réponses aux questions fréquentes. C’est le document obligatoire pour soumettre l’extension au répertoire officiel de WordPress.

résumés

À travers ce guide, vous avez réalisé le parcours allant d’un fichier vide à la création d’un plugin WordPress complet, doté de code abrégé, de paramètres de configuration en arrière-plan, de chargement de ressources en front-end, d’interactions Ajax et de support de l’internationalisation. Les étapes clés comprenaient : la mise en place d’un environnement et la création du fichier principal avec des en-têtes standard ; l’incorporation de fonctionnalités à l’aide des hooks d’actions et des hooks de filtres ; la gestion sécurisée des fichiers de ressources ; la mise en œuvre d’une communication asynchrone entre le front-end et le back-end ; ainsi que la préparation des traductions et des tests pour une publication mondiale. N’oubliez pas que la sécurité (échappement des caractères, validation des données, utilisation de tokens nonce), les performances (chargement des ressources sur demande) et les normes (respect des spécifications de codage de WordPress) constituent les trois piliers fondamentaux du développement de plugins de haute qualité. Continuer à apprendre et à pratiquer des API avancées, telles que les types d’articles personnalisés, les API REST et le développement de l’éditeur Blocks, rendra votre plugin encore plus puissant.

FAQ Foire aux questions

Le développement de plugins doit-il obligatoirement utiliser la programmation orientée objet ?

Ce n’est pas nécessairement le cas. Pour les plugins simples, l’utilisation de la programmation procédurale (un ensemble de fonctions) est tout à fait viable et même plus simple et directe. Cependant, pour les plugins complexes de taille moyenne ou grande, l’adoption de la programmation orientée objet (POO) et de structures de classes permet de mieux organiser le code, d’assurer l’encapsulation et le réutilisabilité des éléments, et de réduire les conflits de noms. C’est donc la méthode la plus recommandée.

Comment déboguer les problèmes dans un plugin WordPress ?

Tout d’abord, assurez-vous que… wp-config.php Activer dans le fichier. WP_DEBUG et WP_DEBUG_LOG Il s’agit d’une constante ; de cette manière, les messages d’erreur seront enregistrés. /wp-content/debug.log Dans le fichier, ces informations ne seront pas affichées aux utilisateurs. De plus, il est possible d’utiliser… error_log() La fonction émet les valeurs des variables dans le journal d’activité. Pour les applications Ajax ou les logiques complexes, les panneaux “Réseau” et “Console” des outils de développement du navigateur sont des outils de débogage essentiels.

Comment mon plugin peut-il être compatible avec le thème et d’autres plugins ?

Les meilleures pratiques pour maintenir la compatibilité sont les suivantes : respecter strictement l’API officielle de WordPress ainsi que les normes de codage ; et ajouter un préfixe unique aux noms de vos fonctions, classes et hooks d’action. mfp_Afin d’éviter les conflits, vérifiez l’existence de toute variable ou fonction globale avant de l’utiliser. function_exists() Ou class_exists()) ; et expliquez clairement dans le document les tables de base de données créées par votre plugin.选项Ou 用户元数据。

Quelles sont les conditions requises pour soumettre un plugin au répertoire WordPress.org ?

Vous devez avoir un compte WordPress.org et vous assurer que le plug-in est entièrement conforme aux exigences officielles. Cela inclut : le code doit être compatible avec la licence GPL (généralement GPLv2+) ; le plug-in doit être open-source et ne pas dépendre de services payants externes pour exécuter ses fonctions principales ; il doit inclure un format standard. readme.txt Le fichier ne contient aucun contenu malveillant ou inutile, et a également passé la vérification par l’équipe d’audit manuel. Avant de soumettre votre contribution, veuillez lire attentivement le manuel officiel de développement de plugins ainsi que les directives de soumission.