Bouw je eigen website

De Websitebouwman presenteert

“Bouw je eigen website”

met wordpress 4.2.2 versie 2.2 juni 2015

Docent: Vincent Bouwman In opdracht van: NVJ Academy

Bouw je eigen website

Woord vooraf Voor je ligt de handleiding om je eigen Wordpress site te maken. Het boekje is bedoeld als naslagwerk. De cursus is gericht op het ontwikkelen van je ervaring en gevoel voor Wordpress zodat je zelf je website kunt indelen, updaten, beheren en zelfs redelijk kunt vormgeven. Heel veel succes en plezier de komende weken bij het bouwen van je website! Met hartelijke groet, Vincent

3


Inhoud Docent: Vincent Bouwman

2

In opdracht van: NVJ Academy

2

Woord vooraf

3

1. Toegang tot je website 1.1 Je website bekijken

6

1.2 Inloggen op je website

6

2. Berichten en pagina’s 2.1 Een bericht maken

7

2.2 Een pagina maken

8

2.3 Berichten en pagina’s opmaken

9

2.4 Een link naar een andere pagina maken

11

2.5 Categorieën en tags

12

2.6 Categorieën beheren

13

3. Een menu maken 4. Afbeeldingen 4.1 Afbeeldingen toevoegen aan een bericht (of pagina)

16

4.2 Een afbeelding in een bericht aanpassen

18

4.3 Een galerij met afbeeldingen maken

19

4.4 De mediabibliotheek

20

5. Video’s toevoegen 5.1 Een Youtube video insluiten

21

6. De indeling en kleuren van je website aanpassen met Avada 6.1 De homepagina instellen

22

6.2 Thema Avada

23

6.3 De sidebar (zijbalk)

24

4


6.4 Widgets toevoegen aan je zijbalk

24

7. Instellingen 7.1 Reacties toelaten

25

7.2 Instellingen van één of meerdere berichten veranderen

26

7.3 De optie “snel bewerken” voor berichten

27

8. Thema’s 8.1 Een ander thema installeren

28

8.2 Aanbevolen thema’s

29

9. Plugins 9.1 Een plugin voor een contactformulier installeren

30

9.2 Een contactformulier invoegen

31

10. Lijst met handige plugins 11. Wordpress veilig en up-to-date houden 11.1 Inloggen op je Hosting / DirectAdmin omgeving

33

11.2 Installatron

34

11.3 Wordpress updaten

35

11.4 Een backup terugplaatsen

36

12. Emailadres aanmaken en instellen 12.1 Email checken

39

13. Vragen

5


1. Toegang tot je website 1.1 Je website bekijken Open je browser Ga naar www.jouwdomein.nl

1.2 Inloggen op je website Klik in je browser op een nieuw tabblad naar www.jouwdomein.nl/wp-admin

Vul je gebruikersnaam in Vul je wachtwoord in Klik op de knop inloggen

Na het klikken op inloggen verschijnt het wordpress dashboard:

6


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. Bijvoorbeeld “Hallo wereld!”

Klik op “Publiceren”

Klik op de knop “Bericht bekijken” om je bericht op de website te bekijken. Om terug te keren naar je dashboard, gebruik je de knop “Back” van je browser

7


2.2 Een pagina maken Klik links in het Dashboard op “Pagina’s”

En vervolgens op “Nieuwe pagina”

Vul een titel in en als berichttekst “Voorpagina”. Klik op “Publiceren”

Maak ook de volgende pagina’s. Alleen een titel intypen en klikken op ‘publiceren’ is voldoende:

Wie ben ik?

Wat doe ik?

Portfolio

Contact

8


2.3 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 “Toon/verberg extra werkbalk” om de opmaak werkbalk te tonen.

Wil je een groter invoervak? Dan zijn er twee mogelijkheden.

Sleep het driehoekje naar beneden.

Schrijven zonder afleiding. Klik op het icoontje “schrijven zonder afleidingsmodus”

9


Om even wat tekst te hebben om mee te stoeien, genereren we een paragraafje of wat tekst via de website nl.lipsum.com. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius mi et neque accumsan, sed fermentum justo condimentum. Duis varius sem eu consequat facilisis. Pellentesque at tortor sed felis porta semper. Pellentesque a elementum nibh, vel feugiat sapien. Pellentesque ac libero mollis odio elementum pharetra ac quis neque. Duis eu nibh accumsan, tempus orci ut, facilisis leo. Etiam varius, est egestas convallis tincidunt, enim diam laoreet tortor, et viverra velit neque sed neque. Open de link nl.lipsum.com in een nieuw tabblad. Kopieer de tekst en plak deze in je bericht.

