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

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

Avant de commencer à écrire du code, il est essentiel de vous assurer que votre environnement de développement est correctement configuré. Un bon environnement de développement local peut considérablement améliorer l’efficacité du développement ainsi que l’expérience de débogage.

Tout d’abord, vous devez installer un environnement de serveur Web sur votre ordinateur local, ce qui est généralement appelé “ environnement de serveur local ”. L’une des options les plus populaires est XAMPP ou MAMP, qui intègrent Apache, MySQL/MariaDB et PHP. Une autre solution puissante est d’utiliser Docker pour configurer un environnement proche de celui d’une production réelle. Que vous choisissiez l’une ou l’autre option, veillez à ce que la version de PHP (recommandée : 7.4 ou une version ultérieure) et la version de MySQL soient compatibles avec la plupart des environnements hôtes WordPress.

Ensuite, téléchargez et installez la dernière version de WordPress. Dézippez les fichiers de WordPress dans le répertoire racine de votre site sur votre serveur local (par exemple, dans le répertoire de XAMPP). htdocs Créez un dossier approprié et suivez la célèbre procédure d’installation en cinq minutes pour configurer tout correctement. Assurez-vous de pouvoir accéder normalement à ce site WordPress local.

Lectures recommandées Compréhensible même pour les débutants : Guide complet pour maîtriser le développement de plugins WordPress à partir de zéro。

Enfin, et ce est un pas crucial : préparez un éditeur de code. Nous vous recommandons des outils tels que Visual Studio Code, PhpStorm ou Sublime Text, qui offrent des fonctionnalités telles que l’highlightage du code, des suggestions intelligentes et la possibilité de déboguer. Cela est particulièrement important pour le développement en PHP, car ces fonctionnalités vous aident à éviter de nombreux erreurs de syntaxe de bas niveau.

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

Structure de base des plugins et fichier principal

Un plugin WordPress possède une structure de fichiers standard et obligatoire, dont l’élément central est un fichier situé… /wp-content/plugins/ Le dossier du même nom que celui dans le répertoire, ainsi que le fichier PHP principal qui se trouve à l’intérieur de ce dossier.

Créer le fichier principal du plugin.

Tout d’abord, /wp-content/plugins/ Créez un nouveau dossier dans le répertoire. Le nom du dossier doit être concis, unique et refléter la fonction du plugin, par exemple “ my-first-plugin ”. Ensuite, créez à l’intérieur de ce dossier un fichier PHP dont le nom est identique à celui du dossier. my-first-plugin.php。

Ce fichier principal constitue le “ point d’entrée ” du plugin. WordPress reconnaît les métadonnées du plugin en lisant les informations contenues dans la partie supérieure du fichier, appelée « en-tête du plugin ». Ces informations sont définies par un bloc de commentaires PHP standard et doivent être placées en début de fichier. Elles doivent au minimum inclure le nom du plugin et sa description.

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

Dans le code ci-dessus,Plugin Name Ces informations sont obligatoires ; les autres sont optionnelles mais sont fortement conseillées. Elles seront affichées sur la page de gestion des plugins dans l’administration de WordPress.Text Domain Conçu pour l’internationalisation (soutien à plusieurs langues), il correspond aux champs de texte utilisés lors des appels ultérieurs aux fonctions de traduction.

Lectures recommandées Maîtriser le développement de plugins pour WordPress à partir de zéro : Principes, pratique et astuces avancées。

Définir les constantes de base du plugin

De bonnes pratiques de développement de plugins consistent à définir dès le début des constantes utiles, telles que le chemin du fichier du plugin et son URL, afin de pouvoir les référencer facilement dans le code ultérieur. Cela permet d’éviter le codage manuel des chemins, rendant le code plus facile à maintenir et à transférer sur d’autres plateformes.

Vous pouvez ajouter le code suivant dans le fichier principal, juste après les informations de tête du plugin, pour définir les constantes :

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果 ABSPATH 未定义，则退出
}

