Guide de développement du plug-in WooCommerce : créez vos propres fonctionnalités e-commerce à partir de zéro.

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

Avant de commencer à écrire la première ligne de code, vous devez vous assurer d’avoir un environnement de développement sûr et professionnel. Cela non seulement améliorera votre efficacité de développement, mais garantira également la stabilité et la fiabilité du processus de création de vos plugins.

Créer un environnement de développement local

Nous recommandons vivement d’utiliser un environnement de développement local pour la création de plugins. Cela vous permet de faire des essais et des débogages sans affecter le site web en ligne. L’option la plus courante est d’utiliser…Local、XAMPPOuMAMPCes outils configureront automatiquement PHP, MySQL et le serveur web pour vous. Vérifiez que votre environnement répond aux exigences minimales de WooCommerce : la version de PHP doit être supérieure à 7.4, et celle de MySQL ou de MariaDB à 5.7 ou 10.3. Une fois l’environnement prêt, installez une nouvelle version de WordPress et activez la dernière version du plugin WooCommerce.

Créer les fichiers de base d'un plugin

Votre plugin commencera par un fichier principal. Dans WordPress…wp-content/pluginsDans le répertoire, créez un nouveau dossier, par exemple…my-custom-woocommerceDans ce dossier, créez un fichier de plugin principal, qui est généralement nommé…my-custom-woocommerce.phpCe fichier constitue l’entrée principale de votre plugin, et les commentaires situés en tête de ce fichier sont d’une importance capitale. Ils indiquent à WordPress comment reconnaître votre plugin.

Lectures recommandées Développement de plugins pour WordPress : Construire des plugins fonctionnels personnalisés de zéro。

<?php
/**
 * Plugin Name: My Custom WooCommerce Features
 * Plugin URI:  https://yourwebsite.com/
 * Description: 为WooCommerce添加自定义功能，包括产品额外字段和结账流程优化。
 * Version:     1.0.0
 * Author:      Your Name
 * License:     GPL v2 or later
 * Text Domain: my-custom-wc
 */

Cette annotation en tête définit les informations affichées par le plugin dans l'interface d administration de WordPress. Veuillez veiller à ce que…Text DomainIl faut le définir comme une chaîne de caractères unique afin de faciliter les traductions internationales ultérieures.

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

Comprendre le mécanisme d'extension fondamental de WooCommerce

La force de WooCommerce réside dans son architecture hautement extensible, qui est principalement mise en œuvre grâce aux hooks d’action (Action Hooks), aux hooks de filtrage (Filter Hooks) et à la réécriture des templates (Template Overwriting).

Utiliser les crochets d’action et les crochets de filtrage

Les “ hooks ” (crochets) constituent la base des extensions pour WordPress et WooCommerce. Les hooks d’action vous permettent d’insérer votre propre code à des moments précis du fonctionnement du système afin d’y exécuter des actions spécifiques. Par exemple, vous pouvez utiliser ces hooks pour effectuer des tâches après qu’un utilisateur ait passé une commande.woocommerce_thankyouLes “ hooks ” permettent d’envoyer des notifications personnalisées. Les hooks de filtrage, quant à eux, vous permettent de « modifier » les données, en changeant leur valeur avant qu’elles ne soient utilisées ou affichées. Par exemple…woocommerce_product_get_priceLes filtres permettent d’ajuster dynamiquement les prix des produits.

La syntaxe de base pour ajouter une action ou un filtre est la suivante :

add_action( 'hook_name', 'your_callback_function', priority, accepted_args );
add_filter( 'hook_name', 'your_callback_function', priority, accepted_args );

Vous devez…hook_nameRemplacez par des fonctions d’hook spécifiques, et…your_callback_functionRemplacez par le nom de la fonction que vous avez défini vous-même.

Lectures recommandées Débuter de zéro : Maîtriser les étapes clés et les meilleures pratiques du développement de plugins pour WordPress。

Réécrire le fichier de template.

Lorsque vous devez modifier l'affichage de l'interface utilisateur de WooCommerce (par exemple, la page des produits ou la page du panier d'achat), il est incorrect de modifier directement les fichiers de template du plugin, car les modifications seront effacées lors d'une mise à jour. La bonne méthode consiste à réécrire ces templates. Pour cela, vous devez extraire les fichiers de template originaux de WooCommerce de leur emplacement d'installation.plugins/woocommerce/templates/Copiez le contenu du répertoire dans le répertoire de votre thème.your-theme/woocommerce/Dans le chemin correspondant, modifiez cette copie. WooCommerce chargera en priorité les fichiers de template présents dans le thème. C’est la pratique standard pour personnaliser l’apparence et le layout du site.

Développer des modules de fonctionnalités personnalisées

Maintenant, pratiquons le développement de plugins à travers deux besoins courants : l’ajout de champs personnalisés à un produit et la modification de la page de paiement.

Ajouter des champs de gestion pour le produit

Supposons que vous souhaitez ajouter un champ “ Numéro de fabricant ” pour chaque produit. Tout d’abord, vous devez afficher ce champ sur la page d’édition des données du produit en back-office. Cela peut être réalisé en…woocommerce_product_options_general_product_dataCela est réalisé à l’aide de « hooks d’action ».

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

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_product_field' );
function add_custom_product_field() {
    woocommerce_wp_text_input( array(
        'id'          => '_manufacturer_part_number',
        'label'       => __('制造商编号', 'my-custom-wc'),
        'placeholder' => '例如：MPN-12345',
        'desc_tip'    => true,
        'description' => __('产品的唯一制造商部件号。', 'my-custom-wc'),
    ) );
}

Après avoir ajouté les champs, vous devez les utiliser…woocommerce_process_product_metaDes « crochets » sont utilisés pour conserver les valeurs saisies par l’utilisateur.

add_action( 'woocommerce_process_product_meta', 'save_custom_product_field' );
function save_custom_product_field( $post_id ) {
    $product = wc_get_product( $post_id );
    $custom_field_value = isset( $_POST['_manufacturer_part_number'] ) ? sanitize_text_field( $_POST['_manufacturer_part_number'] ) : '';
    $product->update_meta_data( '_manufacturer_part_number', $custom_field_value );
    $product->save();
}

Ici, nous avons utilisé les objets CRUD de WooCommerce (comme…)WC_Product) deupdate_meta_dataetsaveC’est une méthode pour stocker les données, et elle est recommandée dans le développement moderne de WooCommerce.

Afficher les champs personnalisés sur l'interface utilisateur.

Après avoir enregistré les données, vous pourriez souhaiter afficher ces informations sur la page du produit depuis le côté client (front-end). Nous pouvons utiliser…woocommerce_product_additional_information_tab_titleetwoocommerce_product_additional_information_tab_contentFiltre les crochets et ajoutez-les à la page d’informations supplémentaires.

Lectures recommandées Guide complet pour le développement de plugins WordPress : De l'apprentissage à la maîtrise pour créer des plugins fonctionnels。

add_filter( 'woocommerce_product_additional_information_tab_title', 'add_custom_field_to_tab_title' );
function add_custom_field_to_tab_title( $title ) {
    // 这里可以修改标签页标题，但我们主要用它来确保内容被加载
    return $title;
}

add_action( 'woocommerce_product_additional_information_tab_content', 'display_custom_field_on_product_page' );
function display_custom_field_on_product_page() {
    global $product;
    $mpn = $product->get_meta( '_manufacturer_part_number' );
    if ( $mpn ) {
        echo '<p><strong>' . esc_html__( '制造商编号:', 'my-custom-wc' ) . '</strong> '`. esc_html($mpn)`.'</p>';
    }
}

Processus de paiement personnalisé

Une autre demande fréquente consiste à ajouter une case à cocher personnalisée sur la page de paiement, par exemple pour indiquer si l’utilisateur souhaite s’abonner aux newsletters. Nous pouvons utiliser…woocommerce_review_order_before_submitLe champ est ajouté avant le bouton de soumission.

add_action( 'woocommerce_review_order_before_submit', 'add_checkout_custom_checkbox' );
function add_checkout_custom_checkbox() {
    woocommerce_form_field( 'subscribe_to_newsletter', array(
        'type'  => 'checkbox',
        'class' => array('form-row-wide'),
        'label' => __('是的，我希望订阅产品新闻和优惠信息。', 'my-custom-wc'),
    ), false );
}

Ensuite, nous devons vérifier et traiter ce champ. Pour ce faire, nous utilisons…woocommerce_checkout_processUtilisez le crochet pour effectuer la validation.woocommerce_checkout_update_order_metaLe « crochet » (ou mécanisme de liaison) permet de sauvegarder les données dans la commande.

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

add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );
function validate_custom_checkout_field() {
    // 这里可以根据业务逻辑添加验证，例如在某些条件下必须勾选
    // if ( ! $_POST['subscribe_to_newsletter'] ) {
    //     wc_add_notice( __( '请勾选订阅框以继续。', 'my-custom-wc' ), 'error' );
    // }
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    $value = isset( $_POST['subscribe_to_newsletter'] ) && $_POST['subscribe_to_newsletter'] ? 'yes' : 'no';
    update_post_meta( $order_id, '_subscribe_to_newsletter', sanitize_text_field( $value ) );
}

Test, optimisation et publication des plugins

Une fois le développement terminé, des tests approfondis sont essentiels pour garantir la stabilité et la qualité professionnelle de l’extension.

Effectuer des tests fonctionnels complets.

Vous devez simuler des scénarios d’utilisation réels pour effectuer des tests. Créez une commande de test et assurez-vous que les champs que vous avez ajoutés (comme le numéro du fabricant) s’affichent correctement sur la page produit en frontend, et que les cases à cocher sélectionnées lors du paiement soient bien enregistrées dans les données de la commande. Sur la page des détails de la commande dans l’administration de WordPress, vous devez pouvoir voir les informations personnalisées qui ont été sauvegardées. Il est également essentiel de tester la compatibilité avec les fonctionnalités existantes de WooCommerce, d’autres plugins populaires (tels que les gateways de paiement et les calculateurs de frais de livraison), ainsi qu’avec différents thèmes WordPress. Des tests de réactivité sur différents appareils (téléphones, tablettes, ordinateurs de bureau) sont également indispensables.

Optimisation des performances et considérations de sécurité

En termes de performance, assurez-vous que votre code ne soit chargé que lorsque c’est nécessaire. Par exemple, le code du back-office ne devrait être chargé que lorsqu’il est utilisé.is_admin()Le code lié à l’interface utilisateur est chargé sous certaines conditions, et vice versa. Pour les requêtes de base de données qui peuvent être exécutées fréquemment, pensez à utiliser la mise en cache ou à vous assurer que ces requêtes sont optimisées. La sécurité est de la plus haute importance : toutes les données saisies par les utilisateurs doivent être nettoyées et vérifiées. Utilisez les fonctions fournies par WordPress et WooCommerce.sanitize_text_field(), esc_html(), wc_clean()Lorsque vous affichez des données dynamiques sur le front-end, il est indispensable d’effectuer des échappements pour éviter les attaques de type cross-site scripting (XSS).

Préparation de la version finale pour la publication.

Avant de publier votre code, assurez-vous qu’il respecte les normes de codage de WordPress. Utilisez des outils tels que…PHP_CodeSnifferVérifiez en conformité avec l’ensemble de règles standard de WordPress. Améliorez votre code pour respecter ces règles.readme.txtPour le fichier, veuillez fournir une description détaillée des fonctionnalités du plugin, des étapes d’installation, des questions fréquentes ainsi que des captures d’écran montrant son utilisation. Pensez à soumettre votre plugin au répertoire officiel des plugins WordPress, car cela augmentera considérablement sa visibilité et sa crédibilité. Avant de soumettre votre plugin, assurez-vous d’avoir effectué une dernière vérification de son code et de vous être préparé à fournir des mises à jour et un soutien continus à l’avenir.

résumés

Le développement de plugins pour WooCommerce consiste à transformer des besoins commerciaux spécifiques en fonctionnalités e-commerce puissantes. En apprenant de manière systématique ses mécanismes d’extension – tels que les hooks, la réécriture des templates et les opérations sur les objets CRUD – les développeurs peuvent personnaliser chaque étape du processus, de la gestion des produits à l’ensemble de la procédure de paiement, de manière sûre et efficace. La clé du succès réside dans la mise en œuvre de bonnes pratiques : le développement dans un environnement local sécurisé, l’écriture de code maintenable et sécurisé, des tests approfondis dans divers scénarios, ainsi que la fourniture de documents clairs et professionnels aux utilisateurs potentiels. En maîtrisant ces compétences essentielles, vous serez en mesure de créer des extensions pour WooCommerce qui non seulement répondent aux besoins des utilisateurs, mais sont également stables, professionnelles et extensibles, ce qui améliorera la compétitivité de votre site web.

FAQ Foire aux questions

Quelles connaissances préalables sont nécessaires pour développer des plugins pour WooCommerce ?

Vous devez posséder des connaissances de base en programmation PHP et être familier avec les concepts de programmation orientée objet. Il est également essentiel de bien comprendre la structure de base de WordPress (tels que les hooks, les codes courts et les types d’articles personnalisés). Connaître HTML, CSS et le JavaScript de base (en particulier jQuery) vous aidera à personnaliser l’interface utilisateur.

Comment trouver le hook spécifique de WooCommerce dont j’ai besoin ?

Les documents officiels des développeurs de WooCommerce constituent un excellent point de départ pour trouver les hooks, et ils proposent un index complet de ces hooks. De plus, vous pouvez effectuer des recherches directement dans le code source des plugins WooCommerce.do_actionetapply_filtersPour découvrir tous les hooks disponibles, de nombreuses communautés de développement et des blogs ont également répertorié les hooks les plus couramment utilisés avec WooCommerce, ce qui peut servir de référence rapide.

J’ai modifié le fichier du plugin, mais pourquoi ne vois-je aucune modification sur le site web ?

Cela est généralement dû au cache. Veuillez vérifier et vider successivement les caches suivantes : le cache d’objets WordPress (si vous utilisez des solutions comme Redis ou Memcached), les plugins de cache de pages (tels que W3 Total Cache ou WP Rocket), le cache du côté du serveur (comme OPcache), ainsi que le cache de votre navigateur. Pendant le processus de développement, il est conseillé de désactiver tous les mécanismes de cache pour garantir que les modifications au code soient immédiatement prises en compte.

Comment m’assurer que mon plugin personnalisé reste compatible avec les futures mises à jour de WooCommerce ?

Il est de principe primordial d’éviter de modifier les fichiers de base de WooCommerce. Il convient de s’en tenir aux hooks, aux API et aux mécanismes de réécriture de templates fournis par l’éditeur officiel pour le développement. Suivez attentivement les journaux d’actualisation de WooCommerce, en particulier les notifications de mise à l’obsolescence, qui vous indiquent à l’avance les fonctions ou méthodes qui seront supprimées dans les versions futures. Effectuez régulièrement des tests de compatibilité dans un environnement de test en utilisant les versions Beta de WooCommerce, afin de détecter d’éventuels problèmes à l’avance.

Est-il possible de créer des tables de base de données personnalisées dans un plugin WooCommerce ?

C’est possible, mais ce n’est généralement pas la solution de prédilection. WooCommerce et WordPress disposent de systèmes de stockage de métadonnées très performants.wp_postmeta, wp_usermeta, wp_commentmetaCela suffit pour la plupart des besoins d’extension. La création de tables personnalisées n’est envisagée que lorsque des données sont très structurées, que des requêtes complexes sont nécessaires et que la quantité de données est extrêmement élevée. Si une telle création s’avère indispensable, veuillez utiliser…dbDelta()Des fonctions sont mises en place pour garantir que la création et la mise à jour de la structure des tables se déroulent de manière sécurisée.