Starten met een eigen WordPress website

deel 4!!!!!door @peterluit

1

Programma omvat 4 middagen, globale inhoud

• deel 1: introductie

• deel 2: werken met content

• deel 3: menu’s, thema’s en plugins

• deel 4: sidebars en widgets

2

WordPress - deel 4

1. Sidebars en widgets binnen thema’s

3

Sidebars en widgets

4

• Het samenspel van thema en plugins bepalen de mogelijkheden van de ‘widget’ editor voor het plaatsen van widgets in de verschillende sidebars

• met de term ‘widget area’ wordt een sidebar bedoeld

• indien van toepassing wordt na de installatie van een plugin een ‘available widget’ in de widget editor getoond, om geplaatst te worden in een sidebar

• voorbeeld: een plugin om formulieren te maken ‘Gravity Forms’ maakt het mogelijk om een invulformulier in een sidebar te plaatsen

Widgets plaatsen in sidebars binnen een thema

5

Widgets plaatsen in sidebars binnen een thema

6

4 footer gebieden

Sidebars en widgets

7

• Elk thema maakt gebruik van één of meer sidebars, waarin meerdere widgets kunnen worden geplaatst

• WordPress biedt standaard een hele reeks bruikbare widgets

• Plugins kunnen widgets installeren, die zelf geplaatst kunnen worden

WordPress - deel 4

2. Plugins voor uitgeefdoeleinden

8

Typen plugins

9

• advertenties

• gerelateerde berichten

• print-to-web

• bezoekersanalyse/vindbaarheid

• auteursprofielen

• betaalmuren/ledenwebsites

Advertenties

10

