L'environnement de développement WordPress ultime

Au cours des deux dernières années, j'ai écrit de nombreux tutoriels ici sur le blog WPMU DEV dans lequel je partage des informations sur les environnements de développement que j'utilise.

Alors aujourd'hui, j'ai pensé qu'il était temps que je partage un environnement complet, le genre que je créerais et utiliserais pour un développement à plus grande échelle.

Retroussez vos manches et préparez-vous à vous salir les mains ! Parce que vous trouverez ci-dessous une présentation complète du type d'environnement de développement que j'ai mis en place, et comment vous pouvez également le faire.

Remarque : Ce didacticiel n'est pas destiné aux débutants. Si vous débutez dans le développement WordPress, vous n'aurez pas besoin d'un environnement aussi élaboré car cela pourrait introduire une complexité inutile. Notez également que cet article est destiné spécifiquement à WordPress. Les idées et les objectifs pourraient être les mêmes pour les projets non-WordPress, mais l'approche et les outils utilisés varieraient.

Table des matières

1. 1. Ce qui fait un bon environnement de développement
   2. Environnements en évolution
   3. Serveurs locaux
   4. Outils de ligne de commande
   5. Scripts bash
   6. Plugins WordPress
   7. Outils divers

Qu'est-ce qui fait un bon environnement de développement ?

A mes yeux, un bon environnement de développement a les trois propriétés suivantes :

1. Très portable
2. Hautement configurable
3. Hautement automatisé

Portabilité

La portabilité est un facteur important car en plus de partager le thème/plugin que je développe, je souhaite également pouvoir partager l'environnement de développement.

Je veux que d'autres développeurs puissent consulter la source de GitHub et commencer tout de suite, y compris l'utilisation de n'importe quel outil comme Gulp ou Grunt. Cela facilite les projets et si vous soutenez une meilleure collaboration, vous avez plus de chances de réussir quelque chose.

La portabilité peut également vous aider si vous devez travailler sur un autre ordinateur ou si vous souhaitez montrer à vos collègues ce que vous avez fait. La possibilité de configurer les choses n'importe où en quelques minutes m'a aidé plus de fois que je ne peux compter.

Configurabilité

La possibilité de configurer votre environnement est primordiale. Côté serveur, WordPress est extrêmement indulgent, mais pouvoir affiner vos paramètres de construction, vos tâches Grunt et d'autres options est un énorme avantage.

Les options de configuration et la portabilité vous permettent de tester facilement votre travail dans différentes circonstances. Que diriez-vous de changer de version de PHP ou même de HHVM juste pour vous en assurer ? Peut-être pouvez-vous vérifier la compatibilité avec les anciennes versions de WordPress et les plugins populaires ? Ce sont des choses que vous devriez pouvoir tester.

Automatisation

L'automatisation est l'un des principaux moteurs de la création d'un environnement de développement pour le travail WordPress. Je ne veux pas me soucier de mes scripts, de mes feuilles de style, de la sauvegarde de mon travail, du déploiement, etc.

Les outils de ligne de commande constituent l'épine dorsale de ma suite d'automatisation, qui peut tout faire, de la configuration de WordPress avec une seule commande à l'emballage de mon produit.

Un travail en cours

Avant de plonger dans les détails, j'ai pensé que je partirais sur une tangente sur la façon dont les environnements de développement sont imaginés par ceux qui les utilisent.

Si vous êtes un nouveau venu dans le monde de la ligne de commande, des outils de construction, des systèmes de contrôle de version, etc., il peut sembler que je suis le professionnel qui sait tout et utilise les outils parfaits pour chaque tâche.

C'est assez loin de la vérité ! Je connais bien tout ce qui concerne WordPress, mais tout le reste n'est que quelques extras que j'ai ajoutés ou que j'avais besoin / voulais apprendre pour rendre ma vie plus rapide. J'en ai copié d'autres, j'ai trouvé des morceaux par moi-même et j'ai modifié les choses au besoin (parfois en échouant lamentablement !).