Cursief

Quote

Onderstreept

Vet

Tekstkleur

Tekststijl Gecentreerd Opsomming

Klik rechtsboven op “Bijwerken” en bekijk het resultaat op je website.

10


2.4 Een link naar een andere pagina maken Selecteer in je bericht een paar woorden waaraan je de link wilt koppelen.

Klik op het icoontje “link invoegen/bewerken”

(De titel kan leegblijven omdat je al tekst hebt geselecteerd). Als je linkt naar een pagina buiten je eigen website, kies je altijd voor de optie “Open link in een nieuw venster/tab”. Wil je naar een bestaande pagina binnen je site linken kies dan voor “Of link naar een bestaand bericht of pagina”

11


2.5 Categorieën en tags Aan berichten kun je categorieën (onderwerpen) en tags (trefwoorden) koppelen.

Denk eens na in welke categorieën je jouw werk kunt onderverdelen. Je kunt een bericht toevoegen aan een (te maken) categorie. Dit kan ook altijd later nog. Geen zorgen dus!

Categorieën kunnen ook als menu-item worden toegevoegd aan de navigatiebalk van je website.

12


2.6 Categorieën beheren In een bericht kun je categorieën aanmaken, maar niet verwijderen of de naam ervan wijzigen. Dit doe je hier:

Denk eens na in welke categorieën je jouw werk kunt onderverdelen. Je kunt een bericht toevoegen aan een (te maken) categorie. Dit kan ook altijd later nog. Geen zorgen dus! Voor “Tags” is een zelfde beheeroptie aanwezig. Dit werkt hetzelfde als “Categorieën” maar gaat een niveau dieper. 13


3. Een menu maken Klik op “Weergave” en vervolgens op “Menu’s”

Vul een menunaam (bijv. Hoofdmenu) in en klik op “Menu aanmaken” Klik op de knop “Bericht bekijken” om je bericht op de website te bekijken. Om terug te keren naar je dashboard, gebruik je de knop “Back” van je browser Klik links bij pagina’s op “Toon alles”

Klik op “Alles selecteren”

Klik op “Aan menu toevoegen”

14


Vul een menunaam (bijv. Hoofdmenu) in en klik op “Menu aanmaken”

Klik op “menu opslaan”.

Om het menu toe te passen voor onze website moeten we nog één ding doen.

Ga naar het tabblad “Locaties beheren” en kies bij de themalocatie het menu dat je zojuist hebt aangemaakt.

Bekijk het resultaat op je website.

15


4. Afbeeldingen 4.1 Afbeeldingen 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 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”.

16


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”.

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. 17


4.2 Een afbeelding in een bericht aanpassen Als je in je bericht met je muis klikt op de afbeelding, verschijnen er twee icoontjes bewerken

verwijderen

Klik op het icoontje “Bewerken” en je krijgt het volgende scherm te zien.

Probeer een aantal instellingen uit

Bekijk het resultaat

Uitlijnen

Klik op bijwerken in dit venster.

Verkleinen

Je keert nu terug naar het bericht.

Onderschrift

Klik op “Bijwerken” rechts bovenin het scherm en bekijk het resultaat op je website. 18


4.3 Een galerij met afbeeldingen maken Een galerij maken 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.

Controleer vervolgens rechtsboven in het scherm de galerijinstellingen en klik op “galerij invoegen” Na het klikken op de knop ‘Galerij invoegen’ ben je weer terug in het testbericht. De galerij kun je -evenals bij een afbeelding- wijzigen door in het bericht te klikken op de galerij-afbeelding.

19


4.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”

20


5. Video’s toevoegen 5.1 Een Youtube video insluiten Ga voor de volgende opdrachten eerst naar www.youtube.com en zoek het filmpje op van je keuze. 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 html-code in.

Klik op ‘Bijwerken’ en bekijk het resultaat op je website.

21


6. De indeling en kleuren van je website aanpassen met Avada 6.1 De homepagina instellen De homepage kan ingesteld worden als Blog/Berichtenpagina

Statische pagina De instelling kan hier gewijzigd worden

Stel de pagina “Home” in als voorpagina. Stel “Voor elk artikel in de feed, toon” in op “Volledige tekst” Stel “Sitepagina’s tonen maximaal” in op 5 berichten. Klik op “wijzigingen opslaan” en bekijk het resultaat op de website.

22


6.2 Thema Avada In deze cursus werken we met het thema Avada. Hier is een apart menu-item aan gewijd in het adminpanel

Ga via “Avada” naar “Theme options”