• door middel van een slider (zie http://www.golfbaanspraarwoude.nl)

• https://wordpress.org/plugins/logo-slider/

Advertenties

11

• door middel van een ‘roulerende’ banner in een widget

• https://wordpress.org/plugins/useful-banner-manager/

Advertenties (*)

12

• OpenX integratie: plaats advertenties vanuit advertentie management systeem

• https://wordpress.org/plugins/openx-wordpress-widget/

• OpenX heet tegenwoordig Revive Addserver

• webservice voor het meten van advertentie bewegingen

• is een vak op zichzelf, termen als CPM, CPC, CPA etc.

Gerelateerde berichten

13

• De bekende ‘Lees ook…’

• https://wordpress.org/plugins/yet-another-related-posts-plugin/

Print-to-web

14

• Een op papier lijkende online PDF-Reader

• https://wordpress.org/plugins/issuu-embed/

Bezoekersanalyse/vindbaarheid

15

• Google Analytics en SEO plugin

• https://yoast.com/wordpress/plugins/seo/ (apart behandeld)

• https://yoast.com/wordpress/plugins/google-analytics/

• Eventueel weergeven van Analytics op dashboard: https://wordpress.org/plugins/google-analytics-dashboard-for-wp/

Auteursprofielen

16

• Onderaan een artikel: gegevens en (optioneel) koppelingen social media kanalen per auteur

• https://wordpress.org/plugins/author-bio-box/

Betaalmuren/ledenwebsites (zie artikel)

17

• Talloze mogelijkheden, een paar voorbeelden:

• http://www.s2member.com/ (basis gratis, Pro betaald, betaalmogelijkheden)

Betaalmuren/ledenwebsites

18

• Talloze mogelijkheden, een paar voorbeelden:

• https://wordpress.org/plugins/wp-members/

• https://wordpress.org/plugins/wordpress-access-control/

• http://www.cozmoslabs.com/wordpress-profile-builder/

• http://chrislema.com/comparing-wordpress-membership-plugins/ (een overzicht en vergelijking van een aantal plugins op dit gebied)

WordPress - deel 4

3. Social Media integratie

19

Social media integratie

20

• Algemene icons op website, links naar de gebruikte kanalen (open nieuw venster) - bijvoorbeeld Simple Social Icons

• Icons onderaan elk bericht/pagina om het artikel te liken of te delen (meestal voorzien van tellertjes) - bijvoorbeeld Simple Share Buttons Adder

• Plugins om social media kanalen te berichten over de publicatie van een nieuw bericht/pagina - bijvoorbeeld WP to Twitter

Social media integratie

21

• Lijst van Twitterberichten in widget - stukje code vanuit Twitter

website

eigen inhoud

brochures

filmpjes

presentaties

twitter

Facebook

LinkedIn

nieuwsbrief

Wat staat centraal?

je eigen website centraal!

eigen inhoud

brochures

filmpjes

presentaties

twitter

Facebook

LinkedIn

nieuwsbrief

Verkeer genereren naar centraal medium

WordPress - deel 4

4. Nieuwsbrieven d.m.v. MailChimp (*)

24

Wat is MailChimp?

25

• Een Amerikaans web-based e-mail marketing systeem

• een forse omgeving op zichzelf (vergt echt wel wat tijd)

• integratie met WordPress door middel van MailChimp plugin of stukje JavaScript code in een widget voor meer geavanceerde e-mail nieuwsbrief inschrijfformulier

Wat is MailChimp?

26

• Hoe kan het volledig geautomatiseerd werken?

• RSS feed van berichten op basis van bepaalde frequentie

Wat is MailChimp?

27

• MailChimp werkt met zogenaamde ‘tags’ die per bericht de content vanaf de website ophaalt

• *|RSSITEM:TITLE|* = de titel van elk artikel

• *|RSSITEM:CONTENT|* = de inhoud van elk artikel

Wat is MailChimp?

28

• Wat moet je dus doen (samenvattende aandachtspunten)

• account aanmaken in MailChimp

• een lijst van ontvangers (handmatig of via excel sheet) #toestemming?

• MailChimp plugin activeren en lijst kiezen, formulier in widget plaatsen

• een campagne maken op basis van RSS feed (voor geautomatiseerde nieuwsbrief), frequentie, tijd ontvangst instellen

• een template kiezen voor de vormgeving en inhoud plaatsen (tags)

• de campagne starten

WordPress - deel 4

5. Zoekmachine optimalisatie (SEO)

29

Zoekmachine optimalisatie met ‘yoast’ plugin

30

Zoekmachine optimalisatie (SEO)

31

Zoekmachine optimalisatie (SEO)

32

Zoekmachine optimalisatie (SEO)

33

Zoekmachine optimalisatie (SEO)

34

Zoekmachine optimalisatie - oefening

35

• Kies één van je eigen berichten op je werksite

• Probeer de SEO instellingen in te stellen voor:

• SEO titel (meestal gelijk aan titel van je bericht, met daarachter de naam van de website)

• je belangrijkste ‘focus’ zoekterm

• je meta omschrijving (meestal stukje van je inleiding)

• controleer je instellingen (na bijwerken) bij ‘Pagina Analyse’

WordPress - deel 4

5. Contactformulier(en)

36

Oefening: contactformulier met GravityForms

37

• Kies ‘nieuw formulier’

• Titel formulier

• Beschrijving formulier

Een contactformulier maken met GravityForms

38

Een contactformulier maken met GravityForms

39

Een contactformulier maken met GravityForms

40

Een contactformulier maken met GravityForms

41

• In je pagina plaatsen

• Kies ‘Add Form’

• Kies juiste formulier

• Kies ‘activeer Ajax’ (*)

• Zie code in pagina

• Testen

Oefening: contactformulier met GravityForms

42

WordPress - deel 4

5. Antispam d.m.v. Akismet

43

Akismet - anti SPAM, vereist een API key (gratis)

44

Akismet - anti SPAM, vereist een API key (gratis)

45

Akismet - anti SPAM, vereist een API key (gratis)

46

WordPress - deel 4

6. Sliders etc.

47

Sliders zijn een ‘mode’ artikel

48

• Slider plugins zijn doorgaans ‘groot’, vergen redelijk wat tijd om goed te gebruiken. Twee voorbeelden:

• Layer Slider WP - $17 via codecanyon.net

• Revolution Slider - $18 via codecanyon.net

• gebruik ze met mate en overdrijf niet met de animaties tussen de verschillende beelden in de slider

Layer Slider - screenshot

49

Revolution Slider - screenshot

50

WordPress - deel 4

7. Cookies

51

Cookies

52

• WordPress maakt gebruik van cookies

• alleen al het bewaren van inlog gegevens verloopt via cookies

• maak slechts melding dat je met respect voor privacy binnen je website gebruikt maakt via cookies

• download geen plugins op dit gebied met hinderlijke ‘toestemming’ pop-up schermpjes

WordPress - deel 4

8. Wat hebben we geleerd?

53

Samenvatting bereikte leerdoelen met 200 slides

54

• dashboard, inloggen gebruikers, instellingen

• berichten, pagina’s, reacties, categorieën, tags, spam, indeling homepage

• media, plaatsen, uitlijnen, vergroten/verkleinen, embedden, uitgelichte afb.

• soorten thema’s, sidebars, widgets, header, footer

• plug-ins, gericht op uitgevers

• conditionele content/menu’s

• basis SEO, Google Analytics, Formulier, Sliders, Cookies

WordPress is learning by doing: veel succes!

55

advies, ondersteuning, implementatie:!@peterluitpeter@luit.nltel.:06-20709846!algemene informatie WordPress trainingen: @inct