Puisqu’il s’agit de contenu d’adh\u00e9sion, cela ne me d\u00e9range pas qu’il soit un peu plus long que d’habitude, mais je ne veux pas non plus qu’il soit si long qu’il soit difficile \u00e0 suivre. Je pr\u00e9f\u00e8re que ce soit une courte lecture avec quelque chose de pratique que vous pouvez mettre en \u0153uvre apr\u00e8s avoir lu chaque message.<\/p>\n
Et l’une des choses qui aide grandement \u00e0 \u00e9crire un meilleur code WordPress est Composer.<\/p>\n
Meilleur code WordPress avec Composer<\/h2>\n
Si vous lisez ce blog depuis un certain temps, alors vous savez que je suis un fan de Composer (cependant, je suis loin d’\u00eatre la seule personne travaillant dans WordPress qui le soit).<\/p>\n
Et bien que j’aie \u00e9crit du mat\u00e9riel \u00e0 ce sujet, je n’ai pas \u00e9crit quelque chose dans le but sp\u00e9cifique de vous permettre d’\u00eatre op\u00e9rationnel d’ici la fin de la lecture d’un seul et court article.<\/p>\n
\u00c0 ce stade, nous allons devoir faire quelques compromis\u00a0: \u00e0 savoir, je fournirai un exemple de fichier de configuration ainsi qu’un moyen d’organiser le r\u00e9pertoire de votre plugin. Ensuite, dans le prochain article, j’expliquerai certaines des fonctionnalit\u00e9s de Composer.<\/p>\n
C’est quoi Compositeur ?<\/h3>\n
Tout d’abord, il est important de comprendre ce qu’est Composer. Et c’est facile de r\u00e9citer la d\u00e9finition telle qu’indiqu\u00e9e sur le site, n’est-ce pas? C’est un gestionnaire de d\u00e9pendances pour PHP.<\/p>\n
Mais d’abord, qu’est-ce qu’une d\u00e9pendance ?<\/h4>\n
Pour certains, cependant, cela soul\u00e8ve quelques questions :<\/p>\n
- \n
- Qu’est-ce qu’une d\u00e9pendance\u00a0?<\/li>\n
- Pourquoi dois-je les g\u00e9rer ?<\/li>\n<\/ul>\n
Et si vous creusez un peu plus, vous d\u00e9couvrirez peut-\u00eatre qu’il s’agit d’un gestionnaire de paquets, et cela soul\u00e8ve simplement les m\u00eames questions, sauf que vous remplacez simplement "d\u00e9pendance" par "paquet", et vous \u00eates de retour l\u00e0 o\u00f9 vous avez commenc\u00e9.<\/p>\n
Je vais donc faire ce que je peux pour que ce soit le plus clair possible :<\/p>\n
Une d\u00e9pendance, ou un package, un morceau de logiciel que votre code utilise. Il peut s’agir de quelque chose sur lequel il s’appuie pour la fonctionnalit\u00e9 pendant l’ex\u00e9cution, comme un moyen de faire des requ\u00eates HTTP<\/a>, ou il peut s’agir d’une biblioth\u00e8que pour convertir des tableaux en XML<\/a>.<\/p>\n
Composer facilite l’inclusion de ces packages particuliers dans votre biblioth\u00e8que en vous permettant de\u00a0:<\/p>\n
- \n
- t\u00e9l\u00e9charger et inclure le package dans votre plugin,<\/li>\n
- charger automatiquement votre plugin pendant l’ex\u00e9cution,<\/li>\n
- facilitez l’instanciation ou l’appel de votre plugin selon vos besoins.<\/li>\n<\/ul>\n
Cela signifie que nous n’avons pas \u00e0 encombrer les r\u00e9pertoires de notre base de code avec beaucoup de fichiers ajout\u00e9s manuellement et cela signifie que nous n’avons pas besoin d’ inclure<\/strong> ou d’exiger<\/strong> partout.<\/p>\n
Ceux-ci auront leur place, dont je parlerai dans le prochain post, mais ils n’auront pas besoin d’\u00eatre install\u00e9s automatiquement. Au lieu de cela, Composer les g\u00e9rera. Par cons\u00e9quent, le gestionnaire de d\u00e9pendances fait partie de son objectif.<\/p>\n
Maintenant que vous l’avez install\u00e9<\/a>, vous avez un peu de contexte.<\/p>\n
Utilisation du compositeur<\/h3>\n
\u00c9crire cette section particuli\u00e8re est quelque peu difficile car nous avons tous des besoins diff\u00e9rents, n’est-ce pas\u00a0? Mais \u00e0 tout le moins, nous pouvons tous profiter d’un chargeur automatique.<\/p>\n
C’est quelque chose que nous pouvons tous utiliser.<\/p>\n
Alors voici ce que je vais faire :<\/p>\n
- \n
- Je vais cr\u00e9er un r\u00e9pertoire de plugins de base,<\/li>\n
- Cr\u00e9er les fichiers n\u00e9cessaires au pilotage du plugin,<\/li>\n
- Mettre en place un simple fichier Composer,<\/li>\n
- L’ex\u00e9cuter<\/li>\n<\/ol>\n
Et puis je vous laisse voir les r\u00e9sultats. Nous pouvons entrer dans des biblioth\u00e8ques tierces ou d’autres fonctionnalit\u00e9s dans un futur article (ou une future s\u00e9rie, vraiment).<\/p>\n
Mais si rien d’autre, cela vous montrera comment utiliser Composer pour d\u00e9finir un chargeur automatique afin que vous puissiez vous concentrer sur l’\u00e9criture de code et non sur la question de savoir si des classes sont incluses.<\/p>\n
Le r\u00e9pertoire des plugins<\/h4>\n
Je structure g\u00e9n\u00e9ralement mes plugins comme ceci :<\/p>\n
- \n
- il y a un fichier bootstrap lu par WordPress,<\/li>\n
- il existe un\u00a0 r\u00e9pertoire src<\/strong> dans lequel tous les r\u00e9pertoires et fichiers PHP sont conserv\u00e9s,<\/li>\n
- il existe un\u00a0 r\u00e9pertoire de ressources<\/strong> de niveau sup\u00e9rieur dans lequel les images, les fichiers JavaScript et les fichiers Sass sont conserv\u00e9s,<\/li>\n
- et il y a un\u00a0 dossier fournisseur<\/strong> cr\u00e9\u00e9 par Composer pour h\u00e9berger les d\u00e9pendances et le chargeur automatique.<\/li>\n<\/ul>\n
Parfois, il peut y avoir un autre dossier \u00e9trange comme un dossier inc<\/strong> ou lib<\/strong>, mais c’est tr\u00e8s irr\u00e9gulier \u00e0 ce stade du type de travail que je fais. Et \u00e0 cause de cela, je ne vais pas m’en soucier pour ce post.<\/p>\n
Au lieu de cela, mon r\u00e9pertoire ressemble \u00e0 ceci.<\/p>\n
Le\u00a0 r\u00e9pertoire du fournisseur<\/strong> est manquant car je n’ai pas encore cr\u00e9\u00e9 de fichier Composer utilis\u00e9 pour l’ex\u00e9cution. Mais on verra \u00e7a avant la fin du post.<\/p>\n
Exemples de fichiers<\/h4>\n
Prenons un exemple de fichier configur\u00e9 dans le plugin. Et quand je dis sample, je veux dire aussi simple.<\/p>\n
Ce fichier va avoir un seul but: Imprimer un message sur le tableau de bord lorsque vous vous connectez \u00e0 WordPress.<\/p>\n
![\"Outils](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e186b99.png\")
<\/a><\/p>\nRappelez-vous, cependant, que le but n’est pas de montrer comment \u00e9crire un plugin bien architectur\u00e9. Au lieu de cela, il s’agit de montrer comment g\u00e9n\u00e9rer un autoloader pour que les fichiers du plugin soient g\u00e9n\u00e9r\u00e9s automatiquement.<\/p>\n
Le bootstrap du plugin ressemble donc \u00e0 ceci<\/a> :<\/p>\n
<?php\n\/**\n * The plugin bootstrap file\n *\n * This file is read by WordPress to generate the plugin information in the plugin\n * admin area. This file also includes all of the dependencies used by the plugin,\n * registers the activation and deactivation functions, and defines a function\n * that starts the plugin.\n *\n * @since 0.1.0\n * @package SamplePlugin\n *\n * @wordpress-plugin\n * Plugin Name: Sample Plugin\n * Description: A sample plugin used for a blog post.\n * Version: 0.1.0\n * Author: Tom McFarlin\n * Author URI: https:\/\/tommcfarlin.com\n * License: GPL-3.0+\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/\n\nnamespace SamplePlugin;\n\nuse SamplePluginMessenger;\n\n\/\/ This file called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Start the machine.\n(new Messenger())->start();\n<\/code><\/pre>\nEt le fichier sp\u00e9cifiquement charg\u00e9 d’afficher le message ressemble \u00e0 ceci<\/a> :<\/p>\n
<?php\n\nnamespace SamplePlugin;\n\nclass Messenger\n{\n \/**\n * Subscribers the `adminNotices` function to the admin_notices hook in WordPress.\n *\/\n public function start()\n {\n add_action('admin_notices', [$this, 'adminNotices']);\n }\n\n \/**\n * Displays the contents of the `message.html` file into the adminitrative notices\n * area on the dashboard whenever the plugin is active.\n *\/\n public function adminNotices()\n {\n if ('dashboard' !== get_current_screen()->id) {\n return;\n }\n\n include_once dirname(__FILE__). '\/Admin\/Views\/message.html';\n }\n}\n<\/code><\/pre>\nEt si vous \u00eates curieux \u00e0 propos du fichier HTML, c’est simple aussi<\/a> :<\/p>\n
<div class=\"notice notice-success is-dismissible\">\n <p>This is a message from the <strong>Sample Plugin<\/strong><\/p>\n<\/div>\n<\/code><\/pre>\nJe t’ai dit que c’etait simple.<\/p>\n
Le fichier de configuration du compositeur<\/h4>\n
Ce fichier particulier peut \u00eatre aussi simple ou aussi compliqu\u00e9 que n\u00e9cessaire. Pour cet article, nous gardons les choses simples. Le but, pour ce post, est simplement de lui donner un nom, une description, une licence, les auteurs, puis comment configurer l’autochargeur.<\/p>\n
Jetez un \u0153il ici<\/a>, puis je vous expliquerai ce que vous voyez juste en dessous\u00a0:<\/p>\n
{\n \"name\": \"tommcfarlin\/sample-plugin\",\n \"description\": \"A sample plugin used for a blog post.\",\n \"type\": \"wordpress-plugin\",\n \"license\": \"GPL-3.0-or-later\",\n \"authors\": [\n {\n \"name\": \"Tom McFarlin\",\n \"email\": \"tom@tommcfarlin.com\",\n \"homepage\": \"https:\/\/tommcfarlin.com\"\n }\n ],\n \"autoload\": {\n \"psr-4\": {\n \"SamplePlugin\": \"src\/\"\n }\n }\n }<\/code><\/pre>\nTout d’abord, le nom, la description, le type et la licence doivent \u00eatre assez faciles \u00e0 suivre. La zone auteur est \u00e9galement simple.<\/p>\n
Le chargement automatique est le domaine qui nous pr\u00e9occupe en ce moment. Cela devrait \u00eatre assez clair.<\/p>\n
En bref, nous avons une directive pour PSR4<\/strong> sur \u00a0laquelle vous pouvez en savoir plus et o\u00f9 se trouve un espace de noms. Ainsi, dans l’exemple ci-dessus, tout ce qui se trouve dans l’espace de noms SamplePlugin<\/strong> se trouve dans src.\u00a0<\/strong><\/p>\n
C’est ce qui indique au chargeur automatique o\u00f9 rechercher certains fichiers. Et dans notre cas, il va juste chercher la\u00a0 classe Messenger<\/strong>.<\/p>\n
Composer en cours d’ex\u00e9cution<\/h4>\n
Maintenant que nous avons couvert les bases du fichier de configuration de Composer, il est temps de l’ex\u00e9cuter. Rappelez-vous que votre r\u00e9pertoire de plugins devrait ressembler \u00e0 ceci\u00a0:<\/p>\n
![\"Outils](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e55e20b.png\")
<\/a><\/p>\nDans votre terminal, saisissez la commande suivante<\/a> :<\/p>\n
Et vous devriez voir quelque chose comme \u00e7a :<\/p>\n
![\"Outils](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160226-61e707e92efb9.png\")
<\/a><\/p>\nEn supposant que tout s’est bien pass\u00e9, vous devriez pouvoir vous connecter \u00e0 WordPress et activer le plugin.<\/p>\n
Tout voir ensemble<\/h4>\n
Une fois le plugin activ\u00e9, vous pouvez alors naviguer vers le tableau de bord de votre site. L\u00e0, vous devriez voir un avis de rejet qui ressemble exactement \u00e0 ce que nous avons vu au d\u00e9but du message\u00a0:<\/p>\n
<\/a><\/p>\nSi vous \u00eates arriv\u00e9 jusqu’ici, alors vous \u00eates pr\u00eat \u00e0 partir! Sinon, rev\u00e9rifiez votre syntaxe pour vous assurer que tout va bien. Si quelque chose ne va pas, il est probable que vous n’auriez pas pu aller aussi loin et en supposant que les constantes de d\u00e9bogage de base sont d\u00e9finies<\/a>, vous verrez probablement o\u00f9 se situe le probl\u00e8me.<\/p>\n
Ce n’est pas tout<\/h2>\n
Il y a beaucoup plus dans Composer, et je recommande fortement de lire la documentation correspondante. Je couvrirai une partie de cela lorsque je regarderai les outils que je pr\u00e9vois de couvrir plus tard dans cette s\u00e9rie mais, pour l’instant, je recommande de se familiariser avec certaines des conventions.<\/p>\n
Oh! Et je ne recommande pas de v\u00e9rifier le r\u00e9pertoire du fournisseur dans votre r\u00e9f\u00e9rentiel. Cela peut devenir un \u00e9norme r\u00e9pertoire plus tard, et cela peut saper tout l’objectif de Composer.<\/p>\n
Dans le prochain article, je vous expliquerai pourquoi. Certaines personnes le font, et ce n’est pas grave, et je l’ai d\u00e9j\u00e0 fait, mais il est important d’\u00eatre judicieux quant au moment o\u00f9 vous le faites.<\/p>\n
P\u00e9cher par exc\u00e8s de ne pas le faire. Et j’expliquerai pourquoi dans le prochain article.<\/p>\n
- il existe un\u00a0 r\u00e9pertoire de ressources<\/strong> de niveau sup\u00e9rieur dans lequel les images, les fichiers JavaScript et les fichiers Sass sont conserv\u00e9s,<\/li>\n