Mon environnement de développement (et bien d'autres) est un mélange des éléments suivants :

• Des connaissances personnelles bien rodées
• Bons conseils des autres
• Juste quelque chose au hasard que j'ai trouvé qui fonctionne
• Des étapes qui pourraient être faites beaucoup mieux mais je ne pouvais pas être dérangé pour le comprendre

En d'autres termes : ce n'est pas parfait mais ça fait le travail. Il y a beaucoup de place pour l'amélioration et des endroits pour utiliser d'autres outils, que vous préférerez peut-être. Si vous connaissez des outils ou des flux de travail plus utiles, n'hésitez pas à les utiliser et faites-le moi savoir dans les commentaires !

Un serveur local

WordPress fonctionne sur PHP, qui est un langage de codage côté serveur, nous avons donc besoin d'un serveur pour exécuter WordPress. Les options les plus populaires sont :

• Vagabond
• WAMP
• XAMPP
• MAMP

J'ai commencé avec XAMPP il y a des années et des années. Je suis ensuite passé à MAMP lorsque je suis devenu un utilisateur Mac, puis je suis finalement passé à Vagrant il y a environ deux ans. Le web et les outils utilisés évoluent comme toujours et maintenant j'ai aussi tendance à utiliser Vagrant et MAMP. Je vais vous expliquer pourquoi ci-dessous.

SAP

Le "AMP" dans MAMP, XAMPP et WAMP signifie Apache, MySQL et PHP. Ces outils installent tous des services et une interface graphique pour vous aider à gérer les processus utilisés par le serveur. Vous téléchargez et installez l'application, appuyez sur le bouton "on" et tout fonctionnera comme prévu.

Les avantages:
C'est rapide, c'est facile, c'est intuitif et cela fonctionnera sur tous les systèmes tout le temps. Il possède une excellente interface utilisateur, que vous pouvez utiliser pour modifier les paramètres PHP, passer à Nginx, configurer Memcached, Postfix, configurer des serveurs virtuels, etc.

Les inconvénients :
Bien qu'il y ait beaucoup de choses que vous pouvez modifier, le contrôle est limité. Vous ne pouvez pas modifier le système d'exploitation ou apporter d'autres modifications qu'un accès SSH complet vous permettrait de faire.

Tous les AMP perdent leur portabilité pour la même raison. Ils sont suffisamment populaires pour que n'importe qui puisse les installer, mais ils ne sont pas autonomes et minimaux comme les configurations Vagrant.

Vagabond

Vagrant est un peu différent. Au lieu d'un pré-emballage et d'un environnement pour vous, cela vous donne un contrôle total. Il est construit sur VirtualBox (ou d'autres applications VM) et vous permet de saisir une "boîte", qui est essentiellement un système d'exploitation. Vous pouvez ensuite utiliser des scripts pour les configurer vous-même.

Les avantages:
La configuration est autonome dans aussi peu que deux très petits fichiers. Si vous êtes habitué à la ligne de commande, la configuration d'un environnement peut être aussi simple que vagrant up - le système est extrêmement portable.

Vous pouvez le configurer à votre guise. N'importe quel système d'exploitation, n'importe quel logiciel, des différentes méthodes de mise en cache à la compilation de votre propre PHP. Vous pouvez répliquer exactement l'environnement de votre hôte actuel pour vous assurer que votre site fonctionnera exactement de la même manière sur votre machine locale.

Les inconvénients :
Si vous n'êtes pas au courant de l'utilisation de la ligne de commande, Vagrant peut avoir une courbe d'apprentissage abrupte. Lorsque tout se passe bien, tout ce que vous avez à faire est d'émettre une seule commande. Si quelque chose refuse de fonctionner, pour quelque raison que ce soit, vous vous retrouverez en eau profonde.

Des outils existent pour créer des hôtes virtuels et effectuer d'autres tâches courantes, l'interface utilisateur de MAMP est plus pratique, du moins pour moi. Si j'ai besoin d'un nouvel hôte virtuel rapide avec un WP à installer, je peux le faire avec MAMP + WP-CLI beaucoup plus rapidement qu'avec Vagrant + WP-CLI.

Lequel utiliser ?

Si vous travaillez exclusivement avec WordPress, un outil comme MAMP offre plus qu'assez de flexibilité et de puissance. Cela vous permet bien sûr de travailler avec des sites non-WordPress, donc si vous avez des petits boulots qui ne relèvent pas de la sphère WP, MAMP vous servira toujours bien.

Si vous travaillez avec de grandes équipes sur des projets non WP, je vous recommande de saisir Vagrant et de l'essayer. Il vous en apprendra beaucoup sur le fonctionnement interne des serveurs et vous permettra de partager exactement les environnements.

Ma préférence est d'utiliser les deux. Lorsque j'en ai besoin (ou que j'en ai le temps), je peux configurer mon environnement dans les moindres détails avec Vagrant. Lorsque j'ai besoin de quelque chose de simple ou pour un projet WordPress, MAMP est mon option préférée.

Rachel McCollin, un autre écrivain ici à WPMU DEV, a écrit un excellent guide sur la façon de configurer MAMP et j'ai contribué à un Guide de développement WordPress avec Vagrant, que vous pouvez utiliser pour configurer ces environnements.

Outils de ligne de commande

Je n'utilise pas un grand nombre d'outils CLI, mais ceux que j'utilise représentent une grande partie de mon flux de travail. Les plus importants sont WP-CLI, Gulp, ngrok et Ultrahook, entrons un peu dans les détails.

WP-CLI

WP-CLI est un outil de ligne de commande extrêmement puissant, qui vous permet d'automatiser tout ce qui concerne WordPress. J'ai déjà écrit un tutoriel sur le développement WordPress avancé avec WP-CLI, je vais donc vous montrer une partie de la magie qu'il peut faire.

Configuration de nouveaux sites

Vous pouvez télécharger, configurer et installer WordPress en quelques commandes simples comme wp core download et wp core config . La documentation est abondante et facile à suivre.

J'utilise WP-CLI avec des scripts bash pour créer de petits modèles pour la création de nouveaux sites. Vous pouvez utiliser des commandes pour supprimer les plugins et les thèmes par défaut et télécharger et activer les plugins que vous utilisez régulièrement.

Rechercher et remplacer

La recherche et le remplacement de bases de données sont parfois nécessaires, mais peuvent être pénibles. Passer à https, passer à un nouveau domaine, renommer des URL et autres peuvent tous entraîner des changements de masse.

Étant donné que la base de données contient un certain nombre de tableaux sérialisés, vous ne pouvez pas simplement effectuer une recherche et un remplacement SQL (sauf si l'ancienne et la nouvelle valeur ont la même longueur). wp search-replace oldval newvalue tout cela pour vous, désérialisant puis re-sérialisant vos tableaux.

Administration à distance

WP-CLI a SSH intégré pour vous aider à gérer les sites via SSH. Cela a le potentiel de vous permettre de gérer des centaines de sites avec une seule commande (c'est-à-dire : mettre à jour un thème ou un plugin sur plusieurs sites).

Tellement plus…

Il n'y a presque pas de fin à ce que vous pouvez faire avec WP-CLI. À partir d'environ 35 catégories de commandes intégrées, qui contiennent un tas de sous-commandes vers des packages tiers, vous pouvez facilement automatiser n'importe quelle tâche.

Gorgée

Gulp est mon cheval de bataille de l'automatisation. Je l'utilise pour gérer mes scripts, mes styles, mes images, même les tests mobiles et les mécanismes d'actualisation du navigateur. J'ai écrit un article détaillé sur l'utilisation de Gulp avec WordPress, jetez-y un œil pour obtenir des instructions détaillées.

Je préfère Gulp à l'autre choix populaire - Grunt - en raison des différences de syntaxe. Jetez un œil à mon article Grunt For WordPress Development et faites-vous votre propre opinion !

Gulp utilise les packages Node et Node pour ses fonctionnalités, ce qui le rend extrêmement portable et puissant, grâce aux extensions communautaires. Mon processus de travail avec Gulp implique généralement ce qui suit :

1. Trouver une extension qui correspond à mes besoins
2. Installer le package de nœud avec npm
3. Exiger le paquet dans le Gulpfile
4. Rédiger une courte tâche d'automatisation

La seule partie de cela qui nécessite une réflexion est le numéro quatre. Même dans ce cas, la plupart des extensions ont des exemples de copier-coller qui n'auront probablement besoin d'être modifiés que légèrement.

Voici les extensions que j'utilise le plus :

• gulp-sass pour compiler Sass en CSS
• gulp-clean-css pour minifier le CSS
• gulp-autoprefixer pour ajouter automatiquement des préfixes de fournisseur
• gulp-include pour concaténer les fichiers JS
• gulp-uglify pour minfier les fichiers JS
• gulp-imagemin pour optimiser les images
• Browsersync pour créer des serveurs de développement qui facilitent les tests mobiles
• gulp-sourcemaps pour créer des cartes source pour les fichiers minifiés

ngrok

ngrok est un petit outil de service et de ligne de commande que j'utilise pour partager mon travail local sur Internet. ngrok crée des tunnels sécurisés vers un environnement local, exposant votre application sur une URL spéciale comme http://7bbc49aa.ngrok.io .

Ultracrochet

Ultrahook est un peu l'inverse de ngrok. Là où ngrok achemine votre hôte local vers le Web, ultrahook achemine le Web vers votre hôte local. Ceci est extrêmement utile pour tester des API tierces comme Stripe par exemple.

Vous pouvez configurer Stripe pour envoyer des webhooks de test http://stripe.danielpataki.ultrahook.com qui seront transmis en toute sécurité à votre serveur local.

Plugins WordPress

Pour la plupart d'entre nous, le développement WordPress est synonyme de développement de plugins et de thèmes. Le référentiel regorge de plugins qui aident les développeurs à créer un meilleur travail plus rapidement. En voici quelques-uns que j'utilise ou que j'utilise régulièrement.

Vérification du thème

Un plugin indispensable pour les créateurs de thèmes. Theme Check analysera votre thème et crachera les raisons pour lesquelles il ne répond pas aux normes WordPress. Il examine le code obsolète, les fichiers superflus, les mauvaises pratiques, les erreurs courantes et des tonnes d'autres problèmes potentiels.

Champs personnalisés avancés

Advanced Custom Fields ou ACF est mon plugin préféré de tous les temps. Il permet aux développeurs de créer de magnifiques champs personnalisés pour leurs thèmes et plugins dans une interface utilisateur intuitive et rapide. Une fois que vous avez terminé, vous pouvez masquer complètement ACF et coller le code PHP généré dans votre travail pour conserver les champs intacts. Un plugin bien exécuté et extrêmement utile!

Moniteur de requête

Le moniteur de requête vous permet de voir exactement ce qui se passe dans votre environnement WordPress du point de vue de l'accès à la base de données. Vous pouvez intercepter des requêtes potentiellement lentes ou redondantes avant qu'elles ne soient envoyées dans un produit en direct et optimiser celles qui existent déjà pour rendre votre code beaucoup plus rapide.

Scripts bash

Les scripts bash contiennent un ensemble de commandes qui sont exécutées les unes après les autres et peuvent être utilisées pour automatiser davantage les tâches. Par exemple, il est déjà facile d'installer WordPress avec WP-CLI. Tout ce qu'il faut, c'est ce qui suit :

Ces commandes doivent être émises les unes après les autres, ce qui prend un peu de temps. En plaçant ceci dans un fichier, appelons-le install.sh , vous pouvez créer un modèle pour créer une installation WP.

Placez le fichier dans le dossier dans lequel vous souhaitez créer l'installation et tapez bash install.sh . Toutes les commandes seront émises et en quelques secondes, vous aurez un site opérationnel.

En ajoutant des paramètres, vous pouvez le rendre encore plus utile. Si vous émettez la commande comme celle-ci : bash install.sh newsite , vous pouvez utiliser le paramètre pour remplir le nom de la base de données, l'URL et le titre du site.

Les fichiers Bash peuvent également être utiles pour créer des versions finales (suppression de dossiers et de fichiers superflus, déplacement de répertoires, etc.) et d'autres tâches similaires. Ils peuvent même être exécutés à partir de tâches Gulp, ce qui vous donne une grande flexibilité dans votre flux de travail.

Outils divers

Les extensions de navigateur sont d'une grande aide lors du test d'un site. En voici quelques-uns que j'utilise dans mon flux de travail.

Facteur

Postman est une extension chrome pour créer, tester et documenter des API. Je trouve que chaque fois que j'ai besoin de lancer une requête rapide pour voir comment fonctionne une API, Postman est beaucoup plus rapide que tout autre outil.

La possibilité d'enregistrer et de gérer les demandes est particulièrement utile. Les tests d'API sont quelque chose que je fais moins fréquemment, mais quand j'y arrive, cela prend la majeure partie de ma journée, utiliser quelque chose comme Postman me rend la vie tellement plus facile.

ModifierCeCookie

EditThisCookie est un autre exemple d'extension Chrome que je n'utilise pas beaucoup, mais quand je le fais, cela me fait gagner des heures et des heures. Il vous permet de voir/effacer/modifier les cookies d'un seul site. C'est tout, mais oh mon dieu, comme ça peut être pratique !

Temps de chargement des pages

Page Load Time fait ce que vous pensez, il analyse le chargement de la page. Il peut entrer dans des détails importants comme DNS/Request et les temps de réponse, mais ce que j'aime, c'est qu'il affiche le temps de chargement global directement dans la barre d'outils. Super pratique pour des comparaisons rapides.

Formateur JSON

Ma dernière entrée d'extension de navigateur dans la catégorie des outils divers est JSON Formatter, qui détecte quand une réponse est simplement une chaîne JSON et la formate correctement au lieu de simplement supprimer un bloc de texte.

François

Celui-ci n'a en fait rien à voir avec le développement! Franz est un outil qui peut regrouper un certain nombre de services Web sous un même toit. Les applications My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar et Todoist s'exécutent toutes dans une seule fenêtre au lieu de leurs applications natives.

Tout semble exactement comme si je les ai exécutés dans leurs environnements habituels, mais je n'ai pas besoin d'avoir toutes ces icônes et je peux basculer entre elles plus facilement. Je mentionne Franz parce que cela m'a aidé à me concentrer davantage tout en communiquant mieux.

VVV

Varying Vagrant Vagrants ou VVV en abrégé est une configuration Vagrant open-source pour le développement pour WordPress et WordPress lui-même. Il contient tous les outils dont vous aurez besoin pour démarrer, y compris les versions de développement de WordPress.

Tellement plus!

Il y a tellement d'outils que je n'ai pas mentionnés, principalement parce que je ne les utilise tout simplement pas. Ce sont d'excellents outils, mais je ne les ai tout simplement pas utilisés, je n'en ai pas besoin ou ils ne correspondent pas à mon flux de travail. Voici une courte liste de certaines grandeurs que vous devriez jeter un œil :

• Soulignements pour un excellent passe-partout de thème réalisé par le département de thème WordPress
• Racines pour toute une pile WordPress comprenant le serveur, la gestion des applications et le thème de démarrage. Je trouve cela trop élaboré à mon goût, mais cela peut vous convenir.
• WordPress Plugin Boilerplate pour le développement de plugins orientés objet standardisés.

Personnalisez votre environnement de développement

En conclusion, ce sont les outils que j'utilise - ils ne vous conviennent peut-être pas nécessairement, ni ne conviennent à toutes les situations. Cette configuration est suffisamment flexible pour mes besoins, alors prenez le temps de rechercher des options et de créer un flux de travail qui vous convient.

Bonne chance!

• développement