Développer un plugin WordPress : Tutoriel complet

31/12/2024

Développer un plugin WordPress est une compétence essentielle pour quiconque souhaite personnaliser son site ou créer de nouvelles fonctionnalités adaptées à des besoins spécifiques. Un plugin permet d’étendre les capacités de WordPress sans modifier le cœur du CMS, ce qui garantit une meilleure maintenabilité.

Dans ce tutoriel détaillé, je vous guiderai pas à pas pour créer un plugin simple et fonctionnel. Nous explorerons également les bonnes pratiques de développement pour garantir que votre code soit propre, sécurisé et performant. Enfin, vous pourrez télécharger gratuitement le plugin PG Encarts, que vous pourrez adapter à vos projets.

PG Encarts est une extension de ma création, conçue pour gérer et afficher des encarts de contenu réutilisables sur votre site WordPress. Contrairement aux blocs réutilisables de Gutenberg ou à la bibliothèque Divi par exemple, PG Encarts offre une gestion centralisée et indépendante des constructeurs de page.

Ses avantages principaux sont :

  • Indépendance : Les encarts sont accessibles et modifiables indépendamment des pages ou articles où ils sont utilisés.
  • Compatibilité universelle : PG Encarts fonctionne avec n’importe quel éditeur ou constructeur de page, comme Gutenberg, Divi, Elementor, etc.
  • Gestion simplifiée : Tous les encarts sont centralisés dans un seul menu, ce qui facilite leur recherche, modification et réutilisation.
  • Accessibilité pour les utilisateurs non techniques : Les encarts permettent à des personnes ayant une connaissance limitée de WordPress de facilement mettre à jour des zones de contenu sur leur site sans nécessiter de modifier directement les pages.
  • Flexibilité : Un encart peut contenir du texte, des images, des vidéos ou tout autre contenu supporté par WordPress et vos plugins actifs.

1. Rappel des bonnes pratiques pour développer un plugin WordPress

Bonnes pratiques du développement WordPress - PG Concept

Avant de plonger dans le développement du plugin, il est essentiel de rappeler les bonnes pratiques. Ces principes garantissent un code propre, sécurisé, maintenable et compatible avec d’autres éléments de l’écosystème WordPress.

A lire : Le développement WordPress avec PHP, HTML, CSS et JavaScript pour les débutants

1.1. Respectez les standards de codage WordPress

WordPress dispose de standards de codage officiels pour le PHP, le CSS, le JavaScript et le HTML. Ces standards visent à uniformiser la structure et la lisibilité du code dans tous les projets WordPress, qu’il s’agisse de thèmes ou de plugins.

  • Indentation : Utilisez des indentations cohérentes avec des tabulations.
  • Nommage des fonctions : Préférez des noms explicites et évitez les collisions avec d’autres plugins en utilisant des préfixes (par exemple, pg_encarts_).
  • Documentation : Commentez votre code pour que chaque fonction soit documentée avec ses paramètres et sa sortie attendue.

En suivant ces standards, vous facilitez la lecture et la collaboration sur votre code tout en garantissant une meilleure compatibilité avec les futures versions de WordPress.

1.2. Utilisez des namespaces ou des préfixes uniques

Pour éviter les conflits avec d’autres plugins ou le thème actif, encapsulez votre code dans des namespaces et/ou utilisez un préfixe unique.

  • Préfixes : Ajoutez un préfixe spécifique à chaque fonction, classe ou variable (exemple : pg_encarts_).
  • Namespaces : Encapsulez tout votre code dans un espace de nom spécifique :

Sans ces précautions, un plugin ou un thème ayant une fonction portant le même nom que l’une des vôtres pourrait provoquer des erreurs fatales, compromettant l’ensemble du site.

1.3. Sécurisez le plugin

