Guide d’introduction au développement de plugins WordPress : de zéro à la publication en ligne, toute la procédure étape par étape.

Préparation et installation de l'environnement de développement

Avant de commencer à écrire du code, un environnement de développement scientifique est la première étape vers le succès. Tout d’abord, vous devez installer un environnement WordPress local. Il est fortement recommandé d’utiliser des environnements intégrés tels que XAMPP, MAMP, Local by Flywheel ou Laragon, qui permettent de configurer en un clic PHP, MySQL et le serveur Web (généralement Apache ou Nginx). Assurez-vous que la version de PHP de votre environnement de développement soit compatible avec la version de WordPress que vous ciblez. Il est généralement recommandé d’utiliser PHP 7.4 ou une version ultérieure.

Ensuite, vous aurez besoin d'un éditeur de code ou d'un environnement de développement intégré (IDE). PHPStorm, Visual Studio Code ou Sublime Text sont d'excellents choix, car ils offrent des fonctionnalités telles que la mise en évidence de la syntaxe, le débogage du code et l'intégration du contrôle de version. L'utilisation d'un éditeur qui affiche clairement la structure des répertoires est essentielle pour comprendre l'organisation des fichiers des plugins WordPress.

Avant de commencer à coder, vous devez comprendre les fichiers principaux des plugins WordPress. Chaque plugin est composé d'au moins un fichier PHP principal, par exemple nommé . my-first-plugin.phpCe fichier doit contenir des informations spéciales relatives à l’en-tête du plug-in, qui sert d“” identifiant » du plug-in, permettant à WordPress d’afficher les informations de base du plug-in. De même, il est important de bien organiser la structure des répertoires du plug-in. Bien que les plug-ins simples puissent n’avoir qu’un seul fichier, les plug-ins complexes contiennent généralement plusieurs répertoires, par exemple : /assets/ Pour stocker les fichiers CSS et JavaScript,/includes/ Pour stocker des fichiers de type fonctionnel,/languages/ Stockez les documents internationalisés. Mettre en place une structure claire facilite la maintenance et la collaboration au sein de l'équipe.

Lectures recommandées Maîtriser le développement de plugins pour WordPress à partir de zéro : Guide complet et tutoriel pratique。

Le processus de développement des plugins principaux.

Le processus de création d’un plug-in commence par la rédaction du fichier principal. Tous les plug-ins doivent commencer par une annotation d’en-tête spécifique, qui sert à informer WordPress du nom du plug-in, de sa description, de sa version, de son auteur, etc.

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

Voici un exemple du fichier principal d'un plug-in le plus basique, qui doit être placé directement dans /wp-content/plugins/ Dans le menu, par exemple. example-plugin/example-plugin.php。

<?php
/**
 * 插件名称: 我的第一个插件
 * 插件 URI: https://example.com/my-first-plugin
 * 描述: 这是一个用于演示的基础WordPress插件。
 * 版本: 1.0.0
 * 作者: 张三
 * 作者 URI: https://example.com
 * 许可证: GPL v2 or later
 * 文本域: my-first-plugin
 */

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

Une fois ce fichier enregistré, vous pourrez le voir et l’activer dans la page “ Plugins ” de l’interface d’administration de WordPress. Bien qu’il ne fasse rien pour le moment, cela signifie que la structure de base du plugin est en place. Ensuite, vous devrez ajouter la logique des fonctionnalités principales.

Une fonctionnalité typique consiste à modifier le contenu d’une page ou d’un article WordPress. Nous pouvons créer une fonction simple, puis l’attacher au contenu via les crochets de filtre de WordPress. Par exemple, le code ci-dessous ajoute automatiquement un texte personnalisé à la fin de chaque article. Nous allons d’abord définir une fonction de filtre. myplugin_add_footer_textEnsuite, utilisez… add_filter La fonction le monte sur the_content Sur le filtre.

