Inhoudsopgave Voorwoord .................................................................................... 5 Nieuwsbrief................................................................................... 5 Introductie Visual Steps™....................................................... 6 Wat heeft u nodig? ..................................................................... 6 De website bij het boek ............................................................ 7 Hoe werkt u met dit boek? ...................................................... 7 Uw voorkennis............................................................................. 8 Toets uw kennis .......................................................................... 8 Voor docenten ............................................................................. 8 De schermafbeeldingen .......................................................... 9 1. Beginnen met WordPress
11
1.1 Werken met WordPress .......................................................12 1.2 Nodig voor WordPress .........................................................14 1.3 Uw webruimte instellen bij een WordPress-provider ............15 1.4 Uw webruimte instellen bij een gewone provider .................24 1.5 WordPress downloaden .......................................................28 1.6 WordPress uitpakken ...........................................................30 1.7 Het configuratiebestand van WordPress aanpassen ...........33 1.8 FileZilla installeren en instellen ............................................38 1.9 WordPress in uw webruimte plaatsen ..................................46 1.10 WordPress installeren ........................................................49 1.11 De WordPress basiswebsite bekijken ................................52 1.12 Achtergrondinformatie ..............................................................56 1.13 Tips ..........................................................................................59
2. WordPress instellen
61
2.1 Inloggen bij WordPress ........................................................62 2.2 Kennismaken met het Dashboard ........................................64 2.3 Algemene instellingen opgeven ...........................................69 2.4 Schrijf- en leesinstellingen opgeven .....................................73 2.5 Discussie-instellingen opgeven ............................................74 2.6 Media-instellingen opgeven .................................................75 2.7 Privacyinstellingen opgeven .................................................76 2.8 Permalinkinstellingen opgeven ............................................78 2.9 Instellingen voor gebruikers opgeven...................................80 2.10 Gebruikers beheren ...........................................................84 2.11 Uitloggen bij WordPress .....................................................87 2.12 Achtergrondinformatie ..............................................................88
3. Werken met thema’s
89
3.1 Het standaard thema bekijken .............................................90 3.2 Een thema zoeken ...............................................................91 3.3 Een thema installeren ..........................................................97
3.4 Een thema wijzigen ............................................................100 3.5 Een thema verwijderen ......................................................101 3.6 Een thema instellen............................................................103 3.7 Een achtergrond instellen ..................................................106 3.8 De header aanpassen ........................................................108 3.9 Achtergrondinformatie ..............................................................114 3.10 Tips ........................................................................................115
4. Uw website vullen
117
4.1 Een nieuwe pagina maken .................................................118 4.2 Een titel toevoegen ............................................................120 4.3 Tekst toevoegen ................................................................121 4.4 Een hyperlink aan tekst toevoegen ....................................125 4.5 Een conceptpagina opslaan ...............................................128 4.6 Pagina-attributen opgeven .................................................129 4.7 Een pagina publiceren .......................................................133 4.8 De startpagina opgeven .....................................................135 4.9 Tekst bewerken ..................................................................137 4.10 Een pagina verwijderen....................................................138 4.11 Een afbeelding toevoegen aan de media bibliotheek .......141 4.12 Een afbeelding toevoegen aan een webpagina ...............146 4.13 Een afbeelding bewerken .................................................150 4.14 Werken met menu’s .........................................................152 4.15 Achtergrondinformatie ............................................................159 4.16 Tips ........................................................................................160
5. Extra onderdelen toevoegen
165
5.1 Een widget installeren ........................................................166 5.2 Werken met plugins ...........................................................170 5.3 Een plugin installeren .........................................................171 5.4 Achtergrondinformatie ..............................................................179 5.5 Tips ..........................................................................................180
6. Meer handige plugins
181
6.1 Een video toevoegen .........................................................182 6.2 Een formulier toevoegen ....................................................190 6.3 Een dropdown menu toevoegen ........................................196 6.4 Metatags toevoegen...........................................................202 6.5 Lettertypen aanpassen.......................................................204 6.6 Visual Steps-website en Nieuwsbrief .................................209 6.7 Achtergrondinformatie ..............................................................210 6.8 Tips ..........................................................................................211
Bijlagen A. Hoe doe ik dat ook alweer? ...........................................213 B. Oefenbestanden downloaden .......................................215 C. Index .......................................................................... 219
8
Hoe werkt u met dit boek? Dit boek is geschreven volgens de Visual Steps™-methode. De werkwijze is eenvoudig: u legt het boek naast uw computer en voert alle opdrachten stap voor stap direct op uw computer uit. Door de duidelijke instructies en de vele schermafbeeldingen weet u precies wat u moet doen. Door de opdrachten direct uit te voeren, leert u het snelste werken met de computer. In dit Visual Steps™-boek ziet u verschillende tekens. Die betekenen het volgende:
Handelingen Dit zijn de tekens die een handeling aangeven: De muis geeft aan dat u iets met de muis moet doen. Het toetsenbord betekent dat u iets moet typen op het toetsenbord. De hand geeft aan dat u hier iets anders moet doen, bijvoorbeeld de computer aanzetten, of een reeds bekende handeling uitvoeren. Naast deze handelingen wordt op sommige momenten extra hulp gegeven om met succes dit boek door te werken.
Hulp Extra hulp vindt u bij deze tekens: De pijl waarschuwt u voor iets. Bij de pleister vindt u hulp mocht er iets fout zijn gegaan. 1
Weet u niet meer hoe u een handeling uitvoert? Dan kunt u dit met behulp van de cijfers achter deze voetstapjes opzoeken achter in het boek in de bijlage Hoe doe ik dat ook alweer?
U vindt in dit boek ook veel algemene informatie en tips. Deze informatie staat in aparte kaders.
Extra informatie De kaders zijn aangeduid met de volgende tekens: Bij het boek vindt u extra achtergrondinformatie die u op uw gemak kunt doorlezen. Deze extra informatie is echter niet noodzakelijk om het boek door te kunnen werken. Bij een lamp vindt u een extra tip voor het gebruik van het programma.
117
4. Uw website vullen Als u een thema heeft geïnstalleerd, is al een aantal onderdelen ingevuld als voorbeeld. Naast de header staan er ook voorbeeldteksten, afbeeldingen, hyperlinks en soms nog andere onderdelen op de website bij het thema. Sommige thema’s hebben slechts een voorbeeldpagina, andere meerdere. Het handige van deze voorbeeldpagina’s is dat u direct kunt zien hoe een webpagina eruit ziet wat betreft indeling en opmaak. Een nadeel bij het maken van een gewone website is dat WordPress in de eerste plaats gericht is op het maken van weblogs. Dat is onder andere te zien aan het feit dat de meeste thema’s een voorbeeldpagina hebben met een bericht waarop gereageerd kan worden. Op een gewone webpagina zult u meestal alleen uw eigen tekst willen plaatsen. Om een gewone website te maken, moet u daarom eerst de voorbeeldpagina omzetten naar een statische pagina. Hierop voegt u dan tekst, afbeeldingen en hyperlinks toe. U kunt vervolgens extra nieuwe pagina’s toevoegen om uw website uit te breiden. Teksten, afbeeldingen en hyperlinks opgeven en wijzigen, doet u met behulp van formulieren. Door de invulvakken op het formulier naar uw wens in te vullen, kunt u aangeven hoe de verschillende onderdelen op een webpagina eruit komen te zien. Om alle pagina’s met elkaar te verbinden, kunt u gebruikmaken van een menu. In dit menu staan alle pagina’s van uw website, zodat een bezoeker snel naar een bepaalde pagina kan gaan. In dit hoofdstuk leert u: y y y y y y y
een nieuwe pagina maken en publiceren; tekst toevoegen en wijzigen; een hyperlink aan tekst toevoegen; de startpagina opgeven; een pagina bewerken en verwijderen; een afbeelding toevoegen en bewerken; werken met menu’s.
Let op! U kunt in dit hoofdstuk gebruikmaken van de oefenbestanden bij dit boek. In Bijlage B Oefenbestanden downloaden achter in het boek wordt beschreven hoe u de oefenbestanden naar de harde schijf van uw pc kopieert.
118
Basisgids Websites maken met WordPress
4.1 Een nieuwe pagina maken Om uw website te bouwen, moet u eerst inloggen bij WordPress: Open het inlogvenster bij WordPress Log in bij WordPress
10
8
U ziet het Dashboard van WordPress.
Tip Voorwerk bij een website Voordat u uw eigen website gaat maken, is het verstandig voor uzelf te bepalen wat u met de website wilt laten zien en voor welke doelgroep de website bedoeld is. U kunt op die manier al bijvoorbeeld een aantal teksten en afbeeldingen verzamelen die u op de website kunt plaatsen. Het is ook handig van tevoren te weten welke pagina’s u op uw website wilt hebben. U kunt daar dan rekening mee houden bij het bouwen van uw website. U gaat als eerste de homepagina of startpagina maken. Dit is de pagina die een bezoeker als eerste ziet wanneer hij uw website bezoekt. Het is ook de pagina die dient als startplaats voor de rest van de website. Gewoonlijk gebruikt u de homepagina als korte introductie van uw website. U heet de bezoekers welkom en vertelt ze op welke website ze terecht zijn gekomen. Bij het thema Twenty Eleven is de homepagina gericht op het bijhouden van een weblog. Dit houdt in dat u er actuele berichten op kan plaatsen en dat bezoekers daar gewoonlijk op kunnen reageren. Om te beginnen gaat u deze pagina vervangen door een statische pagina. Een statische pagina is in WordPress een pagina waarop niet voortdurend nieuwe berichten worden geplaatst. De tekst op deze pagina blijft gewoonlijk voor lange tijd hetzelfde en wordt daarom dus statisch genoemd. Het thema Twenty Eleven bevat al een statische pagina. U gaat deze bekijken: Klik op Klik op U ziet de statische pagina About: Op deze pagina kan gereageerd worden door bezoekers:
119
Hoofdstuk 4 Uw website vullen
U kunt een statische pagina openstellen voor reacties van bezoekers, maar gewoonlijk zult u dat niet doen. U kunt bij de discussie-instellingen opgeven of er reacties geplaatst mogen worden. Voor de voorbeeldwebsite schakelt u deze optie uit: Klik op
,
Plaats de aanwijzer op
Klik op
Het venster Instellingen/Reacties verschijnt: Klik het vinkje bij
weg
Sleep het schuifblok omlaag Onder op de pagina: Klik op
U gaat een nieuwe homepagina maken. Er bestaat echter al een homepagina in de voorbeeldwebsite, dit is een berichtenpagina. Deze gaat u later uitschakelen en wordt vervangen door de nieuwe homepagina. U maakt als volgt een nieuwe pagina: Plaats de aanwijzer op
Klik op
120
Basisgids Websites maken met WordPress
Mogelijk ziet u een melding: Klik op
U ziet het venster Nieuwe pagina toevoegen: Titelvak: Teksteditor: Publiceeropties: Eigenschappen voor de pagina:
Let op! Met de knop kunt u media, zoals afbeeldingen, vanaf uw computer toevoegen aan de pagina. Soms werkt deze procedure niet correct, omdat er een bepaalde map in de webruimte nog niet is aangemaakt. U kunt in dat geval op een andere manier media aan uw website toevoegen. U leest hier meer over in paragraaf 4.11 Een afbeelding toevoegen aan de media bibliotheek.
4.2 Een titel toevoegen Als eerste vult u de titel voor de pagina in. Het is verstandig deze titel beknopt te houden. Dit is vooral belangrijk als de titel ook in een menu moet worden geplaatst. U zorgt er dan voor dat de menu-optie die verwijst naar de pagina niet onhandelbaar lang is. Gebruik daarom bij voorkeur een titel bestaande uit maximaal twee woorden. De titel zal ook op de webpagina worden afgebeeld.
121
Hoofdstuk 4 Uw website vullen
De homepagina noemt u Home: Typ bij : Home Klik in de teksteditor
Het webadres van de pagina verschijnt automatisch bij : U heeft in paragraaf 2.8 Permalinkinstellingen opgeven al ingesteld hoe de permalink moet worden weergegeven.
Tip Permalink bewerken U kunt de automatisch ingestelde permalink aanpassen door te klikken op . U kunt dan het deel achter de domeinnaam aanpassen. Dit kan handig zijn als u toch een langere titel gebruikt voor uw webpagina. Deze kunt u dan inkorten bij de permalink. Houd er daarbij rekening mee dat u geen spaties en andere speciale tekens in de permalink mag gebruiken. Gebruik daarom alleen letters en getallen.
4.3 Tekst toevoegen De volgende stap is het plaatsen van een tekst op de webpagina. Hiervoor gebruikt u de editor, die grotendeels hetzelfde werkt als tekstverwerkingsprogramma’s, zoals Word: Tabbladen: Werkbalk: Tekstvak: Statusbalk:
122
Basisgids Websites maken met WordPress
U kunt bij de teksteditor kiezen tussen de weergave Wysiwyg (What You See Is What You Get) en HTML. De weergave Wysiwyg gebruikt u om tekst te typen zoals die ook zal worden weergegeven op de website. U ziet dus precies hoe de tekst er op de webpagina uit komt te zien. De weergave HTML is bedoeld voor het opgeven van tekst in de vorm van HTMLcode. Dat kan handig zijn als u heel precies wilt opgeven hoe de tekst eruit moet komen te zien. U moet hiervoor echter wel bekend zijn met HTML. Met behulp van de knoppen in de werkbalk kunt u de tekst bewerken: Tekst vet, cursief of doorgestreept afbeelden. Gewone of genummerde opsomming weergeven. Tekst weergeven als quote (citaat): tussen aanhalingstekens. Tekst links uitlijnen, centreren of rechts uitlijnen. Een hyperlink invoegen of bewerken in de tekst. Een hyperlink verwijderen uit de tekst. De hyperlink Meer lezen toevoegen. Hiermee kunt u verwijzen naar het vervolg van de tekst. Een spellingscontrole in een andere taal kiezen. Teksteditor op volledige schermgrootte weergeven. Extra opties. U kunt nog een extra werkbalk laten tonen. Deze wordt gootsteen (kitchen sink) genoemd: Klik op De extra werkbalk verschijnt:
