HOOFDSTUK 3

WordPressEen inspirerende

handleiding

Wouter Postma & Jelle van der Schoot

ISBN: 978 90 430 3073 1NUR: 991Trefwoorden: WordPress, content management systeem, CMS, website, weblog

Dit is een uitgave van Pearson Benelux. Postbus 75598, 1070 AN AmsterdamWebsite: www.pearson.nl – e-mail: amsterdam@pearson.com

Opmaak: De Aesthetische Dienst, AmsterdamOmslagontwerp: Studio PearsonFotoverantwoording: pagina 13 ©Edhar/Shutterstock, pagina 14 ©Bonninstudio/Shutterstock, pagina 16 ©Neirfy/Shutterstock, pagina 36 ©Pan Xunbin/Shutterstock, pagina 46 ©Bonninstudio/Shutterstock, pagina 52 ©Ouh_desire/Shutterstock, pagina 60 ©igor.stevanovic/Shutterstock, pagina 64 ©Ouh_desire/Shutterstock, pagina 81 ©Denis Babenko/Shutterstock, pagina 110 ©Fonzales/Shutterstock, pagina 156 ©Inga Marchuk/Shutterstock, pagina 178 ©Robert Churchill/iStockphoto, pagina 199 ©kwest/Shutterstock, pagina 200 ©Ouh_desire/Shutterstock, pagina 200 ©FelixMöckel/iStockphoto.

Dit e-boek is voorzien van een verborgen, persoonlijk watermerk. Het verspreiden of openbaar maken van dit e-boek is niet toegestaan.

© Copyright 2014 Pearson Benelux

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 over nemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatie- of 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 PostmaWouter 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 SchootJelle 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 LoungeWordPress 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.

6 WORDPRESS

Inhoud

Voorwoord 15

1. INTRODUCTIE 17

> Wat is WordPress? 18 Waarom WordPress? 19 Open source 19 Het bedrijf achter WordPress 21

> Geschiedenis van WordPress 23 WordPress 0.7 24 De ontwikkeling 24

> Verschil WordPress.com en WordPress.org 37 WordPress.com 37 WordPress.org 37 Keuze 38 > Showcase 39 Grote namen die WordPress gebruiken 39 2. WERKEN MET WORDPRESS 47

> Voorbereiding 48 WordPress.com 49 WordPress.org 49 Hulpprogramma’s 51

WORDPRESS 7

> WordPress installeren 53 WordPress handmatig installeren 53 WordPress automatisch installeren met Installatron 58

> Introductie 61 Dashboard 61

> Pagina’s 65 Nieuwe pagina 66 Tekstopmaak 66 Publiceren, opslaan en inplannen 67 Pagina-attributen 68 Uitgelichte afbeelding 69 Scherminstellingen 70 > Nieuws- of blogberichten 72 Categorieën 73 Nieuwe categorie toevoegen 73 Hoofd- en subcategorieën 74 Tags 74 Een bericht schrijven 75 Media toevoegen 76 ‘Meer lezen’-tag 78 Publiceren 79 Notatie 80 Categorieën en tags 80 Uitgelichte afbeelding 80 > Menu’s 82 Menu aanmaken 82 Menulevels 84

>> Gevorderd: 86 Menu-icoon toevoegen 86 > Media 88 Media uploaden 88 Afbeelding bewerken 89

> Widgets 90 Wat is een sidebar? 90 Widgetlocaties en soorten widgets 91 Een widget toevoegen 91 Meer widgets 92

> Gebruikers 93 Gebruikers bekijken 93 Nieuwe gebruiker toevoegen 94 Gebruikersrollen 95 Profiel van een gebruiker 96

> Reacties 97 Spam 97 > Instellingen 103 Algemeen 103 Schrijven 105 Lezen 106 Reacties 107 Media 109 Permalinks 109

8 WORDPRESS

3. THEMES 111

> Wat is een theme? 112 Child theme 113 App themes 113

> Waar vind je themes? 115 WordPress.org (gratis) 116 Overige sites (premium) 116

> Themes installeren 118 Installeren via WordPress-backend 118 Installeren via FTP 119