// 定义插件路径和URL常量
define( 'MFP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'MFP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'MFP_PLUGIN_VERSION', '1.0.0' );

Ici,plugin_dir_path( FILE ) et plugin_dir_url( FILE ) Il s’agit d’une fonction de base fournie par WordPress qui permet d’obtenir de manière sûre le chemin du répertoire et l’URL du fichier de l’extension actuelle.MFP_PLUGIN_VERSION Les constantes sont utilisées pour stocker les numéros de version des plugins, ce qui facilite leur utilisation lors de l’importation de styles de script ou de la comparaison des versions.

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

Mise en œuvre des fonctionnalités essentielles et utilisation des « hooks »

L’essence du développement de plugins pour WordPress réside dans l’utilisation du système des “ hooks ”. Il existe deux types de hooks : les actions (Actions) et les filtres (Filters). Ces derniers vous permettent d’insérer votre code à des moments précis du fonctionnement de WordPress (par exemple, lors du chargement d’une page ou de l’enregistrement d’un article), ou de modifier les données retournées par d’autres fonctions.

Ajouter un simple crochet d’action (action hook).

Mettons en œuvre la fonctionnalité la plus simple : ajouter une ligne de texte en bas de la page du site web. Nous utiliserons des « action hooks » (des mécanismes de déclenchement de fonctions) pour cela. wp_footerIl sera déclenché avant que l’HTML ne soit affiché dans la zone du pied de page.

Ajoutez une fonction dans le fichier principal, puis utilisez-la par la suite. add_action La fonction le monte sur wp_footer Sur ce crochet.

Lectures recommandées Guide de développement de plugins WordPress : apprenez pas à pas à créer votre propre plugin de A à Z.。

/**
 * 在网站页脚输出自定义文本
 */
function mfp_display_footer_text() {
    echo '<p style="text-align: center; color: #666;">Merci d’utiliser mon premier plugin pour WordPress !</p>';
}
add_action( 'wp_footer', 'mfp_display_footer_text' );

Maintenant, activez votre plugin et accédez à l’interface utilisateur du site. Faites défiler la page vers le bas ; vous devriez voir cette ligne de texte. C’est l’utilisation de base des « action hooks » : effectuer une action à un moment précis.

Utilisez un filtre pour modifier le contenu.

Les filtres servent à modifier des valeurs existantes. Par exemple, si nous voulons modifier le titre d’un article pour y ajouter le texte “【Recommandé】” devant chaque titre, nous pouvons le faire en utilisant un filtre approprié. the_title Cela est réalisé à l’aide de filtres.

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

Créez une nouvelle fonction qui prend en paramètre le titre d’origine à filtrer et qui retourne le titre modifié. Ensuite, utilisez cette fonction pour effectuer le filtrage. add_filter Montage.

/**
 * 在所有文章标题前添加前缀
 * @param string $title 原始标题
 * @return string 修改后的标题
 */
function mfp_add_prefix_to_title( $title ) {
    // 确保只在主循环中修改，避免影响后台列表等其他地方
    if ( is_single() && in_the_loop() ) {
        $title = '【推荐】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_prefix_to_title' );

Cet exemple simple démontre la puissance des filtres : vous pouvez vérifier des conditions (comme…) is_single() Déterminer s'il s'agit d'une page d'article unique, et modifier uniquement le contenu dans un contexte spécifique.

Ajouter des pages de gestion et des pratiques de sécurité.

Un plugin complet nécessite généralement une page de configuration en back-office, permettant aux administrateurs du site de faire des ajustements. Il est également essentiel de garantir la sécurité du code.

Page de configuration pour la création d'un plugin

Nous allons utiliser… add_menu_page La fonction ajoute un menu de gestion principal ainsi que la page de paramétrage correspondante au plugin.

Tout d’abord, créez une fonction pour générer le contenu HTML de la page de configuration, puis utilisez cette fonction en la montant (en l’associant) à un élément de l’interface utilisateur. admin_menu La fonction du crochet d'action est utilisée pour enregistrer ce menu.

/**
 * 渲染插件设置页面的HTML内容
 */
function mfp_render_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( '你没有足够的权限访问此页面。', 'my-first-plugin' ) );
    }
    ?>
    <div class="wrap">
        <h1></h1>
        <p>C’est la page de configuration de mon premier plugin. À l’avenir, il sera possible d’y ajouter des formulaires et des options.</p>
        <form action="/fr/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 后续可以在这里添加设置字段
            // settings_fields( 'mfp_options_group' );
            // do_settings_sections( 'mfp-settings-page' );
            // submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
    &lt;?php
}

