Share
De nos jours, pour être un développeur WordPress indépendant, vous devez souvent développer simultanément plusieurs sites WordPress pour différents clients. Voici comment.
Cela nécessite que vous adoptiez ce qui suit:
Avec cette configuration, vous pouvez facilement:
Dans ce didacticiel, nous faisons référence à Mac OS X mais vous pouvez facilement l’adapter à n’importe quel autre système d’exploitation. De plus, nous supposons que Git est déjà installé sur le serveur distant et que l'accès SSH est configuré avec une authentification par clé publique (les installations SSH et Git sont hors du champ de ce didacticiel)..
Le scénario que nous verrons consiste en un Environnement local qui permet le développement d'un site WordPress avec des plugins et des thèmes et un Serveur distant qui hébergera le site WordPress "de production". Dans l’environnement local, nous utiliserons un Bureau ordinateur et un Carnet ordinateur. Sur les deux ordinateurs, nous allons configurer MAMP, Dropbox et Git afin que vous puissiez travailler sur votre bureau lorsque vous êtes au bureau et sur votre ordinateur portable lorsque vous n'êtes pas au bureau et que toutes les modifications seront synchronisées..
Nous utiliserons Dropbox pour synchroniser les fichiers et la base de données entre Desktop et Notebook, et nous utiliserons Git pour suivre les modifications localement et les déployer sur le serveur distant..
Pour plus de simplicité, nous définissons www.site.dev en tant que site de développement sur l'environnement local et www.site.com en tant que site de production sur le serveur distant.
Sur l'environnement local:
Sur le serveur distant:
Sur l'environnement local:
Exemples de flux de travail typiques:
Téléchargez et installez Dropbox sur votre bureau et votre ordinateur portable (voir ici pour les instructions). Utilisez le même compte sur les deux ordinateurs.
Dans le dossier Dropbox sur le bureau, créez la structure de répertoire suivante:
Vérifiez que la même structure de répertoire est propagée sur Notebook.
MAMP est un acronyme qui signifie: Mac, Apache, MySQL et PHP, il s'agit d'une application qui installe un environnement de serveur local sur votre Mac..
Son installation est très simple: téléchargez MAMP à partir d’ici, décompressez l’archive, double-cliquez dessus, puis suivez les instructions. Faites cela à la fois sur le bureau et sur le portable. Ne démarrez pas encore MAMP: auparavant, vous devez déplacer la base de données et modifier la configuration par défaut..
Sur Bureau déplacez le dossier de la base de données de l'emplacement standard MAMP vers le répertoire db de Dropbox. Pour ce faire, ouvrez un terminal et utilisez les commandes suivantes:
cd / Applications / MAMP / db mv * ~ / Dropbox / Développement / db /
Sur Carnet ouvrez un terminal et supprimez le dossier de la base de données à l'aide de la commande suivante:
cd / Applications / MAMP rm -rf ./db
Enfin sur les deux Bureau et Carnet Créez un lien symbolique de MAMP vers Dropbox avec la commande suivante:
ln -s ~ / Dropbox / Développement / db / Applications / MAMP / db
Maintenant le lien symbolique / Applications / MAMP / db pointe vers le dossier partagé Dropbox ~ / Dropbox / Développement / db qui contient les bases de données MAMP. Ne démarrez pas encore MAMP: nous devons d'abord modifier la configuration..
MAMP utilise des ports personnalisés pour les instances de serveur Apache et MySQL: Apache fonctionne sur le port 8888, MySQL sur le port 8889. Vous pouvez conserver cette configuration ou, comme nous le suggérons, la modifier pour utiliser des ports standard: 80 pour Apache et 3306 pour MySQL..
Pour restaurer les ports standard, démarrez MAMP sur votre bureau uniquement , cliquez sur "Préférences ...", puis sur "Ports", cliquez sur "Définir les ports Apache et MySQL par défaut" et enfin cliquez sur "OK": MAMP enregistre la nouvelle configuration et redémarre automatiquement.
Maintenant, sur votre bureau, ouvrez votre navigateur préféré et allez à http: // localhost / MAMP /: vous devriez voir la page d'accueil MAMP.
Si vous ne voyez pas la page d'accueil MAMP, le partage Web est probablement activé: ouvrez les Préférences Système, cliquez sur Partage et désactivez le Partage Web..
Ne vous inquiétez pas si Mac OS X requiert un mot de passe lorsque vous démarrez MAMP: nous avons configuré Apache pour qu'il s'exécute sur le port 80 qui est un port privilégié, ce qui nécessite un mot de passe administrateur..
Parce que dans cette configuration MAMP ne peut pas fonctionner simultanément sur votre bureau et votre ordinateur portable, quittez MAMP sur le bureau, démarrez-le sur Notebook et configurez-le de la même manière. Quand vous avez fini, arrêtez MAMP.
La configuration MAMP Apache est stockée dans /Applications/MAMP/conf/apache/httpd.conf. Éditez ce fichier avec votre éditeur de texte préféré et ajoutez les lignes suivantes (faites-le à la fois Bureau et ton Carnet):
# Inclut la configuration partagée sur le dossier Dropbox. Incluez /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf.
Remplacer TON NOM D'UTILISATEUR avec votre nom d'utilisateur Mac OS X (si vous ne le connaissez pas, ouvrez Terminal et lancez qui suis je; il vous fournira votre nom d'utilisateur).
Cette instruction indique à Apache de charger un fichier de configuration supplémentaire à partir de votre dossier Dropbox (synchronisé entre le bureau et l'ordinateur portable). De cette façon, nous pouvons l'utiliser comme le fichier de configuration de l'environnement local.
Apache Virtual Host est une fonctionnalité intéressante qui vous permet d'exécuter plusieurs sites Web (tels que www.site1.com et www.site2.com) sur un seul serveur. Les hôtes virtuels peuvent être "basés sur IP", ce qui signifie que vous avez une adresse IP différente pour chaque site Web, ou "basés sur un nom", ce qui signifie que plusieurs noms s'exécutent sur une adresse IP. Le dernier est la fonctionnalité que nous allons utiliser (voir ici pour plus de détails).
Avec votre éditeur de texte préféré, ouvrez le fichier de configuration de l’environnement local. /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf et insérez les lignes suivantes:
AllowOverride All # # Hôte virtuel nommé # LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YourUSERNAME/Dropelop/logs/access.log vcommon ErrorLog / Users / YOURUSERNAME / Dropbox / Development / logs / errors.log UseCanonicalName Off VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Development / vhosts /% 0
La ficelle "% 0"lance le sort: quand le serveur Apache reçoit une requête pour le domaine www.site.dev il cherche un répertoire nommé www.site.dev dans / Utilisateurs / YOURUSERNAME / Dropbox / Développement / vhosts /, et si trouvé sert des fichiers de celui-ci.
Les autres instructions indiquent à Apache où écrire les erreurs et accéder aux fichiers journaux..
Nous sommes maintenant prêts à configurer le site de développement WordPress www.site.dev. Pour ce faire, nous devons créer un www.site.dev répertoire (sur votre bureau).
et nous devons éditer (sur Desktop et Notebook) / etc / hosts fichier pour mapper le nom d'hôte www.site.dev à l'adresse IP localhost. Avec votre éditeur de texte préféré, ouvrez le fichier / etc / hosts et ajoutez les lignes suivantes à la fin du fichier (Mac OS X requiert votre mot de passe pour modifier ce fichier système):
# développement local 127.0.0.1 www.site.dev
À ce stade, il pourrait être utile de vérifier: ouvrez Terminal et exécutez la commande suivante:
ping-c 3 www.site.dev
Vous devriez avoir une réponse similaire à ceci:
Il est maintenant temps de configurer WordPress: Téléchargez le package WordPress à partir d'ici et décompressez-le dans un dossier temporaire. Déplacer tout le contenu du dossier temporaire à l'intérieur /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.
Sur votre bureau, démarrez MAMP et ouvrez votre navigateur à l'adresse http: // localhost / MAMP /. Cliquez sur l'onglet phpMyAdmin et créez une nouvelle base de données nommée site_dev:
Ouvrez votre navigateur sur www.site.dev et terminez l'installation de WordPress en utilisant les valeurs suivantes:
Arrêtez MAMP sur le bureau, attendez la synchronisation Dropbox et démarrez-la sur Notebook. Ouvrez votre navigateur de bloc-notes sur www.site.dev: WordPress est déjà configuré.!
À la fin de l'étape 3, nous avons un environnement de développement WordPress local basé sur MAMP et synchronisé entre le bureau et le portable via Dropbox. Il est maintenant temps de configurer le serveur distant..
Git est un système de contrôle de version distribué qui enregistre les modifications apportées à un fichier ou à un ensemble de fichiers au fil du temps et permet de transmettre les modifications à un serveur distant (description plus détaillée ici). Dans ce tutoriel, nous supposons que Git est déjà installé sur votre serveur. En conséquence, nous procédons à la configuration.
Vous devez d'abord vous connecter au serveur. Nous supposons que vous avez un compte avec accès SSH et authentification par clé publique. De cette façon, vous n'avez pas à insérer un mot de passe à chaque fois que vous vous connectez. Ouvrez une fenêtre de terminal et connectez-vous au serveur:
ssh [email protected]
Configurez certaines valeurs par défaut de Git concernant l'utilisateur et le courrier électronique pour éviter que Git ne les demande à chaque fois:
git config --global user.email "[email protected]" git config --global user.name "Votre nom"
Configuration et initialiser un référentiel vide:
mkdir site.git cd site.git git init --bare
Pour permettre le déploiement du développement au site de production, vous devez configurer un Crochet (J'utilise Vi comme éditeur de texte pour le serveur distant):
crochets cd vi post-recevoir
Puis insérez les lignes suivantes:
#! / bin / bash # docroot = "/ home / votre_nom_utilisateur / www" en lisant oldrev newrev ref ref branche = "echo $ ref | cut -d / -f3" if ["master" == "$ branch"]; then git --work-tree = $ docroot checkout -f $ branche fi terminée
Définir la variable docroot sur le serveur Web DocumentRoot et ensuite post-recevoir exécutable:
chmod 755 post-réception
Ce hook est appelé à la fin du processus d'envoi des modifications d'un client (ordinateur de bureau ou portable) au serveur distant. Il effectue le déploiement dans le répertoire de production Web Server DocumentRoot (voir ici pour plus de détails sur Git Hooks)..
Les commandes Git en utilisent variables environnementales; nous devons en configurer deux: GIT_DIR et GIT_WORK_TREE. La première spécifie le chemin d'accès au référentiel, la seconde le chemin d'accès à l'arborescence de travail (DocumentRoot). Le shell par défaut sur mon serveur distant est Bash, je les ajoute donc au fichier. .bash_profile.
cd ~ vi .bash_profile
Ajoutez les lignes suivantes à la fin du fichier:
# Export GIT GIT_DIR = ~ / repo.git export GIT_WORK_TREE = ~ / www
Sur le serveur distant, vous devez toujours créer une base de données sur MySQL. Pour ce faire, vous pouvez suivre les instructions d'installation détaillées du WordPress Codex. CPanel est installé sur mon serveur distant en tant que panneau de configuration d'hébergement. Je suis donc ces instructions..
Installez Git sur Mac OS X (instructions plus détaillées sur le livre Pro Git): téléchargez le programme d'installation à partir de la page Code Google, double-cliquez sur le fichier dmg, puis sur le fichier pkg et suivez les instructions. Faites cela à la fois sur le bureau et sur le portable.
Vous êtes maintenant prêt à initialiser un référentiel Git sur l'environnement local. Pour ce faire, ouvrez Terminal (sur votre bureau ou sur votre ordinateur portable) et utilisez les commandes suivantes:
cd ~ / Dropbox / Développement / vhost / www.site.dev git init .
Vous devriez voir quelque chose comme ça:
Pour vérifier l'état du référentiel Git, utilisez cette commande:
statut git
la sortie devrait être comme ceci:
Git vous dit que tous ces fichiers et répertoires ne font pas l'objet d'un suivi dans le référentiel et suggère d'utiliser le git ajouter commande pour les suivre.
Avant de faire cela, vous devez apporter quelques modifications à la configuration de Git. Nous devons dire à Git quels fichiers il devrait suivre et lesquels il ne devrait pas. Pour ce faire, utilisez le .gitignore fichier.
Ce fichier spécifie les fichiers non suivis que Git doit ignorer (voir ici pour plus de détails). La commande est simple, faisons un exemple pour comprendre comment cela fonctionne:
# ignorer le magasin de services Mac Desktop X .DS_Store # ignorer le répertoire my-test-dir et tous les sous-répertoires my-test-dir / #ignore tous les fichiers .txt * .txt
Alors créez le fichier ~ / Dropbox / Development / vhost / www.site.dev / .gitignore et ajoutez les lignes suivantes:
# ignorer le magasin de services du bureau Mac OS X.DS_Store # ignorer debug.log wp-content / debug.log
Pour le moment, c'est tout ce que vous devez faire. Plus tard, nous ajouterons d'autres fichiers et répertoires.
WordPress sur un environnement local utilise la base de données de MAMP et son fichier de configuration wp-config.php reflète cette configuration (nom d'utilisateur et mot de passe MAMP MySQL standard):
Accentsconagua
// ** Paramètres MySQL - Vous pouvez obtenir ces informations auprès de votre hôte Web ** // / ** Le nom de la base de données pour WordPress * / define ('DB_NAME', 'site_dev'); / ** Nom d'utilisateur de la base de données MySQL * / define ('DB_USER', 'root'); / ** Mot de passe de la base de données MySQL * / define ('DB_PASSWORD', 'root'); / ** Nom d'hôte MySQL * / define ('DB_HOST', 'localhost'); Cela fonctionne sur un environnement local, mais que se passe-t-il si nous le déployons sur le serveur distant? Évidemment, la connexion à la base de données échouera, car DB_NAME, DB_USER, DB_PASSWORD et probablement DB_HOST sont faux.
La solution vient de l'article de Mark Jaquith: modifier le wp-config.php fichier de sorte que la configuration de l'environnement local soit chargée à partir d'un autre fichier et que ce fichier ne soit pas suivi par git. Pour ce faire, ouvrez wp-config.php fichier et substituer les lignes ci-dessus avec ces lignes:
if (file_exists (dirname (__FILE__). '/local-config.php')) include (dirname (__FILE__). '/local-config.php'); else define ('DB_NAME', 'YOURDBNAME'); define ('DB_USER', 'YOURDBUSER'); define ('DB_PASSWORD', 'YOURDBPASSWORD'); define ('DB_HOST', 'YOURDBHOSTNAME'); Remplacer VOTRE NOM, YOURDBUSER, VOTRE MOT DE PASSE et VOTREDBHOSTNAME avec les valeurs que vous avez définies à l'étape 5.
Créer le ~ / Dropbox / Development / vhost / www.site.dev / local-config.php le fichier et mettre l'environnement local définit ici:
define ('DB_NAME', 'site_dev'); define ('DB_USER', 'root'); define ('DB_PASSWORD', 'root'); define ('DB_HOST', 'localhost'); Maintenant nous devons ajouter local-config.php à .gitignore de sorte que Git ne le suivra pas:
# ignorer le magasin de services du bureau Mac OS X .DS_Store # ignorer debug.log wp-content / debug.log # ignorer local-config.php local-config.php
OK, maintenant nous sommes prêts à faire le premier commit.
Pour valider les modifications dans le référentiel Git sous Environnement local, entrez les commandes suivantes:
cd ~ / Dropbox / Development / vhost / www.site.dev / git add. git commit -m "Importation initiale"
La première commande Git suit tous les fichiers et répertoires de ~ / Dropbox / Développement / vhost / www.site.dev / sauf que dans .gitignore, le second les engage tous dans le référentiel Git.
Il est temps de pousser WordPress sur le serveur distant, mais nous devons d'abord configurer le référentiel Git distant:
git remote ajouter un site Web ssh: //votre [email protected]/home/votre nomutilisateur/site.git
Cette commande indique à Git qu’il existe un référentiel distant appelé site Internet, hébergé sur le serveur www.site.com accessible via une connexion SSH.
Enfin, le premier déploiement sur le serveur distant:
maître de site Web git push
La sortie de la commande devrait ressembler à ceci:
Maintenant, vous pouvez pointer votre navigateur sur www.site.com et voir le site WordPress sur le serveur distant.
En tant qu'exemple de développement de thème / plug-in, nous pouvons créer un thème enfant Twenty Eleven sur l'environnement local et le déployer sur le serveur distant..
Pour des instructions détaillées sur la création d'un thème enfant, vous pouvez lire cet article sur Wptuts +. Fondamentalement, nous devons créer un répertoire contenant deux fichiers: style.css et functions.php (ce dernier est optionnel).
Donc sur Desktop (ou Notebook) créez le répertoire ~ / Dropbox / Développement / vhost / www.site.dev / wp-content / themes / my-twentyeleven-child, puis créez un fichier appelé style.css dans ce dossier et ajoutez les lignes suivantes:
/ * Nom du thème: My Twenty Eleven Child URI du thème: http: //www.site.com/ Description: Thème enfant du thème Twenty Eleven. vingteleven Version: 0.1 * / @import url ("… /twentyeleven/style.css"); Vous pouvez également ajouter des modifications CSS sous le @importation ligne, par exemple, vous pouvez changer l’arrière-plan du corps:
corps background: # D51717;
Puis créez le functions.php déposer et ajouter les lignes suivantes:
'. "\ n"; add_action ('wp_head', 'favicon_link'); ?> Ce fichier de fonction simple fait une chose: il ajoute un lien favicon à l'élément head des pages HTML..
Notre thème enfant est maintenant terminé et nous devons le suivre dans le référentiel Git:
cd ~ / Dropbox / Développement / vhost / www.site.dev / git add wp-content / theme / my-twentyeleven-child /
Ensuite, nous devons valider les modifications:
git commit -m "Ajout du thème Mes vingt et onze enfants"
De cette façon, vous pouvez poursuivre le développement du thème enfant en ajoutant des fichiers, en modifiant le code et en enregistrant toutes ces modifications dans le référentiel. Lorsque votre thème est prêt pour le serveur de production, vous devez simplement émettre le git push commander:
maître de site Web git push
De cette façon, le thème enfant sera poussé sur le serveur distant, prêt à être utilisé.
Si vous développez un plugin, suivez les mêmes étapes: suivez le répertoire du plugin et validez les modifications dans le référentiel. Lorsque votre plugin est prêt, appuyez sur le serveur distant..
De manière similaire, nous pouvons gérer l’installation du plugin WordPress ou la mise à jour de WordPress. Supposons que nous voulons essayer un nouveau plugin et que nous voulons être sûrs que cela ne rompt pas notre site de production..
Nous l’installons d’abord sur l’environnement local à l’aide du panneau d’administration de WordPress (voir ici pour plus de détails), puis nous devons le suivre et l’ajouter au référentiel Git (faites-le sur votre bureau ou votre ordinateur portable):
cd ~ / Dropbox / Développement / vhost / www.site.dev / git ajouter wp-content / plugins / plug-in-essayer / git commit -m "Ajouter le plug-in à essayer"
Si le plug-in fonctionne, vous pouvez le déployer sur un serveur distant en utilisant:
maître de site Web git push
et l'activer à l'aide du panneau d'administration WordPress.
Si le plug-in ne fonctionne pas, vous pouvez le désinstaller à l'aide du panneau d'administration WordPress. Vous pouvez ensuite le supprimer des fichiers suivis et valider les modifications:
git rm wp-content / plugins / plugin-à-essayer / git commit -m "Suppression du plug-in à essayer"
Un petit conseil: si vous ajoutez un répertoire de plugins à
.gitignorefichier (avant validation), le plug-in ne restera que sur l'environnement local, mais il ne sera pas poussé sur le serveur distant. Cela peut être utile pour les plugins tels que la barre de débogage utilisés dans le développement local mais qui ne doivent pas nécessairement être transférés sur un site de production..
Ok, nous savons que des changements rapides sur le serveur de production ne sont pas une bonne habitude, bien qu’ils soient une mauvaise habitude, mais sont parfois inévitables. En supposant que nous ayons changé le DB_PASSWORD sur le serveur distant wp-config.php déposer et maintenant, nous voulons reconnaître ce changement dans notre environnement local wp-config.php. Pour ce faire, connectez-vous d'abord au serveur distant via SSH et utilisez la commande suivante:
git commit -m "change DB_PASSWORD sur wp-config.php"
Extrayez ensuite les modifications du référentiel distant à l'aide de la commande suivante sur le bureau:
maître du site web git pull
Si vous lisez le wp-config.php vous verrez le nouveau DB_PASSWORD.
Dans ce didacticiel, nous avons vu un scénario composé d’un environnement local et d’un serveur distant hébergeant le site de développement et de production. www.site.com, mais vous pouvez facilement répéter cette configuration pour www.mynewcustomer.com, pour www.myothernewnewcustomer.com etc.
MAMP, Dropbox et Git forment une équipe gagnante chargée du développement et du déploiement de WordPress. Ils représentent un environnement de développement flexible permettant d'ajouter facilement un nouveau site, de le développer où que vous soyez et de le déployer de manière fiable sur le serveur de production.
Si vous travaillez régulièrement avec WordPress, consultez la sélection de grands utilitaires WordPress sur Envato Market. Des plugins de sécurité aux personnalisateurs iFrame, il y a sûrement quelque chose qui peut vous aider.
Utilitaires WordPress sur le marché Envato