La sécurité est primordiale dans un environnement où des utilisateurs interagissent avec votre plugin.

  • Validation et sanitization des entrées :
    Toute donnée reçue par un utilisateur (via un formulaire ou un paramètre d’URL) doit être validée et nettoyée.
    • Utilisez sanitize_text_field pour nettoyer des chaînes de texte.
    • Validez des données numériques avec intval ou floatval.
  • Escaping lors de l’affichage :
    Avant d’afficher une donnée utilisateur, appliquez les fonctions d’échappement appropriées :
    • esc_html pour le HTML.
    • esc_url pour les liens.
    • esc_attr pour les attributs HTML.
  • Protection CSRF et XSS :
    Ajoutez un nonce WordPress (number used once, ou jeton cryptographique temporaire) pour sécuriser les actions sensibles et empêcher des attaques via des formulaires non autorisés. PG Encarts n’est pas concerné car il repose uniquement sur des fonctionnalités natives de WordPress, déjà sécurisées. L’exemple suivant est donc donné à titre purement indicatif :

Ces mesures sont essentielles car une faille de sécurité dans votre plugin peut mettre en danger tout le site, voire les données personnelles des utilisateurs.

1.4. Organisez le code

Un plugin bien organisé est plus facile à maintenir, à déboguer et à faire évoluer. Voici une structure recommandée :

Conseils :

  • Segmentez vos fichiers PHP par fonctionnalité (ex. : CPT, shortcode, options…).
  • Placez les fichiers CSS et JavaScript dans un dossier dédié pour une gestion centralisée des ressources.
  • Évitez les fichiers de code PHP très longs : divisez-les en modules pour une meilleure lisibilité.

Une structure claire facilite le travail d’équipe, la correction de bugs et l’ajout de nouvelles fonctionnalités.

1.5. Exploitez les hooks et filtres WordPress

Les hooks et filtres WordPress permettent d’interagir avec WordPress sans toucher à son noyau. Cela garantit que votre plugin reste fonctionnel même après une mise à jour du CMS.

  • Hooks d’action (add_action) : Exécutez votre code à un moment spécifique dans le cycle de vie de WordPress.
    Exemple : add_action (‘init’, ‘pg_encarts_cpt_declarer_encart’);
  • Filtres (add_filter) : Modifiez ou personnalisez une donnée avant son affichage ou son traitement.
    Exemple : add_filter (‘manage_encart_posts_columns’, ‘pg_encarts_ajouter_colonne_shortcode’);

Les hooks et filtres permettent d’intégrer votre plugin de manière fluide dans WordPress, tout en minimisant les risques d’interférences avec d’autres extensions ou thèmes.

2. Prérequis au développement de PG Encarts

Prérequis PG Encarts - PG Concept

2.1. Logiciels nécessaires

Le développement de plugins WordPress ne demande que peu de prérequis :

  • Un éditeur de code : J’utilise pour ma part Notepad++ (gratuit), un éditeur simple mais amplement suffisant et offrant la coloration syntaxique pour une large variété de langages. Mais vous pouvez lui préférer des outils plus complets tels que Visual Studio Code (gratuit) ou PhpStorm (payant).
  • Un serveur local ou un site de développement / test avec WordPress installé : Vous pouvez utiliser des outils comme Local by Flywheel, WampServer ou XAMPP.
  • Un client FTP : Si vous optez pour des développements sur un environnement de test en ligne, cela vous permettra de transférer vos fichiers sur votre serveur. Pour ma part, j’utilise FileZilla (gratuit).
  • Un navigateur web : Il sera utilisé pour tester les résultats. Je vous recommande d’utiliser plusieurs navigateurs (Google Chrome, Microsoft Edge, Mozilla Firefox, etc.) pour vos tests, aussi bien sur ordinateur que sur mobile. Cela vous garantira une compatibilité maximale de votre extension.

2.2. Structure du plugin

Voici la structure du plugin PG Encarts :

Vous pouvez créer l’arborescence dès maintenant. Les fichiers .php peuvent rester vides pour le moment.

3. pg-encarts-plugin.php : Le point d’entrée du plugin

Point d'entrée PG Encarts - PG Concept

Le fichier principal contient les métadonnées du plugin et inclut les autres fichiers nécessaires.

3.1. Code

3.2. Explications

  • Méta-informations : Le bloc de commentaires en haut est essentiel pour que WordPress reconnaisse le plugin.
  • PG_ENCARTS_URL : Une constante stockant l’URL du dossier du plugin, calculée dynamiquement grâce à plugin_dir_url(__FILE__)). Elle sera utile un peu plus tard.
  • PG_ENCARTS_INCLUDES_DIR : Une constante stockant le chemin du sous-dossier “includes” de l’extension. Ce chemin est calculé dynamiquement à l’aide de plugin_dir_path(__FILE__).
  • Inclusion de fichiers : Les fichiers supplémentaires (CPT, shortcode, aide) nécessaires au fonctionnement de l’extension. require_once assure que les fichiers ne seront chargés qu’une seule fois même en cas de nouvelle demande d’inclusion.

4. pg-encarts-creation-cpt.php : Création d’un Custom Post Type (CPT) et d’une taxonomie

Custom Post Type PG Encarts - PG Concept

4.1. Code

Le plugin utilise un CPT pour gérer les encarts de manière indépendante des articles ou pages. Voici le fichier correspondant :

4.2. Explications

  • CPT “Encart” : Les encarts sont gérés séparément des articles/pages.
    Labels personnalisés : Ces labels facilitent l’administration.
    Arguments clés :
    • supports : Permet d’ajouter un titre et du contenu aux encarts.
    • menu_icon : Définit une icône dans le menu d’administration.
  • Taxonomie “Catégories encarts” : Permet de classer les encarts en catégories et sous-catégories.
    Arguments clés :
    • hierarchical : Active les catégories et sous-catégories.
    • show_admin_column : Ajoute une colonne “Catégories encarts” dans la liste des encarts.

Notez que j’ai pris le parti de ne pas utiliser de namespace. En revanche, le préfixe pg_encarts_ est suffisamment spécifique pour assurer l’unicité des noms de fonctions et donc éviter d’éventuels conflits avec d’autres extensions. Ce préfixe sera également utilisé pour les fonctions définies dans les autres fichiers PHP.

5. pg-encarts-shortcode.php : Ajouter un shortcode pour afficher un encart

Shortcode PG Encarts - PG Concept

Les encarts peuvent être affichés dans les articles ou pages à l’aide d’un shortcode.

5.1. Code

5.2. Explications

  • shortcode_atts : Fusionne les attributs par défaut avec ceux passés par l’utilisateur dans le shortcode. Cela garantit qu’un attribut comme slug est toujours défini, même si l’utilisateur l’oublie.
  • sanitize_text_field : Nettoie la valeur de l’attribut slug en supprimant tout code ou caractère non désiré, protégeant ainsi la requête contre des entrées malveillantes.
  • WP_Query : Crée une requête personnalisée pour récupérer un encart avec un type de post spécifique (encart) et le slug fourni.
  • ob_start et ob_get_clean : Capture la sortie générée (the_content() ou un message d’erreur) dans un tampon pour la retourner proprement comme contenu du shortcode.
  • have_posts et the_post : Parcourt les résultats de la requête pour afficher le contenu de l’encart si une correspondance est trouvée.
  • wp_reset_postdata : Réinitialise la requête globale de WordPress après l’exécution d’une requête personnalisée, pour éviter les conflits avec d’autres contenus sur la page.
  • pg_encarts_ajouter_colonne_shortcode et pg_encarts_afficher_contenu_colonne_shortcode : Permettent d’ajouter une colonne “Shortcode” dans la liste des encarts et de la remplir avec le shortcode à utiliser :

    Aucun contenu trouvé pour MON_SLUG.

    .

6. pg-encarts-aide.php : Ajouter une page d’aide dans l’administration

Page d'aide PG Encarts - PG Concept

Une page d’aide est intégrée au menu Encarts pour guider les utilisateurs.

6.1. Code

