De Wordpress Workshop
Bekijk voordat je begint de
Wordpress instructievideo (4 minuten) op
www.dewordpresstraining.nl en je weet met welk Wordpress thema en welke Wordpress plugin je nodig hebt bij deze instructie.
De Wordpress Workshop Een opleiding van: Inhoud 1. Toegang tot de website .................................................................................................................................. 3 1.1.
Website bekijken ................................................................................................................................... 3
1.2.
Inloggen ................................................................................................................................................. 3
2.
Berichten en pagina’s ..................................................................................................................................... 4 2.1.
Een bericht maken ................................................................................................................................. 4
1.1.
Een pagina maken ................................................................................................................................. 5
1.2.
Berichten en pagina’s opmaken ............................................................................................................ 6
1.3.
Een link naar een andere pagina maken ............................................................................................... 8
1.4.
Categorieën en tags ............................................................................................................................... 9
2. 3.
4.
Een menu maken: .................................................................................................................................... 11 Afbeeldingen ................................................................................................................................................ 13
3.1.
Afbeelding toevoegen aan een bericht (of pagina) ............................................................................. 13
3.2.
Een afbeelding in een bericht aanpassen ............................................................................................ 15
3.3.
Een galerij met afbeeldingen maken ................................................................................................... 16
3.4.
De mediabibliotheek ........................................................................................................................... 18
Video’s toevoegen ........................................................................................................................................ 19 4.1.
5.
6.
7.
8.
9.
Youtube video insluiten (‘embedden’) ................................................................................................ 19
Indeling en kleuren van de website aanpassen ............................................................................................ 20 5.1.
De homepage instellen ........................................................................................................................ 20
5.2.
De achtergrondkleur aanpassen .......................................................................................................... 21
5.3.
De kleur van de menubalk aanpassen ................................................................................................. 22
5.4.
De headerafbeelding en de koptekst van de site wijzigen .................................................................. 23
5.5.
De sidebar (zijbalk) .............................................................................................................................. 24
5.6.
Widget toevoegen aan de zijbalk ........................................................................................................ 25
Instellingen ................................................................................................................................................... 26 6.1.
Reacties toelaten ................................................................................................................................. 26
6.2.
Instellingen van één of meerdere berichten veranderen .................................................................... 27
6.3.
De optie ‘Snel bewerken’ voor berichten ............................................................................................ 28
Thema’s ........................................................................................................................................................ 29 7.1.
Een ander thema installeren ............................................................................................................... 29
7.2.
Aanbevolen thema’s ............................................................................................................................ 30
Plugins .......................................................................................................................................................... 31 8.1.
Plugin voor contactformulier installeren ............................................................................................. 31
8.2.
Contactformulier invoegen .................................................................................................................. 32
Vragen? ........................................................................................................................................................ 34
Pagina 2 van 34
De Wordpress Workshop Een opleiding van:
Toegang tot de website 1.1. Website bekijken
Open je browser. Ga naar: www.[jouw domeinnaam].nl
1.2. Inloggen
Klik in je browser op een nieuw tabblad. Gan naar www.[jouw domeinnaam].nl/wp-admin Vul je gebruikersnaam in. Voer je wachtwoord in. Klik op de knop ‘Inloggen’.
Na het klikken op ‘inloggen’ verschijnt het Wordpress Dashboard:
Pagina 3 van 34
De Wordpress Workshop Een opleiding van:
2. Berichten en pagina’s 2.1. Een bericht maken
Klik links in het Dashboard op ‘Berichten’ En vervolgens op ‘Nieuw bericht’:
Vul een titel in en als berichttekst bijvoorbeeld: “Dit is mijn eerste bericht”. Klik op ‘Publiceren’:
Klik op de knop ‘Bericht bekijken’ om het bericht op je website te bekijken.
Klik op de ‘back’-knop van je browser om terug te keren naar het Dashboard.
Pagina 4 van 34
De Wordpress Workshop Een opleiding van:
1.1. Een pagina maken
Klik links in het Dashboard op ‘Pagina’s’ En vervolgens op ‘Nieuwe pagina’:
Vul een titel in en als berichttekst “Dit is mijn eerste pagina”.
Klik op ‘Publiceren’:
Maak ook de volgende pagina’s. Alleen een titel intypen en klikken op ‘publiceren’ is voldoende:
Start Tips Voor wie? Diensten Contact
Pagina 5 van 34
De Wordpress Workshop Een opleiding van:
1.2. Berichten en pagina’s opmaken
Klik links in het menu op ‘Berichten’. Je ziet nu een overzicht van alle berichten. Open je testbericht door op de titel te klikken. Klik op het icoontje ‘Gootsteen tonen/verbergen’ om alle opmaakknoppen te tonen:
Vergroot het invoervak door de rechter onderhoek naar beneden te slepen:
Pagina 6 van 34
De Wordpress Workshop Een opleiding van:
Kopieer deze tekst en plak het in je bericht: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit, ipsum vitae laoreet pretium, augue felis dictum tellus, et semper justo erat sit amet elit. Morbi pulvinar tristique odio ac elementum. Maecenas lacinia, erat id viverra sodales, felis justo porttitor velit, eu accumsan diam ante ut purus. Vestibulum pulvinar dapibus lorem quis euismod. Donec pulvinar sodales dapibus. Praesent at risus quis odio commodo condimentum a vel tortor. Aliquam bibendum neque vel arcu lacinia porttitor suscipit libero sollicitudin. Nam condimentum quam eget risus congue et sagittis sem eleifend. Nullam auctor ipsum non nisl vehicula ac imperdiet metus ornare. Vestibulum tincidunt, lorem sed auctor sodales, dui nunc eleifend mi, non rhoncus augue lectus in nulla. Curabitur ultricies mollis vehicula. Ut a urna quam, mattis viverra tortor. Donec venenatis iaculis vehicula. Suspendisse dignissim venenatis arcu. Nullam fringilla tempor faucibus. Nullam ligula nisl, ultrices ut fermentum nec, interdum sit amet ipsum. Maecenas nec mauris odio, vitae scelerisque metus. Maecenas id turpis tortor, vel rutrum nibh. Fusce suscipit dapibus est a lobortis. In et sapien ligula, vestibulum dictum mi. Integer urna sem, pretium quis porttitor a, semper eget diam. Vestibulum hendrerit feugiat quam at adipiscing. Donec in aliquet nibh. In neque nisi, vestibulum ac mollis in, pulvinar sit amet ante. Nunc molestie, nisl at bibendum consequat, magna mi placerat nulla, eu vulputate ante risus sed neque. Aliquam non sem metus. Proin tincidunt cursus tincidunt. Maecenas dui neque, tincidunt eget eleifend at, tempor in mauris. In et quam nec lectus accumsan aliquet. Cras molestie metus eros. Nam sollicitudin facilisis leo eu pellentesque. Aenean ultrices viverra justo, sed ultrices leo malesuada tristique. Maecenas lacus neque, volutpat sit amet dictum in, consectetur sodales elit. Aenean eros nunc, semper consectetur laoreet id, tempus in neque. Suspendisse in urna risus. Maecenas auctor fringilla justo, eu semper ante molestie sed. Nunc enim justo, sollicitudin sodales lacinia hendrerit, sollicitudin id arcu.
Probeer vervolgens deze opmaakmogelijkheden uit:
Klik rechtsboven op ‘Bijwerken en bekijk de pagina op je website.
Pagina 7 van 34
De Wordpress Workshop Een opleiding van:
1.3. Een link naar een andere pagina maken
Selecteer in je bericht een paar woorden waar aan je de link wilt koppelen. Klik op het knopje ‘link invoegen/bewerken’:
Plak of type de URL in van de pagina waarnaar je wilt linken:
(de titel kan leegblijven omdat je al een stukje tekst heb geselecteerd waaraan je de link wilt koppelen).
Pagina 8 van 34
De Wordpress Workshop Een opleiding van:
1.4. Categorieën en tags
Aan berichten kun je categorieën (onderwerpen) en tags (trefwoorden) koppelen:
Maak enkele categorieën en tags aan en koppel deze aan je bericht.
Categorieën kunnen ook als menu-item worden toegevoegd aan de navigatiebalk van je website:
Pagina 9 van 34
De Wordpress Workshop Een opleiding van:
Categorieën beheren kan hier:
Voeg een categorie toe aan je menu.
Voor tags is soortgelijke beheeroptie aanwezig:
Pagina 10 van 34
De Wordpress Workshop Een opleiding van:
2. Een menu maken:
Klik op ‘Weergave ‘en vervolgens op ‘Menu’s’ Vul een menunaam (bijv. Menu 1) in en klik op ‘Menu aanmaken’
Klik links bij pagina’s op ‘Toon alles’ Klik op ‘Alles selecteren’ Klik op ‘Aan menu toevoegen’
Sleep de menu-items op de gewenste plek:
Pagina 11 van 34
De Wordpress Workshop Een opleiding van:
Klik op ‘menu opslaan’. Ga naar ‘Thema locaties’ en kies ‘Menu 1’ als Primair menu en klik op opslaan.
Bekijk het resultaat op je website.
Pagina 12 van 34
De Wordpress Workshop Een opleiding van:
3. Afbeeldingen 3.1. Afbeelding toevoegen aan een bericht (of pagina) Open het testbericht en voeg via de volgende stappen een afbeelding toe:
Klik in de tekst op de plaats waar je het plaatje wilt invoegen.
Klik op de knop ‘Media toevoegen’
Je komt dan in de Mediabibliotheek:
Klik op ‘Bestanden uploaden’ om een afbeelding aan je website toe te voegen. Sleep het plaatje vanuit een mapje op je computer in het venster of klik op ‘Bestand selecteren’:
Het is op deze manier ook mogelijk om meerder afbeeldingen tegelijk toe te voegen.
Pas de instellingen van de afbeelding naar wens aan en klik op ‘Invoegen in bericht’.
Pagina 13 van 34
De Wordpress Workshop Een opleiding van:
De tekst voor de bijlagepagina van de afbeelding die je eventueel kunt inschakelen via ‘Link naar’ kun je invoeren via Dashboard – Media. Zie hoofdstuk ‘De mediabibliotheek’.
Klik in het bericht op ‘bijwerken’ en bekijk het resultaat op je website.
Pagina 14 van 34
De Wordpress Workshop Een opleiding van:
3.2. Een afbeelding in een bericht aanpassen Als je in je bericht met je muis klikt op de afbeelding, verschijnen er twee knopjes:
Klik op het knopje ‘wijzigen’ en je krijgt dit scherm te zien:
Probeer een aantal instellingen uit:
Uitlijnen Verkleinen Onderschrift toevoegen
Bekijk het resultaat:
Klik op bijwerken in dit venster. Je keert nu terug naar het bericht. Klik op ‘Bijwerken’ rechts bovenin het scherm en bekijk het resultaat op je website.
Pagina 15 van 34
De Wordpress Workshop Een opleiding van:
3.3. Een galerij met afbeeldingen maken Maak een galerij:
Open het testbericht. Klik op ‘Media uploaden’ en plaats een aantal afbeeldingen vanaf je computer in de mediabibliotheek. De uitgebreide instructie vind je in het voorgaande hoofdstuk. Klik op ‘Galerij aanmaken’ Controleer of de juiste afbeeldingen aangevinkt zijn. Door op een afbeelding te klikken kun je het vinkje in- of uitschakelen. Onderin het scherm zie je in het klein de afbeeldingen die je hebt geselecteerd. Klik rechtsonder op ‘Een nieuwe galerij aanmaken’.
Controleer vervolgens rechtsboven in het scherm de galerij-instellingen en klik op ‘galerij invoegen’:
Pagina 16 van 34
De Wordpress Workshop Een opleiding van:
Na het klikken op de knop ‘Galerij invoegen’ ben je weer terug in het testbericht.
Klik op ‘Bijwerken’ en bekijk het resultaat op je website.
De galerij kun je wijzigen door in het bericht te klikken op de galerij-afbeelding:
Pagina 17 van 34
De Wordpress Workshop Een opleiding van:
3.4. De mediabibliotheek Buiten de berichten en pagina’s om zijn de afbeeldingen en bestanden ook te beheren via:
Dashboard – Media.
Via de mediabibliotheek kun je de teksten invoeren van de bijlagepagina van de afbeelding. Het activeren van de bijlagepagina, die dan wordt getoond als een bezoeker klikt op een afbeelding, doe je op het moment dat je de afbeelding invoegt in het bericht. Via ‘Weergave-instellingen bijlagen’ (zie hoofdstuk ‘Afbeeldingen toevoegen aan bericht’) Via de mediabibliotheek kun je de ook de afbeelding aanpassen:
Spiegelen, draaien, bijsnijden, verkleinen. Deze wijzigingen werken niet door in reeds geplaatste afzonderlijke afbeeldingen. Afbeeldingen in galerijen worden wel gewijzigd. De afbeelding is overigens altijd in de oorspronkelijke staat te herstellen.
Let op: om de wijziging op te slaan klik je eerst op ‘opslaan’ en vervolgens op ‘bijwerken’
Pagina 18 van 34
De Wordpress Workshop Een opleiding van:
4. Video’s toevoegen 4.1. Youtube video insluiten (‘embedden’)
Klik in Youtube onder het filmpje op ‘Delen’ en vervolgens daaronder op ‘Insluiten’. Klik daaronder in het vak met de html-code en kopieer dit vervolgens met [CTRL-C].
Ga naar je bericht in Wordpress, kies het tabblad ‘Tekst’ en plak daar met [CTRL-V] de htmlcode in.
Klik op ‘Bijwerken’ en bekijk het resultaat op je website.
Pagina 19 van 34
De Wordpress Workshop Een opleiding van:
5. Indeling en kleuren van de website aanpassen 5.1. De homepage instellen De homepage kan ingesteld worden als:
Blog/Berichtenpagina Statische pagina
De instelling kan hier gewijzigd worden:
Stel de pagina ‘Start’ in als homepage. Stel ‘Voor elk artikel in de feed, toon’ in op ‘Samenvatting’ Stel ‘Sitepagina’s tonen maximaal’ in op 5 berichten.
Klik op ‘wijzigingen opslaan’ en bekijk het resultaat op de website.
Pagina 20 van 34
De Wordpress Workshop Een opleiding van:
5.2. De achtergrondkleur aanpassen Ga via ‘Weergave’ naar ‘Thema’s’ en klik op ‘Aanpassen’:
De kleur van de achtergrond en de links:
Pas de achtergrondkleur en de linkkleur aan. Klik op Opslaan & publiceren.
Pagina 21 van 34
De Wordpress Workshop Een opleiding van:
5.3. De kleur van de menubalk aanpassen
Scroll een stukje naar beneden en wijzig de ‘Menu Background Color’ (= kleur van de menubalk) in de gewenste kleur.
Klik onderaan de pagina op ‘Wijzingen opslaan’ en bekijk het resultaat op de website.
Pagina 22 van 34
De Wordpress Workshop Een opleiding van:
5.4. De headerafbeelding en de koptekst van de site wijzigen
Als de titel al in je headerafbeelding zit, dan kun je de kopteksten (site titel en ondertitel) uitschakelen:
1. Schakel de koptekst uit (vinkje uitschakelen bij ‘Laat header tekst en je afbeelding zien’). De headerafbeelding kan een afbeelding naar keuze bevatten (1000 x 175 pixels). 2. Vervang de headerafbeelding. 3. Klik op ‘Wijzigingen opslaan’ en bekijk het resultaat op de website.
Pagina 23 van 34
De Wordpress Workshop Een opleiding van:
5.5. De sidebar (zijbalk) De sidebar kan links of rechts geplaatst worden:
Bij berichten:
Berichten hebben in het thema Twenty Eleven. allemaal een sidebar, of allemaal niet. Sidebar inschakelen voor alle berichten, klik op: Weergave- Theme Extensions – Widget sidebar – “Enable the widget sidebar on single-post pages”: vinkje moet ingeschakeld zijn.
Bij pagina’s:
Pagina’s hebben geen sidebar bij de instelling (sjabloon): ‘Standaard template’. Pagina’s hebben wel een sidebar bij de instelling (sjabloon): ‘Sidebar template’ Let op: bij Weergave - Theme Extensions – Widget sidebar – “Enable the widget sidebar on pages”: vinkje moet uitgeschakeld zijn.
Bepaal of je de sidebar wilt tonen en pas de instellingen zonodig aan.
Pagina 24 van 34
De Wordpress Workshop Een opleiding van:
5.6. Widget toevoegen aan de zijbalk Widgets zijn ‘blokjes’ die je kunt plaatsen in de zijbalk van je website. Afhankelijk van het thema dat je gebruikt kun je widgets ook plaatsen in de voettekst of kop van je website. De beschikbare widgets worden links getoond en je kunt ze slepen naar de rechterkolom ‘Hoofd sidebar’ om de widget te tonen op je website.
Plaats de volgende widgets in de Hoofd sidebar:
Zoeken Categorieën
Klik de widgets open om de opties te bekijken, pas naar wens aan en klik op ‘opslaan’:
Bekijk het resultaat op je website.
Pagina 25 van 34
De Wordpress Workshop Een opleiding van:
6. Instellingen 6.1. Reacties toelaten Instellingen van de reactiemogelijkheid op berichten en pagina’s:
Controleer de instellingen en sla ze op.
Pagina 26 van 34
De Wordpress Workshop Een opleiding van:
6.2. Instellingen van één of meerdere berichten veranderen Het wijzigen van de instellingen van een bericht (of pagina), in dit geval de reactiemogelijkheid, gaat als volgt:
Zet het een vinkje voor het testbericht dat je eerder hebt aangemaakt. Kies ‘Bewerken’ en daarna ‘Uitvoeren’. Het bewerkingscherm is nu geopend. Kies bij de ‘Reacties’ voor de gewenste optie. Klik tot slot op : ‘Bijwerken’.
Door vinkjes te zetten bij meerdere berichten, kun je de instellingen van alle geselecteerde berichten in 1x uitvoeren. Dit is handig als je bijvoorbeeld in 1x meerdere berichten wilt voorzien van een nieuwe categorie.
Pagina 27 van 34
De Wordpress Workshop Een opleiding van:
6.3. De optie ‘Snel bewerken’ voor berichten Snel bewerken is erg handig om categorieën, tags, datum, titel etc. te wijzigen zonder het bericht te openen. Beweeg in het berichtenoverzicht met je muis over een bericht en klik op ‘Snel bewerken’.
Van het geselecteerde bericht kun je nu de volgende instellingen wijzigen:
Zet het vinkje aan bij ‘Dit bericht sticky maken’.
‘Sticky’ is een specifieke berichteigenschap. Een ‘sticky’-bericht blijft in het nieuwsoverzicht op je website altijd bovenaan staan. Hier kun je bijvoorbeeld je vast introductietekst zetten. De andere berichten staan eronder in chronologische volgorde onder. (Van pagina’s kun je ook een aantal instellingen aanpassen via ‘Snel bewerken’.)
Pagina 28 van 34
De Wordpress Workshop Een opleiding van:
7. Thema’s 7.1. Een ander thema installeren Ga via Weergave – Thema’s en klik vervolgens op ‘Thema’s installeren’.
In het volgende scherm kun je zoeken op trefwoord en/of op criteria: Klik op zoeken en klik daarna onder het gewenste thema op ‘Nu installeren’.
Daarna voer je de verbindingsgegevens in (FTP inlog en wachtwoord) en klik je op ‘Doorgaan’. Klik tot slot op ‘activeren’:
Ga in het dashboard naar: Weergave – Thema’s en activeer bij “Beschikbare thema’s” het thema “Responsive” en probeer uit te vinden hoe het werkt.
Pagina 29 van 34
De Wordpress Workshop Een opleiding van:
7.2. Aanbevolen thema’s Criteria:
Snel te begrijpen. Zonder programmeren makkelijk aan te passen via het Dashboard. Snelcodes voor kolommen, knoppen en opmaak. Goed documentatie. Goed supportforum.
Op ww.wordpress.org kun je zeer veel thema’s en plugins vinden. Via het dashboard van je website kun je ze rechtstreeks toevoegen aan je site. Pas ivm. spyware en virussen op met ander gratis thema’s die NIET via Wordpress.org worden aangeboden. Gratis via Wordpress.org:
Responsive Colorway Twenty Eleven + plugin Twenty Eleven theme extensions
Betaald:
Mysitemyway.com Woothemes.com ElegantThemes.com
Pagina 30 van 34
De Wordpress Workshop Een opleiding van:
8. Plugins 8.1. Plugin voor contactformulier installeren Ga in het Dashboard naar ‘Plugins’ en klik op ‘Nieuwe plugin’:
Vervolgens kun je plugins zoeken op trefwoord en de details bekijken en de plugin naar wens installeren via ‘Nu installeren’:
Daarna voer je de verbindingsgegevens in (FTP inlog en wachtwoord) en klik je op ‘Doorgaan’. Waarna de installatie wordt uitgevoerd. Klik tot slot op ‘activeren’
Pagina 31 van 34
De Wordpress Workshop Een opleiding van:
8.2. Contactformulier invoegen
Ga in het dashboard naar de pagina ‘Contact’. Plak daarin de volgende code: [si-contact-form form='1']
Klik op ‘Bijwerken’ en bekijk het resultaat op je website.
Ga weer naar het dashboard en bekijk via Plugins – FS Contac Form Options de instellingen van deze plugin.
Scroll een stukje naar beneden en pas de welkomstboodschap aan en het e-mailadres van de ontvanger (= jouw mailadres):
Pagina 32 van 34
De Wordpress Workshop Een opleiding van:
Scroll een flink stuk naar beneden en schakel de volgende instelling uit:
Klik op ‘Update Opties’ en bekijk het resultaat op de contactpagina.
Pagina 33 van 34
De Wordpress Workshop Een opleiding van:
9. Vragen? Neem gerust contact met me op via de onderstaande gegevens: Martijn Baltes – Vlot & Goed, meer bereiken met je website
[email protected] www.vlot-en-goed.nl 06 28 49 85 58
Regelmatig per e-mail een nieuwe tip ontvangen voor je website? Klik dan hier om je in te schrijven.
Pagina 34 van 34