\n// Fonction pour ajouter du texte personnalisé à la fin du contenu de l'article
function myplugin_add_footer_text( $content ) {
    // Ne s'applique qu'aux articles d'une seule page du boucle principale
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = ' '<p><em>Cet article a été amélioré par “ Mon premier plug-in ”.</em></p>'fonction myplugin_add_footer_text() :  
    // extraire le texte personnalisé du champ de texte  
    $custom_text = get_post_custom( $post_id );  
    if (isset( $custom_text['my_custom_field'] )) {  
        $content = $custom_text['my_custom_field'];  
    } else {  
        $content = 'Ceci est un texte de pied de page personnalisé.';  
    }  
    return $content;  

// ajouter la fonction au filtre 'the_content'  
add_filter( 'the_content', 'myplugin_add_footer_text' );

En plus des filtres, les crochets d'action (Action Hook) sont également essentiels pour étendre les fonctionnalités de WordPress. Contrairement aux filtres, les actions sont généralement utilisées pour exécuter des tâches à un moment précis, par exemple pour ajouter une page de menu dans l'interface d'administration. Vous pouvez utiliser : add_action Vous pouvez utiliser la fonction mount pour monter votre fonction. Par exemple, pour ajouter un élément de menu de configuration en arrière-plan, vous devez généralement le monter. admin_menu Ce déclencheur d'action.

Lectures recommandées Apprendre à développer des plugins WordPress à partir de zéro : créer des fonctionnalités personnalisées et appliquer les meilleures pratiques.。

Des fonctionnalités avancées et une intégration complète.

Lorsque le nombre de fonctionnalités d’un plug-in augmente, il devient difficile de gérer tout le code dans le fichier principal. Le développement avancé de plug-ins encourage l’utilisation de la programmation orientée objet (POO) pour organiser le code. En créant une classe représentant les fonctionnalités principales du plug-in, vous pouvez mieux encapsuler les données et les fonctionnalités, et réduire les conflits de nommage.

Voici un simple exemple d’utilisation des méthodes de classe pour créer une fonction de code courte. Nous allons créer une classe. My_Shortcode_Plugin Pour enregistrer un code court, vous devez d’abord définir la méthode de construction de la classe et y enregistrer le code court.

La classe My_Shortcode_Plugin contient la méthode __construct(), qui sert à enregistrer le shortcode 'greeting' dans le constructeur. Cette méthode utilise la fonction add_shortcode pour ajouter le shortcode au système de gestion de contenu WordPress. Ensuite, la méthode render_greeting_shortcode est utilisée pour afficher le shortcode lorsqu'il est appelé. Cette méthode traite les attributs du shortcode et retourne le résultat de la rendu du shortcode.'<div class="greeting">Bonjour, ' . esc_html($atts['name']) . ' !' . $content . '</div>';
    }
}
// 实例化插件类
new My_Shortcode_Plugin();

En plus de la fonctionnalité elle-même, un excellent plugin doit tenir compte du style et de l'interactivité de l'interface utilisateur. Cela signifie que vous devez importer en toute sécurité les fichiers CSS et JavaScript. WordPress fournit une API complète pour enregistrer et ajouter des scripts et des feuilles de style.

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

Vous pouvez le faire en suivant ces étapes : wp_register_script、wp_register_style ainsi que la fonction d'ajout correspondante. wp_enqueue_script et wp_enqueue_style Pour terminer. Par exemple, le code ci-dessous montre comment enregistrer et ajouter la feuille de style du plug-in à l'interface frontale. En général, nous allons placer le code suivant dans un fichier CSS externe : wp_enqueue_scripts Les crochets sont utilisés pour l'interface utilisateur, tandis que les événements sont utilisés pour le backend. admin_enqueue_scripts Les hooks sont utilisés en arrière-plan.

// 注册并加入插件前端样式和脚本的函数
function myplugin_enqueue_assets() {
    // 注册一个CSS文件
    wp_register_style(
        'myplugin-frontend-style',
        plugins_url( 'assets/css/frontend.css', __FILE__ ),
        array(),
        '1.0.0'
    );
    // 将CSS文件加入队列
    wp_enqueue_style( 'myplugin-frontend-style' );
}
// 挂载到 `wp_enqueue_scripts` 钩子（前端）
add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_assets' );

En outre, la création d’une page d’options d’arrière-plan est une exigence courante pour les plugins modernes. Cela nécessite l’utilisation de l’API Settings de WordPress, qui fournit une manière sécurisée et standardisée de créer, valider et enregistrer les options de configuration. Vous devez utiliser : add_options_page Avec cette fonction, vous pouvez ajouter des pages de sous-menu et les utiliser. register_setting、add_settings_section et add_settings_field Nous utilisons des fonctions telles que form_submit() et form_processing() pour créer des formulaires de configuration et traiter les données.

Test, empaquetage et publication des plugins.

Après avoir terminé le codage, des tests rigoureux sont essentiels pour garantir la qualité du plug-in. Vous devez effectuer des tests dans différents environnements. Assurez-vous de tester les fonctionnalités principales dans votre environnement de développement local, puis de tester la compatibilité sur un serveur de test qui simule l’environnement en ligne. Les tests doivent inclure : la compatibilité avec la version actuelle et la version précédente de WordPress ; la compatibilité avec le thème que vous utilisez et d’autres plug-ins populaires ; la compatibilité avec les versions PHP récentes et anciennes (par exemple, PHP 7.4 et 8.x) ; et les performances de l’interface utilisateur dans différents navigateurs (tels que Chrome, Firefox et Safari). L’activation du mode de débogage de WordPress peut vous aider à détecter les erreurs ou les avertissements PHP. wp-config.php Les paramètres du fichier sont définis dans le document. WP_DEBUG Pour true Vous pouvez activer cette fonctionnalité.