6.2. Explications

  • add_submenu_page : Ajoute un sous-menu sous le menu principal lié au CPT “Encarts” dans l’administration.
    • ‘edit.php?post_type=encart’ : Définit le menu parent auquel le sous-menu sera rattaché, ici le menu du CPT “Encarts”.
    • ‘Aide PG Encarts’ : Titre affiché en haut de la page d’aide.
    • ‘Aide’ : Texte du lien qui apparaît dans le sous-menu.
    • ‘manage_options’ : Capacité utilisateur requise pour accéder à ce sous-menu, ici réservée aux administrateurs.
    • ‘pg-encarts-aide’ : Identifiant unique (slug) pour ce sous-menu.
    • ‘pg_encarts_afficher_aide’ : Fonction appelée pour générer le contenu de la page d’aide.
  • add_action(‘admin_menu’, …) : Lie la fonction pg_encarts_ajouter_sous_menu_aide au hook admin_menu, pour que le sous-menu soit ajouté au moment où WordPress construit l’interface d’administration.
  • pg_encarts_afficher_aide : Cette fonction affiche le contenu de la page d’aide au format HTML. Puisque la fonction est en PHP, il est nécessaire d’utiliser la fonction echo pour générer le HTML.
  • PG_ENCARTS_URL : Il s’agit de l’URL du dossier du plugin, définie dans pg-encarts-plugin.php.

7. Déploiement du plugin

Déploiement d'un plugin WordPress - PG Concept

Nous en avons terminé avec le développement de l’extension PG Encarts. Reste maintenant à l’installer sur votre site WordPress de test et à vérifier que tout fonctionne comme prévu.

7.1. Création de l’archive .zip

Après avoir sauvegardé l’ensemble des fichiers du plugin et vous être assuré d’avoir une arborescence cohérente, vous pouvez créer un fichier .zip contenant le dossier principal (pg-encarts) et son contenu. Sous Windows, il vous suffit d’effectuer un clic droit sur le dossier, puis Compresser vers... > Fichier ZIP.

7.2. Installation et activation

Dans votre tableau de bord WordPress, ouvrez le menu Extensions > Ajouter une extension. Cliquez maintenant sur “Téléverser une extension” puis “Choisir un fichier” et sélectionner le fichier .zip créé à l’étape précédente.

Une fois l’extension installée, activez-la.

7.3. Tests

Si tout s’est bien passé, vous devriez voir dans la barre latérale de gauche un nouveau menu Encarts avec 4 sous-menus :

  • Tous les encarts
  • Ajouter un encart
  • Catégories encarts
  • Aide

Vérifiez que les différents menus sont accessibles et fonctionnels.

Créez un encart puis, dans une page ou un article de votre choix, intégrez cet encart grâce au shortcode (veillez à bien utiliser le slug de votre encart). Enregistrez votre page, puis visualisez-la. Le contenu de l’encart devrait apparaître à l’endroit voulu.

Conclusion

Grâce à ce tutoriel, vous avez appris à développer un plugin WordPress simple de A à Z en respectant les bonnes pratiques en la matière. Libre à vous désormais d’aller plus loin et de développer des extensions plus complexes ! Notamment, je n’ai pas abordé certains sujets tels que :

  • Le multilinguisme : Si vous souhaitez que votre extension soit utilisée par le plus grand nombre, il est essentiel de la proposer en plusieurs langues.
  • La création de pages d’options : De nombreux plugins sont paramétrables via des pages dédiées dans le tableau de bord WordPress.
  • La publication dans le repository officiel de WordPress : Cela rendra votre plugin et ses futures mises à jour disponibles sur wordpress.org.

Ces points feront l’objet de futurs articles. N’hésitez pas à vous inscrire à ma newsletter pour ne pas les manquer !

Si vous rencontrez des difficultés lors du développement ou si vous souhaitez simplement utiliser le plugin tel quel, je le mets à votre disposition : télécharger le plugin PG Encarts.

