Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen, of enige andere manier, zonder voorafgaande toestemming van de uitgever. Voor zover het maken van kopieën uit deze uitgave is toegestaan op grond van artikel 16B Auteurswet 1912 j° het Besluit van 20 juni 1974, St.b. 351, zoals gewijzigd bij Besluit van 23 augustus 1985, St.b. 471 en artikel 17 Auteurswet 1912, dient men de daarvoor wettelijk verschuldigde vergoedingen te voldoen aan de Stichting Reprorecht. Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatieof andere werken (artikel 16 Auteurswet 1912), in welke vorm dan ook, dient men zich tot de uitgever te wenden. Ondanks alle aan de samenstelling van dit boek bestede zorg kan noch de redactie, noch de auteur, noch de uitgever aansprakelijkheid aanvaarden voor schade die het gevolg is van enige fout in deze uitgave.
> Over de auteurs
Wouter Postma Wouter Postma (1991) is content manager voor Crossphase, een organisatie die zich specialiseert in Web Content Management en online projectmanagement. Als content manager heeft hij voor meerdere grote organisaties gewerkt zoals ING, Nationale Nederlanden, Canon Europe en Yamaha Motor Europe. Naast zijn werk als content manager is hij WordPress-consultant en schrijft hij artikelen over WordPress op WordPress Lounge (www.wplounge.nl). Jelle van der Schoot Jelle van der Schoot (1997) heeft zijn eigen bedrijf en werkt dagelijks met WordPress. Hij is WordPress-consultant en ontwikkelt websites voor klanten, variërend van een simpele bedrijfswebsite tot een complete webwinkel. Naast het werken met WordPress ontwikkelt Jelle ook web applicaties en schrijft hij artikelen over WordPress op WordPress Lounge (www.wplounge.nl). Over WordPress Lounge WordPress Lounge (www.wplounge.nl) is hét Nederlandse platform voor WordPress-gebruikers. In dit boek leren we je de basisprincipes van WordPress. Wil je nóg meer met WordPress doen? Bezoek dan regelmatig onze website! Als je hulp nodig hebt met je WordPress-website kun je contact met ons opnemen via www.wplounge.nl/contact.
Inhoud Voorwoord
1. INTRODUCTIE > Wat is WordPress?
Waarom WordPress? Open source Het bedrijf achter WordPress
> Geschiedenis van WordPress
WordPress 0.7 De ontwikkeling
> Verschil WordPress.com en WordPress.org
WordPress.com WordPress.org Keuze
> Showcase
Grote namen die WordPress gebruiken
2. WERKEN MET WORDPRESS > Voorbereiding
WordPress.com WordPress.org Hulpprogramma’s
6 WORDPRESS
15
17 18 19 19 21
23 24 24
37 37 37 38
39 39
47 48 49 49 51
> WordPress installeren
WordPress handmatig installeren WordPress automatisch installeren met Installatron
> Introductie
Dashboard
> Pagina’s
53 53 58
61 61
Nieuwe pagina Tekstopmaak Publiceren, opslaan en inplannen Pagina-attributen Uitgelichte afbeelding Scherminstellingen
65 66 66 67 68 69 70
Categorieën Nieuwe categorie toevoegen Hoofd- en subcategorieën Tags Een bericht schrijven Media toevoegen ‘Meer lezen’-tag Publiceren Notatie Categorieën en tags Uitgelichte afbeelding
72 73 73 74 74 75 76 78 79 80 80 80
Menu aanmaken Menulevels
> Nieuws- of blogberichten
> Menu’s
82 82 84
WORDPRESS 7
>> Gevorderd:
Menu-icoon toevoegen
> Media
88 88 89
Media uploaden Afbeelding bewerken
> Widgets
Wat is een sidebar? Widgetlocaties en soorten widgets Een widget toevoegen Meer widgets
> Gebruikers
Gebruikers bekijken Nieuwe gebruiker toevoegen Gebruikersrollen Profiel van een gebruiker
> Reacties
Spam
Algemeen Schrijven Lezen Reacties Media Permalinks
8 WORDPRESS
90 90 91 91 92
93 93 94 95 96
97 97
> Instellingen
86 86
103 103 105 106 107 109 109
3. THEMES > Wat is een theme?
Child theme App themes
> Waar vind je themes?
WordPress.org (gratis) Overige sites (premium)
> Themes installeren
Installeren via WordPress-backend Installeren via FTP
> Themes aanpassen
Theme options
>> Gevorderd:
Custom CSS-bestand Het bestand Paginatemplates (sjablonen) Paginatemplate maken
Opbouw Bestanden aanmaken Andere bestanden Afronden
4. PLUGINS > Wat is een plugin?
150 150 151 154 155
157
Waar je op moet letten Waarom is dit belangrijk?
158 159 159
WordPress.org (gratis) Overige sites (premium) CodeCanyon WPMU DEV
160 160 160 161 161
Installeren via WordPress-backend Plugin uploaden via uploadfunctie Plugin uploaden via zoekfunctie (WordPress.org plugin directory) Installeren via FTP
162 162 162 163 164
> Waar vind je plugins? > Plugins installeren
> 10 populaire plugins (gratis) 1. WordPress SEO by Yoast 2. Contact Form 7 3. WP Super Cache 4. Jetpack by WordPress.com 5. WooCommerce 6. NextGEN Gallery 8. Better WP Security 9. Limit Login Attempts 10. WPTouch
10 WORDPRESS
165 165 165 166 166 167 167 167 168 168
> Plugins van Yoast
WordPress SEO XML Sitemaps Titels en Meta’s Permalinks Google Analytics for WordPress Website toevoegen aan Google Analytics
169 169 170 171 171 172 172
De plugin schrijven Uploaden
174 174 177
> Plugins maken
5. WEBSHOP MET WORDPRESS > Introductie WooCommerce
6 handige plugins voor WooCommerce 1. WooCommerce – All in One SEO Pack 2. Dvin WooCommerce Wishlist WP Plugin 3. Product CSV Import Suite 4. Social Coupon for WordPress 5. Pushover for WooCommerce 6. WooCommerce MailChimp Subscribe
Bedankt voor het aanschaffen van dit boek over WordPress. We hopen dat jij aan het
Blokjes
De volgende blokjes kun je tijdens het lezen tegenkomen:
eind van dit boek net zo enthousiast bent Wanneer wij wat extra
over WordPress als wij!
informatie willen geven bij een bepaald onderwerp.
In dit boek leren we je alles over WordPress, een Content Management Systeem ofwel CMS dat in 2013 tien jaar bestaat. Dit boek is bedoeld voor zowel mensen die al een WordPress-website hebben als voor mensen die nog geen website hebben. Ook voor mensen die al bekend zijn met WordPress is dit boek nuttig, breid je kennis uit en verdiep je in de onderdelen voor ‘gevorderden’. Daarnaast geven we je tips en trucs én laten we je veel mooie themes en handige plugins zien, zodat jij het maximale uit je WordPress-website kunt halen.
Leeswijzer
In dit boek wordt een hoop uitgelegd over WordPress en er worden veel voorbeelden getoond. Bedenk bij het lezen van dit boek dat WordPress ongeveer twee keer per jaar een update krijgt. Het kan dus zijn dat het systeem er iets anders uit is gaan zien dan in dit boek. Dit hoeft gelukkig geen probleem te vormen, want de indeling van WordPress is al jaren hetzelfde.
Wanneer wij wat extra informatie willen geven die vooral geschikt is voor gevorderde gebruikers.
Naast het systeem zelf kan het natuurlijk zijn dat links en/of prijzen van themes en plugins veranderen. Dit zal niet zo snel gebeuren, maar mocht het zo zijn dat een link niet meer werkt, dan raden wij je aan op Google verder te zoeken.
15
16 HOOFDSTUK
>> Gevorderd: Opmerking: Dit is een gevorderd onderdeel. Het kan zijn dat je dit nog niet kunt volgen, maar proberen kan geen kwaad!
Custom CSS-bestand Door een custom CSS-bestand te maken, kun je custom CSS toevoegen aan je theme. Deze CSS-regels zijn ‘belangrijker’ dan de normale CSS-regels, waardoor je de CSS van je theme gemakkelijk kunt veranderen, zonder dat je daar je theme voor hoeft aan te passen. Als je de CSS van je theme wijzigt in een bestand van je theme, gaan je wijzigingen verloren bij de eerstvolgende update. Mocht je de CSS van je theme dus willen aanpassen, doe dit dan in een custom CSS-bestand of in een child theme (zie hoofdstuk ‘Themes’).
126 THEMES
Het bestand Er bestaan themes die in de theme options een veld voor custom CSS hebben. In dat geval kun je daar custom CSS invoeren, zonder dat je zelf een custom CSS-bestand hoeft aan te maken. Heeft je theme geen ingebouwd custom CSS-veld, dan moet je zelf aan de slag. Dit kan door middel van een plugin, maar je kunt het bestand ook zelf maken.
Plugin Je kunt een custom CSS-bestand krijgen met de plugin Custom CSS. Deze plugin is gratis te down loaden in de Plugin Directory van WordPress.org (www.wordpress. org/plugins/custom-css). Handmatig Het is ook mogelijk om zelf een custom CSS-bestand te maken. Dit is lastiger en vereist enige kennis. Om te beginnen maak je een bestand aan in een geavanceerde tekstbewerker. Zo’n programma is bijvoorbeeld Sublime Tekst 2, maar het kan ook met bijvoorbeeld Kladblok (Windows) of Teksteditor (Mac).
Afbeelding 3.25 – Header.php met de code naar het custom CSS-bestand
Maak een nieuw bestand aan en noem het: ‘custom.css’. Sla dit bestand op. De volgende stap is het uploaden van het custom CSS-bestand dat je net hebt gemaakt. Log in op de FTP van je website en ga naar /wp-content/themes/jouwtheme/. Upload daar het bestand dat je net hebt gemaakt (custom.css) en wacht tot het uploaden is voltooid. Log in op je WordPress-dashboard en ga naar Themes > Bewerken. In de lijst met bestanden (aan de rechterkant) staat – als het goed is – het custom CSS-bestand dat je net hebt geüpload.
Het custom CSS-bestand staat op de server, maar WordPress weet nog niet dat er iets met het bestand gedaan moet worden. Klik op het header.php-bestand (aan de rechterkant van de Bewerken-pagina) en plaats de volgende regel code vlak voor de tag, zoals in afbeelding 3.25. /custom.css’ type=‘text/css’ media=‘screen’ /> Sla het bestand op en je custom CSS-bestand is klaar!
THEMES 127
Afbeelding 3.26 – Pagina met sidebar
Paginatemplates (sjablonen) Elke statische pagina krijgt een paginatemplate (ook wel sjabloon genoemd) toegewezen. Voorbeelden van paginatemplates zijn Sidebar en Full width. Als je het paginatemplate Sidebar selecteert, krijg je een pagina te zien met een sidebar. Selecteer je het paginatemplate Full width, dan krijg je een pagina zonder sidebar.
Afbeelding 3.27 – Pagina zonder sidebar
Niet elk theme heeft verschillende paginatemplates ingebouwd. Elk theme heeft in ieder geval het standaardpaginatemplate (page. php), met sidebar. Indien er meerdere paginatemplates zijn, kun je per pagina een paginatemplate kiezen. Afbeelding 3.28 – Paginatemplate kiezen in WordPress-backend
128 THEMES
Opmerking: Dit is een gevorderd onderdeel. Het kan zijn dat je dit nog niet kunt volgen, maar proberen kan geen kwaad! Afbeelding 3.29 – Jouw paginatemplate kiezen in WordPress-backend
Paginatemplate maken Het maken van een paginatemplate is – als je verstand hebt van HTML, CSS en PHP – niet ingewikkeld. Begin met het maken van een nieuw, leeg bestand. Plaats daar de volgende code in, zodat WordPress weet dat het een paginatemplate is. Neem de code heel precies over. Waar Alle pagina’s staat geschreven, kun jij een andere naam typen. De bezoeker krijgt dit niet te zien, het is puur voor je eigen overzicht.
Sla het bestand op en upload het naar de map van je theme. Dit kun je doen via de FTP van je website, zie de paragraaf Themes installeren voor meer informatie. Upload het bestand naar /wpcontent/themes/jouwtheme/. Als je nu naar een pagina gaat in de backend van je website, kun je jouw paginatemplate kiezen.
Let wel op: het paginatemplate dat je net hebt gemaakt bevat geen inhoud. Als je de pagina opslaat met het nieuwe paginatemplate, krijg je een witte, lege pagina te zien. Tijd voor wat inhoud! Met de volgende code roep je de header op (header.php). Plaats de volgende regel onder de regel waar je de templatenaam aangeeft. Sla het bestand op en ga ver volgens weer naar de pagina met jouw paginatemplate. Als het goed is, zie je alleen de header van je website, zoals in afbeelding 3.30.
THEMES 129
Afbeelding 3.30 – Paginatemplate met alleen de header
Met alleen een header is je pagina natuurlijk nog niet compleet. Voeg de volgende twee regels toe om de sidebar en footer op te roepen.
Het enige wat nu nog ontbreekt is de content. Hier kun je veel verschillende dingen doen, je hebt alle vrijheid. Om je een beetje op weg te helpen: een aantal handige functies.
Pagina-inhoud weergeven
Sla het bestand op en neem nogmaals een kijkje op de pagina met je paginatemplate. Nu de header, sidebar én footer er zijn, ziet de pagina er ongeveer zo uit!
Met deze code roep je de pagina op, met de reacties. Je kunt de reacties weghalen door de -regel te verwijderen.
Alle pagina’s opsommen
Het kan zijn dat je een overzicht wilt maken van alle pagina’s op je website. Dat kan met de volgende regel code.
Afbeelding 3.31 – Paginatemplate met header, sidebar en footer
130 THEMES
> 10 populaire themes (gratis)
Afbeelding 3.32 –Responsive theme
1. Responsive Responsive is een zeer populair theme dat al lang in de top 25 van de WordPress Theme Directory te vinden is. De naam is opvallend; de term ‘responsive’ wordt gebruikt om aan te geven dat een website goed werkt op mobiele apparaten. Het Responsive theme is volledig responsive, zoals de naam al doet vermoeden.
Het theme is vertaald in meer dan 40 verschillende talen, kan gebruikt worden in combinatie met WooCommerce en heeft vier verschillende menulocaties, waardoor je veel links kwijt kunt op een overzichtelijke manier. Een van de grote voordelen van het Responsive WordPress theme is de gebruiksvriendelijkheid, wat vooral komt door de widgets. Er zijn elf widgetruimtes gemaakt, waardoor je alles zelf kunt indelen.
Responsive heeft een uitgebreid Theme Options-paneel, waar je kunt instellen wat er op de homepagina moet komen. Daarnaast is er ruimte voor scripts, zoals Google Analytics. Het theme is meer dan 750.000 keer gedownload en krijgt gemiddeld 4.7 van de 5.0 sterren. www.wordpress.org/themes/ responsive (gratis – WordPress.org Theme Directory)
THEMES 131
Afbeelding 3.33 –BresponZive
132 THEMES
2. BresponZive BresponZive is een gratis theme dat erg doet denken aan een ‘premium’ theme. Het thema is responsive en heeft een echte blog-/magazinestijl. BresponZive is voor de gevorderde gebruiker heel gemakkelijk aan te passen door middel van Theme Options. Ook zijn bepaalde onderdelen van het theme volledig afhankelijk van widgets, waardoor je die onderdelen nog makkelijker vormgeeft.
Het theme geeft drie mogelijkheden voor de ‘voorpagina’: 1 Magazine in een traditionele blogstijl 2 Magazinestijl 3 Traditionele blogstijl BresponZive is meer dan 6600 keer gedownload en heeft een rating van 5.0 van de 5.0 sterren. www.wordpress.org/themes/bresponzive (gratis – WordPress.org Theme Directory)