> Themes aanpassen 125 Theme options 125

>> Gevorderd: 126 Custom CSS-bestand 126 Het bestand 126 Paginatemplates (sjablonen) 128 Paginatemplate maken 129 > 10 populaire themes (gratis) 131 1. Responsive 131 2. BresponZive 133 3. Neuro 135 4. Attitude 137 5. Customizr 139 6. PageLines 141 7. Catch Box 143 8. Custom Community 145 9. Expound 147 10. Pinboard 149

WORDPRESS 9

>> Gevorderd: Themes maken 150 Opbouw 150 Bestanden aanmaken 151 Andere bestanden 154 Afronden 155

4. PLUGINS 157

> Wat is een plugin? 158 Waar je op moet letten 159 Waarom is dit belangrijk? 159 > Waar vind je plugins? 160 WordPress.org (gratis) 160 Overige sites (premium) 160 CodeCanyon 161 WPMU DEV 161 > Plugins installeren 162 Installeren via WordPress- backend 162 Plugin uploaden via uploadfunctie 162 Plugin uploaden via zoekfunctie (WordPress.org plugin directory) 163 Installeren via FTP 164

> 10 populaire plugins (gratis) 165 1. WordPress SEO by Yoast 165 2. Contact Form 7 165 3. WP Super Cache 166 4. Jetpack by WordPress.com 166 5. WooCommerce 167 6. NextGEN Gallery 167 8. Better WP Security 167 9. Limit Login Attempts 168 10. WPTouch 168

10 WORDPRESS

> Plugins van Yoast 169 WordPress SEO 169 XML Sitemaps 170 Titels en Meta’s 171 Permalinks 171 Google Analytics for WordPress 172 Website toevoegen aan Google Analytics 172 > Plugins maken 174 De plugin schrijven 174 Uploaden 177

5. WEBSHOP MET WORDPRESS 179

> Introductie WooCommerce 180 WooThemes 181 WooCommerce plugins 181 Leveren, downloaden & affiliate 181

> Themes 182 5 mooie WooCommerce-themes 182 1. SuperStore 185 2. ReVerb 187 3. BoutiqueShop 189 4. Peddlar 191 5. Shopifiq 193

> Plugins 194 6 handige plugins voor WooCommerce 194 1. WooCommerce – All in One SEO Pack 194 2. Dvin WooCommerce Wishlist WP Plugin 195 3. Product CSV Import Suite 195 4. Social Coupon for WordPress 195 5. Pushover for WooCommerce 196 6. WooCommerce MailChimp Subscribe 196

WORDPRESS 11

Nederlandse vertaling WooCommerce 196 ‘WooCommerce (nl)’-plugin 197 iDEAL-betaalmethode toevoegen 197 Sisow 197 Targetpay 198 Ogone 198 Pronamic iDEAL (onafhankelijke plugin) 198

6. TIPS 201

> Upgraden en back-ups 202 Upgraden 203 Back-ups 204

> Veiligheid 207 Gebruikers 207

> Snelheid 209 Plugin-overkill 209 ‘Goed’ theme 211 Hosting 211

> Handige bronnen 212 Engelse websites 212 Nederlandse websites 213

> Index 215

12 WORDPRESS

WORDPRESS 13

15

> Voorwoord

Bedankt voor het aanschaffen van dit boek

over WordPress. We hopen dat jij aan het

eind van dit boek net zo enthousiast bent

over WordPress als wij!

In dit boek leren we je alles over WordPress, een Content Manage-ment 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 uitge-legd over WordPress en er wor-den 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 vor-men, want de indeling van Word-Press is al jaren hetzelfde.

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.

Blokjes

De volgende blokjes kun je tijdens het lezen tegenkomen:

Wanneer wij wat extra

informatie willen geven bij

een bepaald onderwerp.

Wanneer wij wat extra

informatie willen geven die

vooral geschikt is voor

gevorderde gebruikers.

16 HOOFDSTUK

126 THEMES

Het bestandEr 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.

PluginJe 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).