Lectures recommandées Guide d’introduction au développement de plugins WordPress : construire votre première extension de fonctionnalité de A à Z.。

Après avoir confirmé que le plug-in est stable, vous devez effectuer les préparations avant le packaging. Cela comprend au moins deux étapes clés : l'internationalisation du code (i18n) et la préparation du fichier Readme. L'internationalisation permet à votre plug-in de supporter plusieurs langues, ce qui est la base pour qu'il puisse être utilisé dans le monde entier. Vous devez utiliser les fonctions de traduction de WordPress pour toutes les chaînes affichées aux utilisateurs, par exemple : ()、_e() et esc_html()En même temps, /languages/ Un fichier de modèle POT est placé dans le répertoire, à l'usage des traducteurs.

Un autre document nécessaire est un formulaire standard. readme.txtIl est utilisé pour la présentation dans le répertoire officiel des plugins de WordPress et doit être rédigé selon un format de syntaxe spécifique, comprenant le nom du plugin, sa description, les étapes d'installation, les questions fréquentes, les journaux de mises à jour, etc. WordPress.org exige que readme.txt Le format a des exigences strictes, vous pouvez vous référer à la documentation officielle pour le rédiger.

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

Une fois les préparatifs terminés, vous pouvez commencer à emballer. Créez un dossier temporaire et copiez-y tous les fichiers du plug-in, à l'exception des outils de développement (tels que le répertoire Git et les fichiers de configuration de l'EDI) et des fichiers inutiles (tels que les fichiers PSD originaux). Assurez-vous que les chemins et les autorisations de tous les fichiers sont corrects. Ensuite, utilisez un outil de compression ZIP pour compresser le tout en un fichier ZIP, par exemple. my-first-plugin-v1.0.0.zipLe dossier de votre plug-in devrait se trouver directement dans le répertoire racine de ce fichier ZIP.

Enfin, vient la phase passionnante de la publication. Vous pouvez demander un dépôt de code SVN gratuit sur WordPress.org, qui est le seul moyen de publier un plug-in dans le répertoire officiel. Vous devez maîtriser les commandes SVN de base pour soumettre le code du plug-in organisé pour la première fois au dépôt. /trunk/ Contenu. Le contenu traité sera affiché dans le menu. readme.txt Après la mise à jour du numéro de version stable dans le fichier principal, vous pouvez créer une nouvelle étiquette SVN (par exemple). /tags/1.0.0/Pour publier une version, vous devez utiliser le système de soumission de WordPress.org. Après la soumission, le système de WordPress.org s'occupe automatiquement du reste et, en général, votre plug-in apparaîtra dans le répertoire officiel quelques heures plus tard, où les utilisateurs du monde entier pourront le rechercher et l'installer.

résumés

Développer un plugin WordPress à partir de zéro est un parcours systématique et gratifiant. Cela commence par la configuration d’un environnement local et la compréhension de la structure des fichiers principaux, puis la mise en œuvre des fonctionnalités principales en écrivant des informations d’en-tête de plugin et en utilisant des filtres et des actions. Au fur et à mesure que les besoins deviennent plus complexes, l’adoption de la programmation orientée objet, l’intégration sécurisée des ressources frontales et la construction d’une interface d’administration back-end deviennent des compétences indispensables. À la fin du cycle de développement, des tests de compatibilité complets, une internationalisation rigoureuse et la préparation de la documentation, ainsi qu’un processus de packaging et de publication conforme aux normes, garantissent que le plugin passe d’une œuvre personnelle à un produit fiable disponible pour la communauté. Maîtriser l’ensemble de ce processus vous permet non seulement de répondre aux besoins spécifiques d’un site Web, mais aussi de participer activement au développement de l’écosystème WordPress.

FAQ Foire aux questions

Pour développer un plug-in, quelles connaissances préalables sont nécessaires ?
Pour développer un plugin WordPress, vous devez d’abord avoir une solide base en programmation PHP, car le code du plugin est principalement écrit en PHP. En même temps, vous devez avoir une connaissance de base du HTML, du CSS et du JavaScript pour gérer l’affichage et l’interactivité frontaux. Maîtriser les concepts de base de WordPress, tels que les thèmes, les hooks, les shortcodes, les requêtes et les différentes API (comme l’API Options et l’API REST), est essentiel pour un développement efficace. Bien que cela ne vous oblige pas à être un expert dans tous ces domaines, posséder ces connaissances vous permettra d’éviter les écueils pendant le développement.

