Share
Tegenwoordig moet je om een freelance WordPress-ontwikkelaar te zijn, vaak tegelijkertijd verschillende WordPress-sites voor verschillende klanten ontwikkelen. Hier is hoe.
Dit vereist dat u het volgende overneemt:
Met deze opstelling kunt u eenvoudig:
In deze tutorial verwijzen we naar Mac OS X maar je kunt het gemakkelijk aanpassen aan elk ander besturingssysteem. Daarnaast gaan we ervan uit dat de externe server Git al heeft geïnstalleerd en SSH-toegang is geconfigureerd met openbare-sleutelauthenticatie (de SSH- en Git-installaties vallen buiten het bestek van deze zelfstudie).
Het scenario dat we zullen zien bestaat uit een Lokale omgeving waarmee de ontwikkeling van een WordPress-site met plug-ins en thema's en een Externe server die de WordPress-site voor "productie" zal hosten. In de lokale omgeving gebruiken we een Desktop computer en a notitieboekje computer. Op beide computers zullen we MAMP, Dropbox en Git instellen, zodat u op uw bureaublad kunt werken wanneer u op kantoor bent en op uw notebook als u niet op kantoor bent en alle wijzigingen worden gesynchroniseerd.
We zullen Dropbox gebruiken om bestanden en DB te synchroniseren tussen Desktop en Notebook, en we zullen Git gebruiken om wijzigingen lokaal bij te houden en ze op de Externe Server te implementeren..
Voor de eenvoud definiëren we www.site.dev als de ontwikkelingssite op de lokale omgeving en www.site.com als de productiesite op de externe server.
Over de lokale omgeving:
Op de externe server:
Over de lokale omgeving:
Typische workflow-voorbeelden:
Download en installeer Dropbox op je bureaublad en je notebook (kijk hier voor instructies). Gebruik hetzelfde account op beide computers.
Maak in de Dropbox-map op Desktop de volgende mapstructuur:
Controleer of dezelfde directorystructuur wordt gepropageerd op Notebook.
MAMP is een acroniem dat staat voor: Mac, Apache, MySQL en PHP, het is een applicatie die een lokale serveromgeving op je Mac installeert.
De installatie is heel eenvoudig: download MAMP vanaf hier, pak het archief uit, dubbelklik erop en volg de instructies. Doe dit op zowel desktop als notebook. Start MAMP nog niet: voordat u dit doet, moet u de database verplaatsen en de standaardconfiguratie wijzigen.
Op Desktop verplaats de databasemap van de standaardlocatie MAMP naar de db-directory op Dropbox, om dit te doen opent u een Terminal en gebruikt u de volgende opdrachten:
cd / Toepassingen / MAMP / db mv * ~ / Dropbox / Development / db /
Op notitieboekje open een Terminal en verwijder de databasemap met de volgende opdracht:
cd / Toepassingen / MAMP rm -rf ./db
Ten slotte op beide Desktop en notitieboekje maak een symbolische link van MAMP naar Dropbox met de volgende opdracht:
ln -s ~ / Dropbox / Development / db / Applications / MAMP / db
Nu de symbolische link / Applications / MAMP / db wijst naar de gedeelde map van Dropbox ~ / Dropbox / Development / db dat de MAMP-databases bevat. Start MAMP nog niet: we moeten eerst een wijziging in de configuratie aanbrengen.
MAMP gebruikt aangepaste poorten voor Apache- en MySQL-serverexemplaren: Apache werkt op poort 8888, MySQL wordt uitgevoerd op poort 8889. U kunt deze configuratie onderhouden of, zoals wij suggereren, wijzigen om standaardpoorten te gebruiken: 80 voor Apache en 3306 voor MySQL.
Start MAMP om standaardpoorten te herstellen alleen op uw bureaublad , klik op "Voorkeuren ...", vervolgens op "Poorten", klik op "Instellen op standaard Apache en MySQL-poorten" en klik vervolgens op "OK": MAMP slaat de nieuwe configuratie op en start automatisch opnieuw.
Nu op je bureaublad open je je favoriete browser en ga je naar http: // localhost / MAMP /: je zou de MAMP Home Page moeten zien.
Als u de MAMP-startpagina niet ziet, hebt u waarschijnlijk Web Sharing ingeschakeld: open de Systeemvoorkeuren, klik op Delen en zet Web Sharing uit.
Maakt u zich geen zorgen als Mac OS X een wachtwoord vereist wanneer u MAMP start: we hebben Apache ingesteld om te worden uitgevoerd op poort 80 die een geprivilegieerde poort is en hiervoor is een beheerderswachtwoord vereist.
Omdat in deze configuratie MAMP kan niet tegelijkertijd op zowel uw bureaublad als uw notebook worden uitgevoerd, stop MAMP op Desktop, start het op Notebook en configureer het op dezelfde manier. Wanneer u klaar bent, stopt u met MAMPEN.
MAMP Apache-configuratie is opgeslagen in /Applications/MAMP/conf/apache/httpd.conf. Bewerk dit bestand met je favoriete teksteditor en voeg de volgende regels toe (doe dit op zowel je Desktop en jouw notitieboekje):
# Omvat de configuratie gedeeld in de Dropbox-map Include /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf
Vervangen JE GEBRUIKERSNAAM met je Mac OS X-gebruikersnaam (als je het niet weet, open dan Terminal en voer het uit wie ben ik; het zal je je gebruikersnaam geven).
Deze instructie geeft Apache de opdracht om een extra configuratiebestand uit uw Dropbox-map te laden (gesynchroniseerd tussen Desktop en Notebook). Op deze manier kunnen we het gebruiken als het lokale omgevingsconfiguratiebestand.
Apache Virtual Host is een leuke functie waarmee u meer dan één website (zoals www.site1.com en www.site2.com) op één server kunt uitvoeren. Virtuele hosts kunnen "op IP gebaseerd" zijn, wat betekent dat u voor elke website een ander IP-adres hebt, of "op naam gebaseerd", wat betekent dat u meerdere namen op één IP-adres hebt. De laatste is de functie die we zullen gebruiken (zie hier voor details).
Met uw favoriete teksteditor opent u het lokale omgevingsconfiguratiebestand /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf en voeg de volgende regels in:
AllowOverride All # # Genoemde virtuele host # LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YOURUSERNAME/Dropbox/Development/logs/access.log vcommon ErrorLog / Users / YOURUSERNAME / Dropbox / Ontwikkeling / logs / errors.log UseCanonicalName Off VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Development / vhosts /% 0
De snaar "% 0"spreidt de betovering: wanneer de Apache-server een aanvraag voor het domein ontvangt www.site.dev het zoekt naar een map met de naam www.site.dev in / Users / uwgebruikersnaam / Dropbox / Development / vhosts /, en indien gevonden worden er bestanden van aangeboden.
De andere instructies geven Apache de opdracht om fout- en toegangslogbestanden te schrijven.
Nu zijn we klaar om de WordPress-ontwikkelingssite in te stellen www.site.dev. Om dit te doen, moeten we een www.site.dev directory (op uw bureaublad).
en we moeten bewerken (op zowel Desktop als op een laptop) / Etc / hosts bestand om de hostnaam in kaart te brengen www.site.dev naar het localhost IP-adres. Open het bestand met uw favoriete teksteditor / Etc / hosts en voeg de volgende regels toe aan het einde van het bestand (Mac OS X vereist uw wachtwoord om dit systeembestand te wijzigen):
# lokale ontwikkeling 127.0.0.1 www.site.dev
In dit stadium kan het handig zijn om wat te controleren: open Terminal en voer de volgende opdracht uit:
ping -c 3 www.site.dev
U zou hierop een vergelijkbare reactie moeten hebben:
Het is nu tijd om WordPress in te stellen: Download het WordPress-pakket van hier en pak het uit in een tijdelijke map. Verplaats alle inhoud van de tijdelijke map naar binnen /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.
Start MAMP op uw bureaublad en open uw browser op http: // localhost / MAMP /. Klik op het tabblad phpMyAdmin en maak een nieuwe database met de naam site_dev:
Open uw browser op www.site.dev en voltooi de WordPress-installatie met behulp van deze waarden:
Stop MAMP op het bureaublad, wacht op Dropbox-synchronisatie en start deze op Notebook. Open uw Notebook-browser op www.site.dev: WordPress is al geconfigureerd!
Aan het einde van stap 3 hebben we een lokale WordPress ontwikkelomgeving op basis van MAMP en gesynchroniseerd tussen Desktop en Notebook via Dropbox, nu is het tijd om de externe server te configureren.
Git is een Distributed Version Control-systeem, dat veranderingen in een bestand of een set bestanden registreert in de loop van de tijd en veranderingen naar een externe server kan pushen (meer gedetailleerde beschrijving hier). In deze tutorial nemen we aan dat Git al op je server is geïnstalleerd. Daarom gaan we verder met de configuratie.
Eerst moet je inloggen op de server. We gaan ervan uit dat u een account hebt met SSH-toegang en openbare sleutelverificatie. Op deze manier hoeft u niet elke keer dat u inlogt een wachtwoord in te voegen. Open een terminalvenster en maak verbinding met de server:
ssh [email protected]
Stel een aantal Git-standaardwaarden in over de gebruiker en e-mail om te voorkomen dat Git er elke keer naar vraagt:
git config --global user.email "[email protected]" git config --global user.name "Uw naam"
Instellen en initialiseer een lege repository:
mkdir site.git cd site.git git init --bare
Om de implementatie van de ontwikkeling naar de productiesite mogelijk te maken, moet je een Git haak (Ik gebruik Vi als mijn teksteditor voor de externe server):
cd hooks vi na ontvangst
Voeg vervolgens de volgende regels in:
#! / bin / bash # docroot = "/ home / yourusername / www" while read oldrev newrev ref do branch = "echo $ ref | cut -d / -f3" als ["master" == "$ branch"]; dan git --work-tree = $ docroot checkout -f $ branch fi done
Stel de variabele in docroot naar de webserver DocumentRoot en maak vervolgens post-ontvangen uitvoerbaar:
chmod 755 na ontvangst
Deze hook wordt aangeroepen aan het einde van het proces van het duwen van wijzigingen van een client (desktop of notebook) naar de externe server. Het maakt de implementatie naar de DocumentRoot-directory van de productiewebserver (zie hier voor meer informatie over Git Hooks).
Git-commando's gebruiken wat omgevingsvariabelen; we moeten er twee van instellen: GIT_DIR en GIT_WORK_TREE. De eerste specificeert het pad naar de repository, de tweede het pad naar de werkstructuur (de DocumentRoot). De standaardshell op mijn Remote Server is Bash, dus ik voeg ze toe aan het bestand .bash_profile.
cd ~ vi .bash_profile
Voeg de volgende regels toe aan het einde van het bestand:
# GIT export GIT_DIR = ~ / repo.git export GIT_WORK_TREE = ~ / www
Op de Remote Server moet je nog steeds een database op MySQL aanmaken: hiervoor kun je de gedetailleerde installatie-instructies op de WordPress Codex volgen. Mijn remote server heeft cPanel als host control panel, dus ik volg deze instructies.
Installeer Git onder Mac OS X (meer gedetailleerde instructies over Pro Git-boek): download het installatieprogramma van de Google Code-pagina, dubbelklik op het dmg-bestand en vervolgens op het pkg-bestand en volg de instructies. Doe dit op zowel desktop als notebook.
Nu bent u klaar om een Git-repository op de lokale omgeving te initialiseren. Open hiervoor Terminal (op uw bureaublad of op uw notebook) en gebruik de volgende opdrachten:
cd ~ / Dropbox / Development / vhost / www.site.dev git init .
Je zou zoiets als dit moeten zien:
Gebruik deze opdracht om de status van de Git-repository te controleren:
git status
de uitvoer zou als volgt moeten zijn:
Git vertelt je dat al deze bestanden en mappen niet worden bijgehouden in de repository en stelt voor om de git add commando om ze te volgen.
Voordat u dit doet, moet u enkele wijzigingen aanbrengen in de Git-configuratie. We moeten Git vertellen welke bestanden het moet bijhouden en welke niet. Gebruik hiervoor de .gitignore het dossier.
Dit bestand specificeert de niet-gehackte bestanden die Git zou moeten negeren (zie hier voor meer details). De opdracht is eenvoudig, laten we een voorbeeld geven om te begrijpen hoe het werkt:
# negeer Mac OS X Desktop Service Store .DS_Store # negeer mijn-test-dir map en alle submappen my-test-dir / #ignore alle .txt-bestanden * .txt
Dus maak het bestand aan ~ / Dropbox / Development / vhost / www.site.dev / .gitignore en voeg de volgende regels toe:
# negeer Mac OS X Desktop Service Store .DS_Store # negeer debug.log wp-content / debug.log
Voorlopig is dit alles wat je hoeft te doen. Later zullen we andere bestanden en mappen toevoegen.
WordPress op een lokale omgeving gebruikt DB van MAMP en het bijbehorende configuratiebestand wp-config.php weerspiegelt deze configuratie (standaard MAMP MySQL gebruikersnaam en wachtwoord):
Accentsconagua
// ** MySQL-instellingen - U kunt deze informatie opvragen bij uw webhost ** // / ** De naam van de database voor WordPress * / define ('DB_NAME', 'site_dev'); / ** MySQL database gebruikersnaam * / define ('DB_USER', 'root'); / ** MySQL-databasewachtwoord * / define ('DB_PASSWORD', 'root'); / ** MySQL-hostnaam * / define ('DB_HOST', 'localhost'); Dit werkt op een lokale omgeving, maar wat gebeurt er als we het op de externe server implementeren? Uiteraard zal het mislukken om verbinding te maken met de DB omdat DB_NAME, DB_USER, DB_PASSWORD en waarschijnlijk DB_HOST zijn fout.
De oplossing komt uit het artikel van Mark Jaquith: wijzig het wp-config.php bestand zodat de configuratie voor lokale omgeving wordt geladen vanuit een ander bestand en dat bestand niet wordt gevolgd door git. Om dit te doen open je wp-config.php bestand en vervang de bovenstaande regels door deze regels:
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'); Vervangen YOURDBNAME, YOURDBUSER, YOURDBPASSWORD en YOURDBHOSTNAME met de waarden die u in stap 5 hebt gedefinieerd.
Maak het ~ / Dropbox / Development / vhost / www.site.dev / local-config.php bestand en plaats hierin de definities van de Lokale Omgeving:
define ('DB_NAME', 'site_dev'); define ('DB_USER', 'root'); define ('DB_PASSWORD', 'root'); define ('DB_HOST', 'localhost'); Nu moeten we toevoegen local-config.php naar .gitignore zodat Git het niet zal volgen:
# negeer Mac OS X Desktop Service Store .DS_Store # negeer debug.log wp-content / debug.log # negeer local-config.php local-config.php
OK, nu zijn we klaar om de eerste commit te maken.
Ga als volgt te werk om wijzigingen in Git-repository in lokale omgeving vast te leggen:
cd ~ / Dropbox / Development / vhost / www.site.dev / git add. git commit -m "Eerste import"
De eerste Git-opdracht houdt alle bestanden en mappen bij ~ / Dropbox / Development / vhost / www.site.dev / behalve dat in .gitignore, de tweede commiteert ze allemaal in de Git-repository.
Het is tijd om WordPress op Remote Server te pushen, maar eerst moeten we de externe Git-repository instellen:
git remote add website ssh: //[email protected]/home/uwgebruikersnaam/site.git
Deze opdracht vertelt Git dat er een externe repository is genoemd website, gehost op server www.site.com toegankelijk via een SSH-verbinding.
Eindelijk de eerste deploy op Remote server:
git push website master
De uitvoer van de opdracht ziet er als volgt uit:
Nu kunt u uw browser naar verwijzen www.site.com en zie WordPress-site op externe server.
Als voorbeeld van een voorbeeld van een thema / plug-in kunnen we in het thema Lokale omgeving een Twenty Eleven-kind maken en dit op de externe server implementeren.
Voor een gedetailleerde instructie over het maken van een kindthema kun je dit artikel lezen op Wptuts +. In principe moeten we een map maken die twee bestanden bevat: style.css en functions.php (de laatste is optioneel).
Dus maak op Desktop (of op een laptop) de map aan ~ / Dropbox / Development / vhost / www.site.dev / wp-content / themes / my-twentyeleven-kind, maak vervolgens een bestand met de naam style.css in deze map en voeg de volgende regels toe:
/ * Theme Name: My Twenty Eleven Child Theme URI: http: //www.site.com/ Description: Child theme for the Twenty Eleven theme Auteur: Your Name Author URI: http: //uw-site.com/ Sjabloon: twentyeleven Versie: 0.1 * / @import url ("... /twentyeleven/style.css"); U kunt ook enkele CSS-wijzigingen toevoegen onder de @importeren regel, u kunt bijvoorbeeld de achtergrond van het lichaam wijzigen:
body achtergrond: # D51717;
Maak vervolgens de functions.php bestand en voeg de volgende regels toe:
'. "\ N"; add_action ('wp_head', 'favicon_link'); ?> Dit eenvoudige functiebestand doet één ding: het voegt een favicon-link toe aan het head-element van HTML-pagina's.
Nu is ons kindthema voltooid en moeten we het in de Git-repository volgen:
cd ~ / Dropbox / Development / vhost / www.site.dev / git add wp-content / theme / my-twentyeleven-child /
Dan moeten we de wijzigingen doorvoeren:
git commit -m "My Twenty Eleven Child Theme toegevoegd"
Op deze manier kun je doorgaan met de ontwikkeling van het kindthema door het toevoegen van bestanden, het wijzigen van code en het toewijzen van al deze wijzigingen aan de repository. Wanneer uw thema klaar is voor de productieserver hoeft u alleen maar het git push commando:
git push website master
Op deze manier wordt het onderliggende thema op de externe server gedrukt, klaar om te worden gebruikt.
Als u een plug-in ontwikkelt, voert u dezelfde stappen uit: volg de directory van de plug-in en bewerk wijzigingen in de repository. Wanneer uw plug-in klaar is, duwt u hem op Remote Server.
Op een vergelijkbare manier kunnen we WordPress plug-in installatie of WordPress update beheren. Laten we aannemen dat we een nieuwe plug-in willen proberen en we willen er zeker van zijn dat deze onze productiesite niet breekt.
We installeren het eerst in de lokale omgeving met behulp van het WordPress Administration Panel (zie hier voor details), daarna moeten we het volgen en toevoegen aan de Git-repository (doe dit op je bureaublad of op je notebook):
cd ~ / Dropbox / Ontwikkeling / vhost / www.site.dev / git add wp-content / plugins / plugin-to-try / git commit -m "Voeg de plug-in toe om te proberen"
Als de plug-in werkt, kunt u deze op Remote Server implementeren met behulp van:
git push website master
en schakel het in met behulp van het WordPress Administration Panel.
Als de plug-in niet werkt, kunt u de installatie ongedaan maken via het WordPress-beheerpaneel. Daarna kunt u deze uit de bijgehouden bestanden verwijderen en de wijzigingen vastleggen:
git rm wp-content / plugins / plugin-to-try / git commit -m "De plug-in verwijderd om te proberen"
Een kleine tip: als u een plugin-map toevoegt aan
.gitignorebestand (vóór commit) zal de plug-in alleen in de lokale omgeving blijven, maar hij zal niet op Remote Server drukken. Dit kan handig zijn voor plug-ins zoals Debug Bar die worden gebruikt bij lokale ontwikkeling, maar die niet naar een productiesite hoeven te worden overgebracht.
Oké, we weten het, snelle veranderingen op de productieserver zijn geen goede gewoonte, ze zijn inderdaad een slechte gewoonte, maar soms zijn ze onvermijdelijk. Ervan uitgaande dat we de DB_PASSWORD op externe server wp-config.php bestand en nu willen we die verandering in ons lokale milieu erkennen wp-config.php. Om dit te doen, maakt u eerst verbinding met de server op afstand via SSH en gebruikt u de volgende opdracht:
git commit -m "verander DB_PASSWORD op wp-config.php"
Haal vervolgens wijzigingen van de externe repository met de volgende opdracht op het bureaublad:
git trek website meester
Als u de wp-config.php je zult het nieuwe zien DB_PASSWORD.
In deze zelfstudie hebben we een scenario gezien dat bestaat uit een lokale omgeving en een externe server waarop de ontwikkeling en de productielocatie zijn ondergebracht www.site.com, maar je kunt deze setup gemakkelijk herhalen voor www.mynewcustomer.com, voor www.myothernewnewcustomer.com enzovoorts.
MAMP, Dropbox en Git vormen een winnend team dat zich bezighoudt met de ontwikkeling en implementatie van WordPress, ze vertegenwoordigen een flexibele ontwikkelomgeving die toelaat om eenvoudig een nieuwe site toe te voegen, deze overal te ontwikkelen en op een betrouwbare manier te implementeren op de productieserver.
Als u regelmatig met WordPress werkt, bekijk dan de selectie van geweldige WordPress-hulpprogramma's op Envato Market. Van beveiligingsinvoegtoepassingen tot iFrame-aanpassers, er is zeker iets dat u kan helpen.
WordPress-hulpprogramma's op Envato Market
