In dit hoofdstuk gaan we dieper in op de

WEB DESIGN

HOOFDSTUK 13 WordPress - Deel 1

13.0 Introductie

I

n dit hoofdstuk gaan we dieper in op de interne werking van een van de meest gebruikte web-publishing platformen op het hedendaagse internet, WordPress. Het is een van de makkelijkste manieren om een website online te krijgen en dient als een geweldig platform voor het testen van je web ontwerp vaardigheden. Gedurende de komende twee hoofdstukken laten we zien hoe je ermee werkt, de hele weg vanaf een basisinstallatie tot meer complexe aanpassingen en content management. Binnen een paar uur heb je, je eigen WordPress-aangedreven site online. Minimale vereisten voor het voltooien van dit hoofdstuk: Een web hosting aanbieder die een WordPress auto-install biedt, in hun lijst van functies. Alternatief: FTP toegang tot je host, een database administratie hulpmiddel zoals PHP MyAdmin (meestal verstrekt via het controle paneel van je web host).

13.1 Wat is WordPress? WordPress begon zijn leven in 2003 als een blog hulpmiddel vergelijkbaar met websites als blogger. com (nu het Google eigendom “Blogspot.com”) of LiveJournal.com, en diende als een manier voor mensen om hun gedachten en meningen online te krijgen met behulp van hun eigen websites. Sindsdien is het uitgegroeid tot een zeer flexibele Content Management Systeem (CMS) en wordt gebruikt door ongeveer 15% van alle websites vandaag. Theoretisch is het mogelijk om vrijwel elk soort website met WordPress door het uitvoeren van operaties achter de schermen. Dit zijn een paar van de grote voordelen van het gebruik van WordPress: • Het is goed ingeburgerd en ondersteund door een zeer actief ondersteuningsforum. • Het is gratis te gebruiken en omdat het een open source is, is het constant in ontwikkeling. • Het zorgt voor de meest geavanceerde website functies zoals beveiliging, RSS-feeds, SEO en beeld optimalisatie, met weinig of zonder extra maatwerk.

96

Er zijn twee manieren waarop je WordPress kunt gebruiken voor je eigen website. Ten eerste, kun je WordPress.com bezoeken en je aanmelden voor een account en gebruik maken van hun servers. Ten tweede, kun je het installeren op je eigen web hosting pakket. Dit komt niet eens in de buurt van zo eng als het klinkt, en in dit hoofdstuk zullen we alle noodzakelijke stappen behandelen voor het maken van je eigen installatie van WordPress, gevolgd door je eigen volledig functionerende website. WordPress is gebouwd met behulp van de PHP web programmeertaal en steunt op een MySQL database om inhoud te leveren. Het is niet essentieel om deze twee disciplines te begrijpen om WordPress te gebruiken, hoewel het handmatige installatie proces enigszins beide licht raakt. De meeste mensen die WordPress uitvoeren als hun website CMS hebben van beide geen kennis.

13.2 Hoe WordPress te installeren Methode 1: WordPress Auto-Install Dit is verreweg de makkelijkste manier om te beginnen met het gebruiken van WordPress op je eigen hosting pakket. Het vereist geen kennis van PHP of MySQL databases, en is vergelijkbaar met het uitvoeren van een wizard of het installeren van een programma op je computer. Het is belangrijk op te merken dat auto-install een proces is dat wordt aangeboden door een aantal en niet alle web hosts, dus als je van plan bent om deze methode te gebruiken controleer dan of je host deze service biedt. Hier is een lijst van hosts die dat wel doen: • Bluehost • MediaTemple • HostGator • DreamHost De installatie procedure voor elk van hen is vergelijkbaar omdat hun einddoelen allemaal hetzelfde zijn. Voor dit hoofdstuk zullen we Bluehost’s “1-Click Install” volgen. Als je host deze service niet biedt ga dan alsjeblieft verder met Methode 2: Handmatig installeren van WordPress het is echt niet zo moeilijk, we beloven het je!

© 2012 Excel With Business

WEB DESIGN 1. Log in op je web hosting account en je komt op de cPanel startpagina. Er zal een sectie zijn die een link naar de WordPress auto-installer bevat. In dit geval is dat onder “Site Builders”. Dans la page suivante, choisissez « Install a brand new version of WordPress » (Installer une toute nouvelle version de WordPress).


Figure 13-1: Figuur 13-1: Een typische weergave van een link naar een web host’s WordPress auto-installer.

2. Op de volgende pagina selecteer je “Install a brand new version of WordPress”. 3. De volgende pagina is waar je de naam van je site, het wachtwoord voor toegang tot het administratie gebied van WordPress en andere opties kunt instellen. Je kunt onze instelling in het screenshot hieronder overnemen voor een eenvoudige installatie. Zorg ervoor dat je een sterk wachtwoord gebruikt in tegenstelling tot het voorbeeld dat we hieronder hebben gebruikt! 4. 4. Als je klikt op voltooien zal het de site opzetten in de root van je domein (bijvoorbeeld www.example-domain.com), en het zal meteen toegankelijk zijn. Om toegang te krijgen tot het administratie gebied, ga je naar www.exampledomain.com/wp-admin. Je zult een bevestiging e-mail van je host ontvangen.

Methode 2: Handmatig installeren van WordPress Als je host geen autoinstall functie biedt, of als je geniet van het gevoel van voldoening dat wordt geleverd met het doen van dingen op de harde manier, kun je jouw WordPress installatie handmatig uitvoeren. Eerst moeten we de laatste

97

verise van WordPress downloaden van www. WordPress.org - een redelijk klein bestand in .zip formaat. Je zult een link naar een hulp pagina zien met details over de installatie (we raden aan het te lezen voor een uitgebreid overzicht). De stappen zijn als volgt: 1. Maak een MySQL database via je web host cPanel interface. De meeste hosts hebben ook

Figuur 13-3: De database manager in cPanel hosting management interface.


WEB DESIGN


Figuur 13-4: wp-config-sample.php – een bestand in het WordPress install pakket.

gedetailleerde instructies voor dit proces in hun hulp secties. Bluehost heeft een bijzonder goede walkthrough hier: https://my.bluehost. com/cgi/help/000006. Als de database eenmaal is geïnstalleerd, moet je een gebruikersaccount aanmaken om toegang te krijgen tot de database. De laatste stap is het definiëren van de gebruiker privileges, zodat hij/zij ALLE PRIVILEGES heeft voor toegang tot en het bewerken van de database. 2. Pak het bestand uit dat je gedownload hebt van WordPress.org. Standaard zal het uitpakken naar een map genaamd “WordPress” met bestanden en submappen. Het bestand waar we direct in geïnteresseerd zijn heet “wp-config-sample.php”. Open dit bestand in een tekstverwerker zoals Notepad (Windows) of TextEdit (Mac). 3. In de meeste gevallen zijn er vier stukjes informatie die veranderd moeten worden en we hebben ze in het rood gemarkeerd in figuur 13.2. De eerste drie (Database Name, Database

98

User en Database Password) zijn de instellingen die je hebt opgeslagen in deel 1. Je kunt deze controleren in je web host’s controle paneel. Het laatste deel kan voor je worden gegenereerd door https://api.WordPress.org/secret-key/1.1/salt/ te bezoeken - je kunt simpelweg de tekst die in je browser verschijnt kopiëren en plakken op de plaats van de voorbeeld regels in het bestand. 4. Sla het bestand op onder een nieuwe naam - “wpconfig.php” - om dit te doen ga je naar Save as ... in het File menu en in dezelfde map als voorheen, maar met de nieuwe naam “wp-config.php”. Het is essentieel dat precies dit de bestandsnaam is, om de installatie te laten werken. 5. Nu dat je alle bestanden klaar hebt, moeten we de inhoud van de map uploaden naar onze web server. Om dit te doen moet je, je FTP software (meer in Hoofdstuk 12) openen en verbinden op je web host. Normaal gesproken wil je dat je website op de root van je domein is, bijvoorbeeld http://www.example-domain.com dus moet


WEB DESIGN je de inhoud van de “WordPress” map uploaden naar de root van de web directory van je server. Dit is meestal /www of / htdocs, en de locatie van je FTP-software wordt automatisch gestuurd door de configuratie van de web host. Dit kan even duren want er zijn honderden kleine bestanden die moeten worden overgebracht om WordPress te laten werken. Leun achterover en laat het FTP programma het werk voor je doen.


Figuur 13-5: Lokale en externe panes in een FTP programma.

6. Zodra dit proces is voltooid, is het tijd om je browser te starten naar de installatie pagina voor je nieuwe website te gaan. Je kunt het vinden op YOURDOMAIN /wpadmin/install.php 7. Klik op “Install WordPress” en dat is het – ga naar je domein om het begin van je nieuwe website te zien! Geavanceerde instructies voor alle aspecten van dit proces zijn te vinden op de website van WordPress als je problemen tegenkomt. Onze instructies zijn een vereenvoudigde versie van het proces en zijn bedoeld om je tijd te besparen.

13.3 Buiten het Kader Op welke manier je WordPress ook hebt geïnstalleerd, inloggen op je nieuwe site voor de eerste keer kan een ontmoedigend proces zijn. In een oogopslag is

99

Figuur 13-6: De WordPress install settings web pagina.

er ontzettend veel aan de hand! Gelukkig, zal de meest recente versie een handige Getting Started handleiding weergeven, om je te helpen de uitstraling van de website aan te passen en inhoud toe te voegen.


WEB DESIGN


Dashboard Het dashboard is het controle centrum van je site. Het is toegankelijk op elk gewenst moment door te klikken op de link die we in blauw hebben gemarkeerd. Vervolgens hebben we twee groepen met links in het menu aan de linkerkant. In rood zijn de gebieden voor het maken en uploaden van inhoud, terwijl in groen de meer administratieve gebieden zoals site instellingen, uiterlijk en Plugins zijn aangegeven – we komen hierop terug in Hoofdstuk 14. In geel vind je, onder andere, een directe link naar de front end van je site.

Figuur 13-7: De WordPress admin “Dashboard” pagina.

Berichten en Pagina’s Dit zijn de belangrijkste manieren om inhoud te genereren op je site. Standaard zullen berichten worden weergegeven in een ononderbroken lijst op de startpagina van je site, terwijl pagina’s apart worden weergegeven en toegankelijk zijn via een menu of een soortgelijke navigatie. De procedure voor het toevoegen van beide is eigenlijk bijna hetzelfde, dus laten we eens kijken naar het interface om ze toe te voegen. Vanuit de sectie die we in het rood hebben gemarkeerd, ga naar ofwel Posts > Add New of Pages > Add New. Dit brengt je naar een bewerking scherm voor het toevoegen van een bericht of pagina - ze lijken allebei veel op elkaar. Voer een titel in voor je bericht of pagina en ga dan onmiddelijk verder met het toevoegen van de

100

Figuur 13-8: De WordPress “Add New Post” pagina.

inhoud. Dit vindt plaats in het grote tekstvak in het midden en is bekend voor iedereen die een e-mail heeft geschreven met een webmail aanbieder, zoals Gmail. Met de werkbalk aan de bovenkant kun je het tekstformaat aanpassen en hyperlinks invoegen. Daarboven kun je met de “Upload/Insert” link afbeeldingen, audio of video’s toevoegen. In dit opzicht is het maken van een web pagina zo eenvoudig mogelijk gemaakt. Je zult merken dat in de rechterbovenhoek van het tekstgebied er een tabblad is dat van “Visual” naar “HTML” kan schakelen, waardoor meer geavanceerde pagina’s en


WEB DESIGN berichten kunnen worden gecreëerd. Zodra je klaar bent met het bewerken van je bericht of pagina, klik je op “Publish” - de blauwe knop in de rechterbovenhoek - om je werk op te slaan en het te publiceren. Voordat je live gaat kun je ook wensen om een ontwerp op te slaan en het later terug te keren om het af te maken, of je werk bekijken in een nieuw browser tabblad of venster. Je zult merken dat er extra opties zijn zoals “Categories” en “Tags”. Deze kunnen worden gebruikt om je inhoud verder te organiseren; op dit moment zullen we ze overslaan, maar we zullen ze opnieuw bezoeken in Hoofdstuk 14.

Je inhoud bekijken op je website.

HOOFDSTUK 13 WordPress - Deel 1 in de linkerbovenhoek van het venster of typ je domeinnaam in de adresbalk. Het moet er ongeveer zo uitzien. In zijn huidige configuratie, zullen nieuwe berichten na elkaar verschijnen op de startpagina van de site, en pagina’s zullen als links verschijnen in de zwarte menubalk die zich in het midden bevindt onder de kop afbeelding. Dus dat is mooi uitgewerkt. Maar wat als je zou willen uitspringen van de massa en je, je site wilt maken met een foutloze persoonlijkheid en een perfecte uitstraling? In het volgende hoofdstuk zullen we een uitgebreide blik werpen op het gebruik van WordPress om de inhoud van een website te beheren.

Om je site te bekijken klik je op de “Visit site” link,

Figuur 13-9: Een voorbeeld van het standaard WordPress thema met weergave van de startpagina.

volgende NEXT

101

Hoofdstuk 14 WordPress - Deel 2


In dit hoofdstuk gaan we dieper in op de

Recommend Documents