HandmatigHet is ook mogelijk om zelf een custom CSS-bestand te maken. Dit is lastiger en vereist enige ken-nis. 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 bijvoor-beeld Kladblok (Windows) of Teksteditor (Mac).

>> 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 toevoe-gen 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’).

THEMES 127

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 Bewer-ken-pagina) en plaats de volgende regel code vlak voor de </head> tag, zoals in afbeelding 3.25.

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.

<link rel=‘stylesheet’ href=‘<?php bloginfo(‘tem-plate_url’); ?>/custom.css’ type=‘text/css’ media=‘screen’ />

Afbeelding 3.25 – Header.php met de code naar het custom CSS-bestand

Sla het bestand op en je custom CSS-bestand is klaar!

128 THEMES

Afbeelding 3.26 – Pagina met 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 meer-dere paginatemplates zijn, kun je per pagina een paginatemplate kiezen.

Paginatemplates (sjablonen)Elke statische pagina krijgt een paginatemplate (ook wel sjabloon genoemd) toegewezen. Voor-beelden 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.28 – Paginatemplate kiezen in WordPress-backend

THEMES 129

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 instal leren voor meer informatie. Upload het bestand naar /wp- content/themes/jouwtheme/.

Als je nu naar een pagina gaat in de backend van je website, kun je jouw paginatemplate kiezen.

Opmerking: Dit is een gevorderd onderdeel. Het kan zijn dat je dit nog niet kunt volgen, maar proberen kan geen kwaad!

Paginatemplate maken Het maken van een paginatem-plate is – als je verstand hebt van HTML, CSS en PHP – niet ingewik-keld. 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.

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 aan-geeft.

<?php get_header(); ?>

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.

<?php /* Template name: Alle pagina’s */ ?>

Afbeelding 3.29 – Jouw paginatemplate kiezen in WordPress-backend

130 THEMES

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

Met deze code roep je de pagina op, met de reacties. Je kunt de reacties weghalen door de <?php comments_tem-plate( ‘’, true ); ?> -regel te verwijderen.

Afbeelding 3.30 – Paginatemplate met alleen de header

Afbeelding 3.31 – Paginatemplate met header, sidebar en footer

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.

<?php get_sidebar(); ?><?php get_footer(); ?>

Sla het bestand op en neem nog-maals een kijkje op de pagina met je paginatemplate. Nu de header, sidebar én footer er zijn, ziet de pagina er ongeveer zo uit!

<?php while ( have_posts() ) : the_post(); ?><?php get_template_part( ‘con-tent’, ‘page’ ); ?> <?php comments_tem-plate( ‘’, true ); ?><?php endwhile; ?>

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.

<?php wp_list_pages(); ?>

THEMES 131

Het theme is vertaald in meer dan 40 verschillende talen, kan gebruikt worden in combinatie met WooCommerce en heeft vier verschillende menulocaties, waar-door 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.

> 10 populaire themes (gratis)

1. ResponsiveResponsive is een zeer populair theme dat al lang in de top 25 van de WordPress Theme Directory te vinden is. De naam is opval-lend; 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.

Afbeelding 3.32 –Responsive theme

Responsive heeft een uitgebreid Theme Options-paneel, waar je kunt instellen wat er op de home-pagina moet komen. Daarnaast is er ruimte voor scripts, zoals Google Analytics. Het theme is meer dan 750.000 keer gedown-load en krijgt gemiddeld 4.7 van de 5.0 sterren.

www.wordpress.org/themes/responsive (gratis – WordPress.org Theme Directory)

132 THEMES

Afbeelding 3.33 –BresponZive

THEMES 133

2. BresponZiveBresponZive 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 gevor-derde gebruiker heel gemakkelijk aan te passen door middel van Theme Options. Ook zijn bepaalde onderdelen van het theme vol-ledig afhankelijk van widgets, waardoor je die onderdelen nog makkelijker vormgeeft.

Het theme geeft drie mogelijk-heden voor de ‘voorpagina’:

1 Magazine in een traditionele blogstijl

2 Magazinestijl3 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/bres-ponzive (gratis – WordPress.org Theme Directory)