La création d’une extension peut vraiment sembler difficile pour un jeune développeur. Moi-même, quand j’ai commencé à développer sur l’écosystème de WordPress, c’était quelque chose de compliqué, mais avec un peu de pratique, on peut faire des merveilles. L’intérêt des extensions est de pouvoir apporter de nouvelles fonctionnalités en ajoutant des morceaux de codes, un peu comme ci, on jouait avec des « Legos ».
1- Création de l’extension
Pour commencer notre tutoriel, il nous faut développer notre plugin en local (sur votre ordinateur) personnellement, j’utilise local by Flywheel. Vous pouvez créer une nouvelle installation de Wp ou travailler sur un projet de votre site, présent sur votre machine en local.
On va s’aider du codex de WordPress qui explique plus ou moins bien comment réaliser un plugin.
Création manuelle du dossier
Pour résumer, pour créer un plugin, il va falloir créer un sous-dossier avec le nom de votre extension dans le dossier plugin de WordPress.
Notre extension et nom de dossier aura pour nom « my-plugin « .
2- Organiser les sous-dossiers et les fichiers dans le projet WordPress
En se basant sur les recommandations de WordPress, propose une organisation du dossier, nous allons faire différemment :
Pour optimiser le code, et le rendre plus lisible, j’aime bien organiser un projet comme ci-dessus, quand il s’agit d’un code simple. Bien sûr, on pourrait mettre le CSS, le JS et PHP dans le même fichier. Mais à coup sûr, ça deviendrait vite le bazar. Commençons à appliquer les bonnes pratiques pour coder.
3- Ajoutons un entête à notre extension
Toujours, dans notre dossier « my-plugin » et dans le fichier « my-plugin ». Nous allons mettre un entête. Le codex de WordPress nous indique qu’il est obligatoire, en effet, c’est avec cette forme de « commentaire » que WordPress, sait qu’il s’agit d’une extension et pas un simple fichier en PHP.
- Plugin Name: ici, vous mettez le nom de votre plugin, il doit être identique à votre nom du dossier sans les tirets « -« .
- Description : ici, vous pouvez mettre une description de ce que fait votre extension
- Version : il s’agit de la version de votre plugin. plus tard si vous y apporter des modifications cela servira pour les MAJ.
- Requires at least: il s’agit de la version minimale de WordPress
- Requires PHP : il s’agit de la version minimale compatible de PHP
- Author: Votre nom et votre prénom
- Author URI : Votre site web
- Licence : GPL V2 or later (WP exige cette licence pour être publié dans son répertoire de plugin)
- Licence URI : Le lien vers le texte de la licence
Bon avec tout ça on peut revenir dans la partie administrateur de WordPress. Si on a bien renseigné l’entête, à présent l’extension est détectée dans la partie extension.
4- Les hooks d’activation/désactivation
À présent que le plugin est détecté. Parlons des Hook d’activation et de désactivation, de manière simplifié cela permet d’effectuer des tâches (création de base de données ou de fichiers temporaire, définir des constantes…) et bien sûr le Hook de désactivation s’exécutera à la désactivation de l’extension. Bien que je ne les utiliserais pas pour ce tutoriel, je voulais en parler si vous développiez de façon plus professionnelle.
L’activation
Pour l’utiliser, il faudra utiliser la function register_activation_hook() :
register_activation_hook(__FILE__,'my_plugin_activation ');La désactivation
Pour l’utiliser, il faudra utiliser la function register_deactivation_hook() :
register_deactivation_hook(__FILE__,'my_plugin_desactivation ');
Alors comment l’intégrer dans notre code ?
Exemple de code pour activer les Hook d’activation et de désactivation
En gros la function « my_plugin_activation » sera exécuté lors de l’activation du plugin et vive versa pour la function « my_plugin_deactivation »
5- Ajout de fonctionnalités
Disons que j’aimerais afficher un message personnaliser retournant la date et l’heure avec une image en fond. Nativement, WordPress ne le permet pas. Sauf si l’option est disponible dans votre thème ou un plugin.
Déclaration de la feuille de style (css)
Avant de créer une function contenant le code HTML, nous allons créer notre fichier CSS. On la déclarera comme ceci mon plugin>assets>style. On lui donnera comme nom :
style-mon-plugin.css
Ensuite, il faudra dire au système de charger la feuille de style. Bien sûr, WordPress propose un Hook pour cela :
add_action('wp_enqueue_scripts','add_css_or_js');
Ce code permet de rajouter votre style ou script (JavaScript) personnalisé n’importe où depuis la partie visiteur de vote site.
Ensuite, nous créons notre function ‘add_css_or_js’ et la liée au add_action puis dire à Wp que je veux mettre ma feuille de style dans la boucle.
Le code ressemblerait à ceci :
Extrait du code pour ajouter du CSS
- wp_enqueue_style() : Grosso modo, il enregistre et mets le fichier en file d’attente
- plugin_url() : méthode qui donne le chemin du dossier dans un chemin URL du plugin.
Ajout du code HTML et CSS
Bon à présent, on rajoute le code HTML:
function add_view_get_date()
{
$get_date = date("d/m/Y");
$render_html = '<div class="my-plugin-container">';
$render_html .= '<div class="my-plugin-title">';
$render_html .= '<p> Nous sommes le ' . $get_date . '</p>';
$render_html .= '</div>';
$render_html .= '</div>';
return $render_html;
}
Dans cette function, j’ai récupéré la date d’aujourd’hui puis concaténé le code HTML dans une variable de type string et à la fin du script de retourner le code HTML contenu dans $render_html.
Déclaration du shortcode
Maintenant que la function est terminé, nous allons utiliser un shortcode.
On rajoutera le code après la function pour afficher le rendu HTML est ceci:add_shortcode('my-plugin-shortcode', 'add_view_get_date');
Pour expliquer, le premier argument sera notre shortcode que nous devrons mettre dans un module sous cette forme [my-plugin-shortcode], le second lui fait référence à notre function qui va retourner le code HTML.
7-Affichage sur la partie visitable de vote site
À présent, comment utiliser le shortcode ?
Et voilà, à travers une extension, vous pouvez ajouter de nouvelles fonctionnalités sans modifier le code source de WordPress. J’espère que ce tutoriel vous permettra d’évoluer au travers de vos différents projets dédié à Wp.