Op de afbeelding zie je alle zaken die je kunt aanpassen. Experimenteer er op los, de wijzigingen zijn direct zichtbaar. Als je terug wilt naar de standaard instelling, klik je op “options reset” Als je klaar bent, druk je op “Save all changes”

Om kleurnummers exact te bepalen gebruik je het gratis programma JustColor Picker (windows). Typ maar in op Google. Inspiratie voor kleurenschema’s nodig? Kijk eens op https://color.adobe.com/nl/create/color-wheel

Avada heeft zelf een zeer goede online documentatie. Klik op “Online Documentation” voor een uitgebreide stap-voor-stap handleiding. 23


6.3 De sidebar (zijbalk) Via weergave -> sidebars, kun je zelf een sidebar aanmaken. Via de widgets (zie 6.4) kun je de sidebar vullen. Via Avada -> theme options -> sidebar kun je deze global toewijzen (global betekent: op al je pagina’s zichtbaar). Je kunt ook een sidebar voor slechts een pagina tonen. Dit doe je via de fusion page options, die je onderaan elke pagina vindt (pagina’s -> alle pagina’s)

6.4 Widgets toevoegen aan je 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 het secundaire widgetgebied 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.

24


7. Instellingen 7.1 Reacties toelaten Instellingen van de reactiemogelijkheid op berichten en pagina’s:

Controleer de instellingen en sla ze op Het is ook mogelijk dat je helemaal geen reacties wilt plaatsen op je website. We kunnen dat eenvoudig doen door een extra stukje software te installeren. Dit staat beter bekend als een plugin. Lees meer over het installeren van een plugin in hoofdstuk 9.

Zoek in de plugins naar “disable comments”, installeer deze plugin en activeer hem. Nu kun je reacties ofwel comments over de gehele site uitzetten.

25


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

26


7.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’. Dit werkt op dezelfde manier zoals hier is beschreven voor berichten.

27


8. Thema’s 8.1 Een ander thema installeren Een thema bepaalt de vormgeving van je site. Je kunt een ander thema installeren zonder dat je content kwijtraakt. 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 tot slot op “activeren”

Bonusopdracht: 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.

28


8.2 Aanbevolen thema’s Snel bewerken is erg handig om categorieën, tags, datum, titel etc. te wijzigen zonder het bericht te openen. Snel te begrijpen

Zonder programmeren makkelijk aan te passen via het Dashboard Goed documentatie Goed supportforum

Op www.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. LET OP: Pas ivm. spyware en virussen op met ander gratis thema’s die NIET via Wordpress.org worden aangeboden. Gratis via Wordpress.org Responsive Colorway Twentythirteen + plugin styling twentythirteen

Betaald: (Een betaald thema kost tussen de $15 en $50 dollar en biedt vaak meer mogelijkheden en betere support dan gratis thema’s)

www.themeforrest.com (check avada-thema!) www.cssigniter.com (De Websitebouwman heeft hier een abonnement lopen, dus er is een deal te maken!) Elegantthemes.com (ook hier heeft De Websitebouwman een abonnement)

29


9. Plugins 9.1 Een plugin voor een 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” Klik tot slot op “activeren”

Elke plugin werkt anders. Vaak staat er in de details welke functionaliteit aan je dashboard is toegevoegd. En waar. Neem even de tijd om dat te lezen en dan wijst het zich vaak vanzelf.

30


9.2 Een contactformulier invoegen Je voegt een contactformulier in op je website in plaats van een emailadres om jezelf te beschermen tegen spam. Ga naar plugins. Zoek en installeer de plugin “contact form 7” Ga in het dashboard naar de pagina ‘Contact’. Plak daarin de volgende code: [contact-form-7 id=”19” title=”Contactformulier 1”] Klik op ‘Bijwerken’ en bekijk het resultaat op je website.

Via bewerk (bij de plugin) kun je het formulier naar je eigen wensen aanpassen.

31


