Share
Japh, dans son article précédent, a expliqué la raison - et a fini par nous convaincre - de définir notre environnement de développement comme étant proche du serveur Web distant utilisant Vagrant. L'article a plus de deux ans, mais l'idée est toujours d'actualité. Encore plus, Vagrant a récemment gagné du terrain dans la communauté WordPress avec une configuration spéciale Vagrant appelée VVV, abréviation de Varying Vagrant Vagrants..
VVV est un préréglage de la configuration Vagrant destiné aux projets centrés sur WordPress, tels que le développement d'un thème, un plugin ou la contribution à WordPress Core. VVV contient également une poignée d'outils tels que WP-CLI, PHP Code Sniffer et Composer, qui surchargent nos flux de travail de développement..
Néanmoins, utiliser une application telle que MAMP, WAMP ou XAMPP offre un niveau de commodité suffisant pour de nombreux développeurs. ces outils les ont si bien servis que la migration vers VVV ne semble pas nécessaire.
Pour cette raison particulière, ce tutoriel s'adresse à ceux d'entre vous qui utilisent depuis longtemps ces applications de pile traditionnelles pour développer WordPress et qui ont maintenant le sentiment que l'application ne gère plus vos projets plus vastes et complexes..
Peut-être avez-vous lu quelque part que Vagrant était considéré comme une excellente alternative, mais vous ne savez pas par où commencer et si Vagrant est le bon outil pour vous. Donc, avant de plonger plus avant, nous allons décrire notre scénario de développement de projet dans lequel l’utilisation de VVV sera appropriée..
Commençons.
Tout d'abord, une équipe de développeurs nous aide dans ce projet. Notre équipe est répartie dans le monde entier et chacun a ses préférences. Certains utilisent Windows, d'autres OS X. Nous adoptons Vagrant et VVV afin que tout le monde ait le même environnement et rend le résultat du test plus pertinent..
Notre projet est de créer un thème et un plugin que nous soumettrons à leur référentiel WordPress.org respectif..
Le thème devrait être compatible avec quelques plugins populaires tels que Jetpack, WooCommerce, EDD et BBPress. Nous allons également tester le plugin avec un certain nombre d'autres plugins, en veillant à ce qu'aucun conflit ou bogue ne survienne lorsqu'ils sont actifs ensemble..
En outre, le thème et le plug-in devraient également être compatibles avec les dernières versions de WordPress, ainsi que pour les deux précédentes, et devraient être prêts pour les futures versions de WordPress en les testant via la version bêta..
Le tableau suivant montre où notre thème et notre plugin devraient être compatibles avec les versions de WordPress ainsi qu’avec un certain nombre de plugins..
| Compatibilité: | Acme-StoreFront (thème) | Acme-LocalCurrency (plugin) |
|---|---|---|
| WordPress 4.2 | √ | - |
| WordPress 4.3 | √ | - |
| WordPress Dernières | √ | √ |
| WordPress Beta | √ | √ |
| Jetpack | √ | - |
| BBPress | √ | - |
| Téléchargements numériques faciles (EDD) | √ | √ |
| WooCommerce | √ | √ |
De plus, nous pouvons avoir un site web local à jetpack.wordpress.dev qui hébergera les thèmes (ou plugins) dépendant d'un ou de plusieurs modules Jetpack tels que Infinite Scroll and Sharing.
Pour éviter les interférences d’autres plugins, les plugins actifs au sein de jetpack.wordpress.dev ne sont que Jetpack, à quelques exceptions près pour quelques plugins prenant en charge le développement, tels que Moniteur de requêtes, Scanner VIP et Barre de débogage.
Finalement, nous pouvons aussi créer woo.wordpress.dev, bbp.wordpress.dev, et ainsi de suite pour construire et tester nos projets autour des fonctionnalités de ces plugins.
Maintenant que nous avons une idée approximative de ce que nous allons faire et que ces outils sont installés, nous allons maintenant procéder à la configuration de VVV. Commençons!
Tout d’abord, nous avons besoin d’une machine virtuelle (VM) pour héberger nos environnements de développement créés avec Vagrant. Dans ce tutoriel, nous optons pour VirtualBox; il est gratuit et fonctionne sur plusieurs plateformes. Un programme d'installation est disponible pour chaque plate-forme (Windows, OSX et deux distributions Linux) sur la page de téléchargement..
Lancez le programme d'installation et suivez les étapes jusqu'à la fin du processus. Les utilisateurs de Mac OS X peuvent également installer VirtualBox via Homebrew Cask, ce qui vous permet d'installer VirtualBox plus facilement avec une seule ligne de commande, comme suit:.
brassage de cask installer virtualbox
Une fois que VirtualBox est installé, ce qui peut prendre un certain temps, nous procédons à l’installation de Vagrant.
De même, un programme d'installation Vagrant est disponible pour OS X, Windows et Linux. Téléchargez-en un pour votre plate-forme et suivez les étapes. Les utilisateurs d’OS X peuvent l’installer via Homebrew Cask à l’aide de la ligne de commande suivante.
tonneau de bière installer vagabond
Une fois installé, vous devriez avoir accès à la vagabond CLI.
Récupérer la version installée de Vagrant dans un terminal OSXL'installation des plugins vagrant suivants est facultative, mais il est généralement judicieux de les installer afin de simplifier le processus de mise en service de l'environnement de développement VVV, y compris des sites Web locaux..
Mise à jour des hôtes vagabonds: ce plugin permettra à Vagrant de mettre à jour le les hôtes fichier pour enregistrer le nom de domaine pour les sites Web locaux. Sinon, nous devrons l'ajouter nous-mêmes, ce qui semble un peu gênant.
Exécutez la commande suivante pour installer le plugin:
vagrant plugin installe vagrant-hostsupdater
Déclencheurs vagabonds: ce plugin permettra à VVV d’automatiser un certain nombre de processus tels que la sauvegarde de bases de données. Pour l'installer, lancez:
vagrant plugin installe vagrant-triggers
Les prérequis - VirtualBox et Vagrant ainsi que les plugins - sont définis. Pour que nous puissions commencer à installer VVV.
Tout d’abord, clonez VVV à partir du référentiel GitHub dans un répertoire local.
git clone git: //github.com/Vary-Vagrant-Vagrants/VVV.git
Une fois que le clone est en place, accédez au répertoire où il réside. Puis lancez-le et lancez-le avec la ligne de commande suivante:
cd vvv; vagabond
VVV téléchargera et installera Ubuntu en tant que système d’exploitation virtuel hébergeant nos sites Web locaux. À un moment donné, vous devrez peut-être aussi entrer votre mot de passe pour permettre à Vagrant d’écrire votre fichier hosts..
VVV initialisé pour la première foisSachez que c’est la première fois que nous installons le VVV. Le processus prendra beaucoup de temps; cela peut prendre entre 30 minutes et une heure environ. Promenez-vous, prenez un café ou reposez-vous pendant que le processus est en cours.
Lorsque VVV est opérationnel, il nous fournit quelques installations par défaut de WordPress, comme suit:
Accentsconagua
Vous utilisez une version de développement (4.5-RC1-37169) dans le pied de page.Connectez-vous à ces sites avec admin comme nom d'utilisateur et mot de passe comme mot de passe.
Maintenant que le VVV est opérationnel, nous pouvons lancer nos nouveaux projets. Nous allons créer un exemple de thème et de plug-in. Et ma préférence a toujours été de commencer un thème avec Underscores et d’utiliser WPPB pour un plugin..
Nous ajoutons ces passe-partout dans leur répertoire respectif au sein de la / wp-content / répertoire de local.wordpress.dev, situé à répertoire-vvv / www / wordpress-default / wp-content /.
Continuez avec le développement du thème et du plugin; ajoutez des fonctionnalités, ajoutez une page de paramètres pour le thème, ajoutez une intégration plus profonde au Customizer pour le thème et enfin préparez-les pour les prochaines versions de WordPress.
Envato Tuts + a publié de nombreuses ressources pouvant être utiles au cours du développement. Voici quelques-uns de mes favoris:
Comme nous l'avons mentionné précédemment, nous allons créer quelques sites Web locaux supplémentaires sur lesquels nous développerons notre thème et notre plug-in pour l'intégration à plusieurs plug-ins tels que Jetpack, WooCommerce, EDD et BBPress. Nous allons également configurer quelques sites Web pour tester nos projets par rapport aux versions précédentes de WordPress, dans ce cas, les versions 4.3 et 4.2. À ce stade, nous avons seulement eu local.wordpress-trunk.dev up, qui héberge la version WordPress Nightly, beta ou Release Candidate (RC).
La création et la configuration d’un site Web local s’effectue généralement en plusieurs étapes. Tout d’abord, nous devrons télécharger la copie WordPress, l’extraire et la placer à la racine de notre localhost, créer une base de données, exécuter l’installation de WordPress et modifier le fichier hosts pour enregistrer le nom de domaine. Si nous prenons le processus pour créer, par exemple, trois sites Web locaux ou plus, nous trouverons bientôt le processus inefficace, qui prend du temps..
Avec VVV et son extension nommée VV, raccourci pour VVV variable, nous pourrons être plus productifs avec moins d'effort. Voyons comment déployer VV.
Étant donné que le processus d'installation de VV sous OS X et Windows varie, cette section est divisée en deux. Vous pouvez passer immédiatement à la section de la plate-forme que vous utilisez actuellement.
Le moyen le plus simple d'installer VV sous OSX consiste à utiliser Homebrew. Tapez simplement la commande suivante.
brasser installer bradp / vv / vv
Sous Windows, vous devez d’abord cloner le référentiel VV, quelque part dans le répertoire de votre ordinateur..
git clone https://github.com/bradp/vv.git vv
Ensuite, nous avons besoin de Windows pour reconnaître le vv commander.
Pour ce faire, cliquez avec le bouton droit sur Poste de travail ou sur Ce PC, puis sélectionnez Propriétés… . Ensuite aller à Paramètres système avancés> Variables d'environnement. Sélectionnez "Chemin" dans la liste de variables système et cliquez sur Modifier… .
Ajouter le vv chemin de répertoire que vous avez déjà cloné. Par exemple:C: \ Utilisateurs \ thoriq \ Sites \ vv.
Une fois installé, nous devrions avoir accès à la vv commande globalement. La commande nous permettra de configurer de nouvelles installations WordPress, fonctionnant entre autres choses, dont vous pouvez trouver les détails via le vv --help commander.
Sous OS X: liste de commandes VV CLISous Windows, la CLI est accessible via l’invite de commande (cmd.exe) et Bash Git..
VV a simplifié l'installation d'un nouveau site WordPress en tapant la commande suivante:
vv créer
Une fois exécuté, il vous posera quelques questions pour configurer le nouveau site Web, à savoir:
Pour les utilisateurs de MAMP, cela revient à créer un nouveau dossier dans la racine du document MAMP à / MAMP / htdocs /. Ceci est le dossier où résident tous les actifs du site. À cette étape, entrez le nom du répertoire sans espaces, de préférence en minuscule, par exemple:
Définissez le domaine de notre nouveau site Web. Un domaine pour un site Web local se termine généralement par .dev ou .local. Dans ce cas, je nommerai le nôtre 42.wordpress.dev. C'est un sous-domaine avec le numéro 42, qui fait référence à la version WordPress, 4.2.x, que nous allons installer.
Ici, nous allons installer WordPress 4.2.8, qui est la dernière itération de la branche 4.2. La liste complète des versions de WordPress est disponible sur la page Archive des versions..
Il nous demande si nous voulons activer le mode multisite de WordPress. Nous sélectionnons N.
Pour le moment, soutenir WordPress Multisite pour nos thèmes et plugins n’est pas la priorité absolue. Si nous devons un jour créer et tester des projets dans un environnement multisite, nous pourrons créer ultérieurement un autre site dans un nouveau domaine, par exemple.. mu.wordpress.dev.
Le WordPress wp-content directory héberge généralement un certain nombre de sous-répertoires, tels que les répertoires themes, plugins et uploads. Parfois, je peux aussi créer quelques dossiers supplémentaires pour stocker des fichiers arbitraires. Si vous avez un contenu prédéfini hébergé sur un référentiel Git, vous pouvez entrer l’URL et laisser VV le cloner..
Pour l'instant, on le laisse vide.
Nous n'avons pas de base de données SQL à importer, nous allons donc laisser cette invite vide. Mais, si vous en avez un, spécifiez le chemin du répertoire dans lequel réside le fichier SQL, par exemple: /Sites/db/wp.sql.
WordPress est livré avec les thèmes par défaut (par exemple, TwentyFifteen, TwentySixteen, etc.) et des plugins (Akismet et Hello Dolly) que, souvent, nous n'utilisons pas. Dans cette étape, nous pouvons passer y à l'invite de dire à VV de les supprimer complètement.
Nous pouvons dire à VV d'installer un exemple de contenu à partir de WPTest. Il s'agit d'un ensemble complet de contenu comprenant des publications, des pages et des commentaires. Ce contenu vous sera utile pour trouver tout désalignement, problème de compatibilité ou bogue dans nos thèmes et plugins. D'où le type y.
Nous allons certainement permettre à WP_DEBUG de laisser WordPress imprimer toutes les erreurs PHP au cours du développement. D'où le type y à l'invite.
Enfin, vérifiez que toutes les configurations définies sont correctes avant que VV ne poursuive l’installation. Si tout va bien, tapez y procéder. Sinon, tapez n pour annuler l'opération et vous pouvez répéter la vv créer dès le début.
Une fois cela fait, VV affichera le site ainsi que le nom d'utilisateur et le mot de passe pour se connecter, comme suit:.
Répétez ces étapes pour installer les autres sites susmentionnés dans la section "Project Briefing" de ce didacticiel..
Nous avons maintenant plusieurs sites avec des environnements variés pour tester nos projets-thèmes ou plugins. Le nombre de nos sites augmentera avec le temps, jusqu'au point où copier des répertoires de projets dans ces environnements de test serait une entreprise peu pratique..
Pour cette raison, nous aurions besoin d’un seul dossier dans lequel nous pourrions transférer notre projet sur ces sites Web en même temps, ce qui rendrait notre flux de travail plus organisé..
Vagrant nous permet de synchroniser des annuaires avec la machine virtuelle. En fait, Vagrant déploie sa propre fonctionnalité sous le capot. Si on regarde dans le Vagrantfile dans la section "Drive Mapping", nous trouverons qu’il synchronise un certain nombre de répertoires, y compris le www / où toutes les installations de nos sites sont hébergées.
Pour commencer, nous devons d’abord créer deux répertoires, respectivement pour héberger nos plugins et nos thèmes. Vous pouvez placer ces répertoires n’importe où sur votre ordinateur. Dans mon cas, j'ai un répertoire nommé dev qui contient tous mes projets, comme suit.
. └── dev bibliothèque ├── plugins └── thèmes
Ensuite, nous enregistrerons la carte de ces répertoires. Nous avons trois sites WordPress installés à local.wordpress.dev et local.wordpress-trunk.dev. Ainsi, ces répertoires seront mappés, pointant et synchronisant avec chacun des / plugins / et le / thèmes / répertoire de ces sites dans la machine virtuelle.
Cependant, la modification du fichier système par défaut doit toujours être évitée. Par conséquent, au lieu de modifier le Vagrantfile, nous allons ajouter la configuration de mappage dans un fichier nommé Fichier personnalisé-regardant dans le Vagrantfile, à peu près à la ligne 241, nous allons le trouver chargé pour appliquer une personnalisation ou remplacer les configurations par défaut.
Créer le Fichier personnalisé déposer au même endroit que Vagrantfile.
. Vvv └── Vagrantfile ├── Customfile
Ajoutez les lignes de code suivantes, qui, j'en suis sûr, sont assez explicites, dans le fichier.
## Plugins config.vm.synced_folder "/ Utilisateurs / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-default / wp-content / plugins",: propriétaire => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Utilisateurs / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-develop / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Utilisateurs / thoriq / Sites / dev / plugins / "," / srv / www / wordpress-42 / htdocs / wp-content / plugins ",: propriétaire =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] ## Thèmes config.vm .synced_folder "/ Users / thoriq / Sites / dev / themes /", "/ srv / www / wordpress-default / wp-content / themes",: propriétaire => "www-data",: mount_options => ["dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Utilisateurs / thoriq / Sites / dev / themes / "," / srv / www / wordpress-trunk / wp-content / themes ",: propriétaire => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Users / thoriq / Sites / dev / themes /", "/ srv / www / wordpress- 42 / htdocs / wp-con tente / themes ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "]
Rechargez Vagrant en lançant rechargement vagabond, autre vagabond s'il n'est pas en cours d'exécution. Nos plugins et thèmes en / dev / plugins / et / dev / themes / devrait maintenant être répertorié dans tous les sites.
À ce stade, nous avons activé Vagrant et VVV. Nous sommes maintenant en mesure de créer un nouveau site Web local en quelques minutes sans jongler avec le fouillis du téléchargement du WordPress .Zip *: français package, extraire le package et éditer le les hôtes entrées de fichier.
La plupart de nos opérations jusqu’à présent ont été effectuées via l’interface de ligne de commande. Cela peut naturellement être un peu intimidant pour les débutants, en particulier pour ceux qui viennent d'applications à interface graphique telles que MAMP ou WAMP. Il faut du temps pour s'y habituer.
Cependant, certaines opérations dans Vagrant peuvent être remplacées par un équivalent graphique. Certaines extensions disponibles ajoutent de belles couches d'interface graphique à Vagrant et VVV, rendant certaines choses aussi simples qu'un clic. Certains d'entre eux comprennent:
Le tableau de bord vagabond à vvv.dev est peut-être un équivalent du MAMP localhost / MAMP / page, sauf qu'elle apparaît en blanc uni.
Heureusement, nous pouvons l’animer avec une extension. Il y a quelques choix, et je vais opter pour VVV Dashboard by de haut en bas. Pour déployer l'extension, naviguez jusqu'à la / www / default / répertoire et extrayez le référentiel d’extensions:
Tableau de bord git clone https://github.com/topdown/VVV-Dashboard.git
Puis copier /dashboard/dashboard-custom.php dans / defaults /, comme suit.
. ── dashboard ├── dashboard-custom.php (le tableau de bord personnalisé) ├── database-admin index.php ├── memcached-admin opcache-status ├── phpinfo webgrind
Pas besoin de recharger Vagrant. Actualisez simplement le tableau de bord VVV à l'adresse vvv.dev. Vous devriez maintenant trouver beaucoup d'autres détails de notre configuration Vagrant sur le tableau de bord, en plus de simplement lister les sites installés..
Tableau de bord VVV personnalisé. Un autre utilitaire que vous pouvez installer est le gestionnaire Vagrant..
Vagrant Manager s'apparente à MAMP et WAMP où, dans ce cas, il nous permet d’exécuter, d’arrêter et de recharger Vagrant en quelques clics. Vagrant Manager est disponible sous OS X via Homebrew Cask et le .Dmg, et dans Windows à travers le .EXE package d'installation. Par conséquent, l'installation de l'application devrait être une évidence.
Une fois que Vagrant Manager est installé et opérationnel, vous pouvez trouver une liste de vos configurations Vagrant et des configurations actuellement actives..
Vagrant vient également avec phpMyAdmin intégré, accessible à vvv.dev/database-admin/. Cependant, je ne suis pas un fan de phpMyAdmin. Mis à part l'interface unlovely, il est lent de traiter une requête dans une énorme base de données. Ce sont les raisons mêmes pour lesquelles je préfère utiliser une application native telle que Sequel Pro ou SQL Workbench pour Windows. Cependant, nous devons d’abord connecter l’application à MySQL.
Ici, j'utilise Sequel Pro pour OS X. Cependant, les informations d'identification requises pour vous connecter à MySQL sont applicables quelles que soient les applications que vous utilisez. Ce sont les mêmes.
127.0.0.1 racine racine local.wordpress.dev (également applicable avec tout domaine enregistré en VVV)vagabond vagabond Si vous voyez un avertissement comme indiqué ci-dessous, vous pouvez l'ignorer et cliquer simplement sur "Oui" ou "OK" pour continuer. Nous nous connectons uniquement à une machine virtuelle sur notre propre ordinateur, il n'y a donc rien à craindre..
Une fois connecté, nous pouvons voir la base de données de nos sites. Maintenant, nous pouvons faire des choses comme importer et exporter une base de données, ou probablement exécuter des requêtes SQL.
Comme mentionné précédemment, VVV est fourni avec un ensemble d’outils, notamment PHP CodeSniffer, qui vous permet d’effectuer un audit de code de vos projets par rapport aux normes de codage WordPress. C'est quelque chose que je pense que vous devriez faire, surtout avant le lancement du projet.
Cependant, comme PHP CodeSniffer dépasse le cadre de ce tutoriel, j'ai rassemblé quelques références pour vous aider à démarrer sur le sujet..
Nous avons parcouru un long chemin pour mettre en place le VVV et l’améliorer avec un certain nombre d’extensions. En fin de compte, cela rationalise notre flux de travail pour créer un nouveau site local ou tester des environnements avec WordPress, bien que cela puisse prendre un peu de temps pour s'y habituer..
WordPress a une économie incroyablement active. Il existe des thèmes, des plugins, des bibliothèques et de nombreux autres produits qui vous aident à construire votre site et votre projet. La nature open-source de la plate-forme en fait également une excellente option à partir de laquelle vous pouvez améliorer vos compétences en programmation. Quoi qu’il en soit, vous pouvez voir tout ce que nous avons à votre disposition sur le marché Envato..
J'espère que vous trouverez dans ce tutoriel une référence utile pour vous familiariser avec Vagrant et VVV.