Comment déboguer efficacement les erreurs dans les plugins personnalisés ?

La méthode de débogage la plus efficace consiste à activer le mode de débogage de WordPress. Sur le site web, wp-config.php Dans le fichier, trouvez et configurez. define( 'WP_DEBUG', true );Cela affichera directement les erreurs, avertissements et notifications PHP sur la page.

Pour afficher plus clairement les variables et le contenu des tableaux, vous pouvez utiliser les deux outils ensemble. error_log() La fonction enregistre les informations dans le journal des erreurs du serveur, ou utilise des fonctions auxiliaires telles que print_r() Ou var_dump()Et affichez sa sortie en HTML. <pre> Etiquettez les paquets pour une présentation formatée. De plus, il est indispensable d’utiliser les outils de développement du navigateur (F12) pour vérifier les requêtes réseau et les erreurs de la console JavaScript. Pour une logique complexe, vous pouvez envisager d’utiliser des outils de débogage professionnels tels que Xdebug.

Pourquoi mon plug-in n'a provoqué aucun changement sur le site après son activation en arrière-plan ?

Cela est généralement dû à plusieurs raisons courantes. Tout d’abord, vérifiez si votre code fonctionnel est correctement exécuté. Assurez-vous que votre fonction a été validée. add_action Ou add_filter Ils sont montés sur les crochets appropriés et ces crochets sont déclenchés sur les pages que vous souhaitez (par exemple, l'interface frontale, l'interface arrière).

Ensuite, vérifiez que votre plug-in n'a pas été désactivé en raison d'erreurs de syntaxe ou d'erreurs fatales. Consultez la page “ Plugins installés ” de l'interface d'administration WordPress. Si le nom de votre plug-in est devenu “ Plugin endommagé ”, cela signifie généralement que les informations d'en-tête du plug-in sont incomplètes ou que le fichier principal contient des erreurs de syntaxe. Enfin, vérifiez si votre code contient des instructions de contrôle de condition (telles que <). is_single(), is_admin()Ces conditions peuvent ne pas être remplies par la page actuelle, ce qui entraîne la non-exécution de la fonctionnalité.

Comment ajouter des paramètres de configuration pour les utilisateurs dans un plug-in ?

Il est recommandé d’utiliser l’API Settings intégrée à WordPress pour créer les éléments de configuration, car c’est la méthode la plus sûre et la plus standard. Le processus de base est le suivant : d’abord, utilisez… add_menu_page() Ou add_options_page() La fonction ajoute une page de menu en arrière-plan. Ensuite, utilisez-la. register_setting() La fonction enregistre un groupe de paramètres (utilisé pour la vérification de sécurité et le stockage). Ensuite, elle utilise ces paramètres. add_settings_section() Ajoutez des groupes de régions à votre page de paramètres. Enfin, utilisez-les. add_settings_field() Ajoutez des champs de formulaire spécifiques (tels que des champs de saisie, des menus déroulants) dans le groupe. Vous devez écrire une fonction de rappel pour rendre le code HTML de chaque champ, puis l'utiliser dans la fonction de rappel de la page de menu. settings_fields() et do_settings_sections() Affichez l'ensemble du formulaire. Une fois que l'utilisateur l'a soumis, WordPress s'occupe automatiquement de la sauvegarde et de la validation des données.

Comment soumettre un plug-in au répertoire officiel des plug-ins de WordPress ?

Pour soumettre un plug-in au répertoire officiel, vous devez d’abord créer un compte sur WordPress.org. Ensuite, accédez à la page de soumission des plug-ins pour demander un nouveau dépôt SVN pour le plug-in. Une fois la demande approuvée, vous recevrez l’adresse du dépôt SVN. Ensuite, vous devrez préparer les fichiers du plug-in conformément aux normes officielles, en particulier celles qui répondent aux exigences. readme.txt Des fichiers et un fichier PHP principal contenant des commentaires d'en-tête standard.

À l’aide d’un client SVN (comme un outil en ligne de commande ou TortoiseSVN), soumettez pour la première fois le code de votre plug-in au dépôt. /trunk/ Contenu. Lors de la publication d'une version stable, celle-ci sera /trunk/ Le contenu a été copié dans /tags/ Créez une nouvelle étiquette dans le répertoire (par exemple…) /tags/1.0.0/), et puis readme.txt Le champ “ Stable tag ” dans le plugin est mis à jour avec ce numéro de version. Après la soumission, WordPress.org analyse et traite automatiquement le plugin, et après un certain temps, votre plugin apparaîtra dans le répertoire officiel.