10. Lijst met handige plugins Social Media Facebook like box een box met daarin foto’s van mensen die je website geliked hebben Social Verspeid je publicaties via Facebook en Twitter Floating Social media icon drijvende icoontjes van al je sociale netwerken Twitter widget Pro toont jouw twitterberichten op je website Formulieren, layout etc Contact Form 7 (een contactformulier op je website) Shortcodes unlimited (tekst in kolommen plaatsen, highlighten, ideaal) Disable comments (reacties rigoreus uitschakelijk op je website) Photodropper (op zoek naar gratis foto’s voor bij een artikel) Jetpack (Van de makers van Wordpress zelf. 10 idealie plugins in één pakketje) Foto’s, layout, sliders, video Styles twentythirteen (biedt veel mogelijkheden om je de stijl 2013 van wordpress te tweaken) Metaslider (altijd al zo’n mooi bewegende slideshow op je site willen hebben?) LIghtbox Plus Color box (je site wordt donker en de foto springt eruit, mooi als je foto’s toont) Nextgen Gallery (fotogallerij) Resize image after upload (voorkomt grote bestanden op je website) Zoekmachine SEO by Yoast de plugin die laat zien hoe zoekmachinevriendelijk de pagina’s op jouw website zijn Google Analytics Dashboard for WP Bezoekerstatistieken op je wp-dashboard Beveiliging Wordfence virusscanner

32


11. Wordpress veilig en up-to-date houden Regelmatig verschijnt er een update van een plugin of zelfs van wordpress zelf. Om je site veilig te houden, raad ik je aan deze updates uit te voeren. Om verrassingen te voorkomen (je site doet het na een update plotseling niet meer) is het raadzaam om vooraf aan een update een backup van je website te maken. Dit doen we buiten wordpress om in je eigen Hosting/DirectAdmin omgeving.

11.1 Inloggen op je Hosting / DirectAdmin omgeving Ga naar www.jouwdomein.nl:2222 en druk op [Enter]

Vul je gebruikersnaam en wachtwoord in die je in je mail van De Websitebouwman hebt ontvangen. Klik op “Login”. Het DirectAdmin dashboard verschijnt.

33

Bouw je eigen website Aan de rechterkand zie je je webruimte en dataverkeer. Bij de cursus “Bouw je eigen Website” zit een jaar lang het WebhostingBasis pakket inbegrepen: 400MB webruimte en 1GB dataverkeer/maand. Ruim voldoende voor een gemiddelde website. Kijk voor prijzen op www.dewebsitebouwman.nl/hosting. Verder kun je via dit dashboard: - Installatron benaderen (wordpress site updaten, backupsmaken etc.) - Je email instellen - De mappenstructuur van je website bekijken, aanpassen etc. - De databaste benaderen

11.2 Installatron Via “view more” kom je in het installatron overzicht. Met deze applicatie kun je je wordpress website updaten en backuppen, je administrator-wachtwoord veranderen....en als iets fout is gegaan, een backup terugplaatsten.

34


11.3 Wordpress updaten Als er een Wordpress-update beschikbaar is, staat er een rood pijltje naast de websitetitel. Klik hierop.

Kies de laatste versie, en kies ook voor het updaten van de wordpress themes, en plugins. Standaard wordt er een backup gemaakt voor de update. Laat dit staan.

Druk tot slot op update.

35


Klaar is kees! Als je nu weer inlogt via je wp-admin, zul je zien dat je website up-to-date is.

11.4 Een backup terugplaatsen Soms gaat er wat fout. Het blijven computers! Gelukkig had je een backup gemaakt. Die gaan we nu terugplaatsen. Zie afbeelding.

Je komt in het overzicht van je backups. Om Webruimte te besparen is het raadzaam om niet meer dan 1 werkende backup te bewaren. (Een backup gooi je eenvoudig weg door op het x te drukken.)

Klik in het scherm dat je nu voor je ziet op “Continue” in de kolom “Restore to original location”

36


Je ziet nog een aan file’tjes in het rood staan. Deze zullen worden overschreven. Niks aan het handje. Scroll naar aan einde van de pagina en klik op:

37


12. Emailadres aanmaken en instellen Zorg dat je op het dashboard van DirectAdmin staat (zie 11.1 Inloggen op je Hosting / DirectAdmin omgeving) en kies vervolgens e-mailaccount.

Vul het voorvoegsel van je emailadres is (info, mail, voornaam etc), kies een password en the job is done. Klik op “Create”

38


12.1 Email checken

Om je mail te checken gebruik je de email knop in je dashboard. Je kunt ook direct in je browser www.jouwdomein.nl/roundcube Het volgende scherm wordt geopend

Vul je emailadres in en het wachtwoord wat je hebt aangemaakt en je bent binnen! Roundcube werkt ongeveer zoals andere emailprogramma’s. Verdere uitleg valt buiten de scope van deze cursus.

39


13. Vragen Natuurlijk zal je af en toe worstelen met een onderwerp wat niet direct lukt. Aarzel dan niet om even contact met De Websitebouwman op te nemen. Vaak kan ik je binnen een paar minuten verder helpen.

Bel me via 06-1468 3290 of stuur een mail naar [email protected]

40

Bouw je eigen website

Recommend Documents