PG Encarts est totalement libre de droits. Toutefois, si vous décidez de l’utiliser ou de le modifier selon vos propres besoins, je vous serais reconnaissant de me le dire en commentaire. Je serais d’ailleurs ravi de lire vos avis et suggestions d’améliorations.

Si vous avez des besoins de développements spécifiques, n’hésitez pas à me contacter !

Infos article

Niveau

Expert

Tags

Réagissez à cet article : Développer un plugin WordPress : Tutoriel complet

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Poursuivez votre lecture !

Plugins SEO : Apports et limites - PG Concept
Jan 07 2025

Plugins SEO : Apports et limites dans une stratégie SEO globale

Les plugins SEO WordPress sont essentiels pour améliorer la visibilité d’un site, mais ils ne suffisent pas à eux seuls. Découvrez leurs apports, leurs limites et les outils complémentaires indispensables pour une stratégie SEO globale efficace.

Maintenir un site WordPress à jour - PG Concept
Sep 03 2024

Maintenir un site WordPress à jour

Apprenez comment maintenir votre site WordPress à jour en suivant des pratiques essentielles pour la sécurité, les performances, et la compatibilité. Sauvegardes, mises à jour manuelles, surveillance des erreurs, et mises à jour PHP sont au cœur de cet article.

Thème enfant WordPress - PG Concept
Juin 29 2024

Thème enfant WordPress : avantages et inconvénients

Découvrez comment un thème enfant WordPress sécurise vos personnalisations, simplifie les mises à jour et renforce la stabilité de votre site web. Mon guide complet explore les avantages, inconvénients et bonnes pratiques pour optimiser vos développements.

Sécuriser l'admin WordPress avec un fichier .htpasswd - PG Concept
Oct 15 2024

Protéger l’admin WordPress grâce à un fichier .htpasswd

Protégez votre site WordPress en sécurisant l’accès à l’admin avec la méthode .htpasswd. Cet article vous guidera étape par étape pour mettre en place une authentification supplémentaire avec login et mot de passe.

Développement WordPress débutants - PG Concept
Sep 17 2024

Le développement WordPress avec PHP, HTML, CSS et JavaScript pour les débutants

Découvrez les bases du développement WordPress avec PHP, HTML, CSS et JavaScript. Apprenez à personnaliser votre site, sécuriser votre code, optimiser les performances et utiliser les outils de débogage. Idéal pour les débutants souhaitant améliorer leur site WordPress !

Sécuriser votre site WordPress - PG Concept
Juin 27 2024

Comment sécuriser votre site WordPress efficacement ?

Découvrez comment sécuriser votre site WordPress avec des entêtes de sécurité et un pare-feu d’application Web (WAF). Protégez vos données contre les attaques efficacement.

Les extensions WordPress indispensables - PG Concept
Août 08 2024

Les extensions WordPress indispensables

Ma sélection d’extensions WordPress indispensables : sécurité, SEO, performances, RGPD… découvrez les plugins incontournables pour tout site WordPress !

Les nouveautés de WordPress 6.6 - PG Concept
Juil 16 2024

Sortie de WordPress 6.6 : les nouveautés importantes

WordPress 6.6 est arrivé avec des améliorations majeures : blocs dynamiques, patterns enrichis, rollback des plugins, performances optimisées, et sécurité renforcée. Explorez les nouvelles fonctionnalités pour transformer votre expérience de gestion de site avec cette version...
Espace client PG Concept
Avr 19 2023

Création d’un espace client avec WordPress

Un espace client est essentiel pour fluidifier vos échanges avec vos clients. Cet article détaille la création d’un espace client sous WordPress.

Optimiser une base de données WordPress - PG Concept
Déc 17 2024

Optimiser une base de données WordPress : Guide complet

Améliorez les performances de votre site WordPress grâce à un nettoyage et une optimisation efficaces de votre base de données. Ce guide complet couvre les méthodes manuelles, les plugins recommandés et des conseils pratiques pour maintenir un site rapide et performant.

Pin It on Pinterest