Transcript inkijkexemplaar

Wouter Postma &
Jelle van der Schoot
WordPress
Een inspirerende
handleiding
HOOFDSTUK 3
ISBN: 978 90 430 3073 1
NUR: 991
Trefwoorden: WordPress, content management systeem, CMS, website, weblog
Dit is een uitgave van Pearson Benelux. Postbus 75598, 1070 AN Amsterdam
Website: www.pearson.nl – e-mail: [email protected]
Opmaak: De Aesthetische Dienst, Amsterdam
Omslagontwerp: Studio Pearson
Fotoverantwoording: 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 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
> 10 populaire themes (gratis)
1. Responsive
2. BresponZive
3. Neuro
4. Attitude
5. Customizr
6. PageLines
7. Catch Box
8. Custom Community
9. Expound
10. Pinboard
111
112
113
113
115
116
116
118
118
119
125
125
126
126
126
128
129
131
131
133
135
137
139
141
143
145
147
149
WORDPRESS 9
>> Gevorderd: Themes 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
WooThemes
WooCommerce plugins
Leveren, downloaden & affiliate
> Themes
5 mooie WooCommerce-themes
1. SuperStore
2. ReVerb
3. BoutiqueShop
4. Peddlar
5. Shopifiq
> Plugins
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
179
180
181
181
181
182
182
185
187
189
191
193
194
194
194
195
195
195
196
196
WORDPRESS 11
Nederlandse vertaling ­WooCommerce
196
‘WooCommerce (nl)’-plugin
197
iDEAL-betaalmethode toevoegen
197
Sisow197
Targetpay
198
Ogone
198
Pronamic iDEAL (onafhankelijke plugin)
198
6. TIPS
> Upgraden en back-ups
Upgraden
Back-ups
> Veiligheid
Gebruikers
> Snelheid
Plugin-overkill
‘Goed’ theme
Hosting
> Handige bronnen
Engelse websites
Nederlandse websites
> Index
12 WORDPRESS
201
202
203
204
207
207
209
209
211
211
212
212
213
215
WORDPRESS 13
> Voorwoord
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 </head>
tag, zoals in afbeelding 3.25.
<link rel=‘stylesheet’ href=‘<?php bloginfo(‘template_url’); ?>/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
instal­leren 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.
<?php /* Template name: Alle pagina’s */ ?>
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.
<?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.
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.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
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
<?php comments_template( ‘’, true ); ?>
-regel te verwijderen.
<?php while ( have_posts() ) :
the_post(); ?>
<?php get_template_part( ‘content’, ‘page’ ); ?>
<?php comments_template( ‘’, 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(); ?>
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)
THEMES 133