/**
 * 注册插件管理菜单
 */
function mfp_add_admin_menu() {
    add_menu_page(
        &#039;我的第一个插件设置&#039;, // 页面标题
        &#039;我的插件&#039;,          // 菜单标题
        &#039;manage_options&#039;,    // 所需权限 (manage_options)
        &#039;mfp-settings-page&#039;, // 菜单slug
        &#039;mfp_render_settings_page&#039;, // 回调函数
        &#039;dashicons-admin-plugins&#039;, // 图标 (Dashicons)
        80                   // 菜单位置
    );
}
add_action( &#039;admin_menu&#039;, &#039;mfp_add_admin_menu&#039; );

Après l’activation du plugin, vous verrez un nouvel élément de menu intitulé “ Mes plugins ” sur le côté gauche de l’interface d’administration de WordPress. En cliquant dessus, vous accéderez à une page de configuration simple. Cette page dispose d’une interface permettant d’ajouter des champs de formulaire à l’aide de l’API WordPress Settings, ce qui constitue la méthode standard pour gérer de manière sécurisée les données saisies par les utilisateurs.

La validation et l'échappement des données.

Tous les données reçues des utilisateurs ou envoyées vers le navigateur doivent être traitées afin de prévenir les attaques de type Cross-Site Scripting (XSS) et les injections SQL. WordPress met à disposition de nombreuses fonctions de sécurité pour cela.

• Output en mode échappement : utiliser esc_html()、esc_attr()、esc_url() et wp_kses_post() Utilisez des fonctions telles que celles-ci pour purifier le contenu affiché dans l’HTML.
• Validation des données : utilisation sanitize_text_field()、sanitize_email() Utilisez des fonctions telles que `clean()` pour nettoyer les données saisies et soumises depuis les formulaires.
• Clé non CE : Pour les opérations sur les formulaires impliquant la modification de données, il est obligatoire d'utiliser cette clé. wp_nonce_field() et wp_verify_nonce() Vérifier la légitimité de la demande.

La sécurité est l’élément essentiel dans le développement de plugins ; il est donc indispensable de développer de bonnes habitudes dès le début.

résumés

À travers ce tutoriel, nous avons suivi un processus complet de développement d’un plugin pour WordPress. Bien que le plugin soit petit, il contient toutes les fonctionnalités essentielles. Nous avons commencé par rien, en créant notre environnement de développement et en mettant en place une structure de fichier principale conforme aux normes. En implémentant deux fonctionnalités – l’ajout de texte au pied de page et la modification des titres des articles – nous avons mieux compris l’utilisation fondamentale des hooks d’action et des hooks de filtre, qui sont au cœur du fonctionnement de WordPress. Enfin, nous avons ajouté une page de gestion de l’administration de base pour le plugin, et nous avons souligné l’importance de bonnes pratiques de sécurité telles que la validation des données, le contrôle des droits d’accès et l’échappement des caractères.

Ce simple plugin de niveau “ Hello World ” contient déjà les éléments essentiels nécessaires à un plugin commercial : une structure standard, l’utilisation de hooks, une interface d’administration en arrière-plan et des considérations de sécurité. En partant de là, vous pouvez essayer d’intégrer l’API Settings de WordPress pour créer de véritables options, de rédiger des tables de base de données personnalisées, ou encore de créer des scripts et des outils plus complexes. N’oubliez pas que l’apprentissage continu des manuels officiels de développement ainsi que de l’analyse du code des plugins open source de qualité est le meilleur moyen d’améliorer vos compétences.

FAQ Foire aux questions

Comment déboguer mon plug-in WordPress ?
La première étape consiste à activer le mode de débogage de WordPress. Dans votre… wp-config.php Dans le document, il sera indiqué que... WP_DEBUG Les valeurs des constantes sont définies comme suit : trueVous pouvez également effectuer des paramétrages supplémentaires. WP_DEBUG_LOG Pour trueEnregistrez les informations d'erreur dans… /wp-content/debug.log Dans le fichier, il faut éviter que les messages d’erreur ne soient affichés directement sur la page, car cela pourrait perturber l’utilisateur.

De plus, utiliser les panneaux « Console » et « Network » des outils de développement du navigateur (F12) pour consulter les erreurs JavaScript et les demandes API, ainsi que des outils de débogage PHP tels que Xdebug en les intégrant à votre éditeur de code (par exemple, VS Code) pour effectuer des débogages par points d’arrêt, constituent des méthodes très efficaces et professionnelles.

Pourquoi mon plugin affiche-t-il une “ erreur fatale ” lorsqu’il est activé ?

Cela est généralement dû à une erreur de syntaxe PHP ou à l’appel d’une fonction/classe inexistante. Tout d’abord, vérifiez les journaux de débogage de WordPress (comme mentionné ci-dessus). Les informations d’erreur indiqueront clairement à quel niveau de quel fichier le problème se trouve.

Les raisons les plus courantes incluent : l’absence de points-virgules, des parenthèses incohérentes ou des guillemets mal placés, l’appel d’une fonction sans avoir inclus les fichiers nécessaires, ou des lignes de code qui tentent de s’exécuter alors que le plugin est désactivé. Vérifiez que votre version PHP est compatible avec les exigences de votre projet, et assurez-vous que toutes les fonctions sont définies avant d’être utilisées.

Comment faire en sorte que mon plugin soit compatible avec plusieurs langues (internationalisation) ?

WordPress utilise le framework GNU gettext pour la mise en œuvre de l’internationalisation (i18n) et de la localisation (l10n). Tout d’abord, il est nécessaire de configurer correctement les informations dans la partie en tête du fichier principal, comme indiqué dans les tutoriels. Text DomainPar exemple… my-first-pluginet Domain Path。

Dans le code du plugin, pour toutes les chaînes de caractères qui doivent être traduites, utilisez une fonction de traduction pour les encadrer. Par exemple :__( ‘文本’, ‘my-first-plugin’ ) Ou _e( ‘文本’, ‘my-first-plugin’ )Ensuite, utilisez un outil comme Poedit pour analyser ces chaînes de caractères dans le code, afin de générer un fichier de modèle .pot, ainsi que les fichiers .po et .mo correspondants pour la langue concernée (par exemple, le chinois zh_CN). Placez ces fichiers dans le répertoire approprié. /languages/ Dans le répertoire.

Comment interagir de manière sûre avec une base de données lors du développement d’extensions (plugins) ?

Il est absolument interdit d’écrire directement des instructions SQL en combinant les données saisies par les utilisateurs. Il faut obligatoirement utiliser les classes de gestion de la base de données fournies par WordPress. $wpdbIl offre des fonctionnalités telles que… $wpdb->prepare() Cette méthode permet de traiter les requêtes SQL de manière sécurisée en utilisant des pré-commandes, ce qui empêche efficacement les injections SQL.

Par exemple, pour effectuer une recherche de données, il faut écrire comme ceci :

global $wpdb;
$user_input = $_POST['some_input'];
$safe_query = $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}table WHERE column = %s", $user_input );
$results = $wpdb->get_results( $safe_query );

En même temps, il est nécessaire de procéder à une vérification et à un nettoyage strict des données saisies par les utilisateurs, par exemple en utilisant des méthodes appropriées. sanitize_text_field() et d'autres fonctions.