Een website omzetten naar WordPress

1

Een website omzetten naar WordPress Er zijn talloze programma’s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt besproken hoe u een website kunt maken met WordPress. Dit PDF-bestand is bedoeld voor mensen die al eerder een website hebben gemaakt, bijvoorbeeld met het webbouwprogramma Web Easy, en deze willen gebruiken en aanpassen in WordPress. Omdat het niet mogelijk is een eerder gemaakte website direct te gebruiken (importeren) in WordPress, moet u uw bestaande website stap voor stap opnieuw opzetten in WordPress. U leest in dit PDF-bestand hoe u dit het snelste en gemakkelijkste doet aan de hand van uw bestaande website. U kunt het omzetten ook meteen gebruiken om uw website eventueel opnieuw op te maken. Bijvoorbeeld door andere kleuren te gebruiken of een andere indeling van de website te maken. Daarnaast kunt u teksten nog eens kritisch bekijken en eventueel afbeeldingen wijzigen.

Let op! Niet alle onderdelen van uw oude website zijn exact over te zetten naar een website in WordPress. Soms moet u van een alternatief gebruikmaken. In WordPress wordt bijvoorbeeld veel gebruikgemaakt van plugins.

Let op! In dit PDF-bestand wordt ervan uitgegaan dat u beschikt over basiskennis computervaardigheden wat betreft het bouwen van een website. Indien u niet weet hoe u een handeling uitvoert, kunt u de Basisgids Websites maken met WordPress of de titel Websites maken met WordPress voor senioren als naslagwerk gebruiken. Bij het omzetten van uw website wordt verwezen naar de betreffende hoofdstukken in het boek die u kunt gebruiken. Inhoudsopgave 1. Uw website inventariseren 2. Uw website omzetten

2

Een website omzetten naar WordPress

1 Uw website inventariseren Voordat u uw website gaat omzetten in WordPress is het verstandig eerst te inventariseren wat er allemaal moet gebeuren en wat u daarvoor nodig heeft. Zo is het verstandig vast te stellen uit welke pagina’s de website bestaat en welke teksten en afbeeldingen er nodig zijn. Door dit van te voren goed op een rijtje te zetten, spaart u werk uit bij het omzetten van de website. Voordat u de inventarisatie maakt, is het handig eerst de huidige website af te drukken. Dan kunt u op papier en per webpagina aantekeningen maken. U drukt als volgt een website af: Open uw website in uw internetbrowser, bijvoorbeeld Internet Explorer Maak het venster van de internetbrowser schermvullend Zet uw printer aan U ziet uw website in het venster:

Druk op Klik op Klik op

Het venster Afdrukken verschijnt: Klik bij op de gewenste printer Klik op

© 2012 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij de boeken over WordPress


De webpagina wordt afgedrukt. Open de volgende pagina van de website Druk de pagina af Herhaal dit voor alle webpagina’s

Hieronder ziet u de punten waar u op moet letten bij de inventarisatie:

y Uit welke pagina’s bestaat de website? Zet de namen van de webpagina’s onder elkaar op papier. Vergeet niet ook de pagina’s te vermelden die niet direct vanuit het menu te bereiken zijn, maar alleen vanaf een bepaalde pagina. Zoals een formulier dat alleen vanaf de contactpagina kan worden geopend. Zet ook bij de pagina’s of ze in het menu worden vermeld of alleen op een bepaalde pagina: Voorbeeld Home

Menu

Mijn hobby’s

Menu

Links

Menu

Contact

Menu

Formulier

Contact

Tip Website vernieuwen Dit is een goed moment om te kijken of er nieuwe pagina’s nodig zijn voor de website of dat bestaande pagina’s verwijderd kunnen worden.


3

4


y Wat is de grootte van de website? In een programma als Web Easy werd een statische website gebouwd. Dit houdt in dat de website een vaste breedte en hoogte heeft. Afhankelijk van de ingestelde resolutie van het beeldscherm van de bezoeker wordt een website daardoor mogelijk slechts gedeeltelijk weergegeven of juist te klein in beeld. In WordPress wordt gebruikgemaakt van sjablonen als basis voor een website. Deze sjablonen zijn variabel en passen zich automatisch aan de ingestelde resolutie van het beeldscherm van de bezoeker aan. Daardoor hoeft u geen grootte voor de website in te stellen in WordPress.

y Wat zijn de gebruikte lettertypen en andere lettereigenschappen? Als u uw website in WordPress zoveel mogelijk op uw bestaande website wilt laten lijken, wilt u misschien ook dezelfde lettertypen en andere lettereigenschappen voor de gewone tekst en de koppen gebruiken. Hoogstwaarschijnlijk zult u niet meer uit uw hoofd weten welke lettertypen u gebruikt heeft.

Let op! In WordPress gebruiken sjablonen standaard lettertypen die bij dat sjabloon horen. Soms kunt u deze na het installeren van het sjabloon al aanpassen. In andere gevallen moet u een speciale plugin downloaden om de lettertypen aan te kunnen passen. In Hoofdstuk 5 Extra onderdelen toevoegen leest u hoe u plugins kunt installeren. Er zijn verschillende mogelijkheden om te zien welke lettertypen zijn gebruikt voor een website. Eén daarvan is een tekstverwerkingsprogramma zoals Word te gebruiken. Als het programma Word niet op uw computer staat, kunt u ook gebruikmaken van de HTML-code. Op pagina 6 leest u hoe u dit doet. U kunt als volgt de teksteigenschappen bekijken in Word: Open Word Open het venster van uw internetbrowser U ziet uw website in het venster: Selecteer de tekst waarvan u de eigenschappen wilt weten



Let op! Selecteer alleen dezelfde soort tekst per keer, niet allerlei verschillende soorten tekst tegelijk. Zo kunt u per soort tekst de eigenschappen bepalen.

Druk op Klik op Klik op

Ga naar het venster van Word

Druk op

+

De tekst is ingeplakt:

U kunt nu de eigenschappen van de tekst bekijken: Rechtsklik op de tekst Klik op


5

6


Het venster Lettertype wordt geopend: Hierin staan de eigenschappen van de tekst: Noteer de eigenschappen Klik op

Op dezelfde manier kunt u de eigenschappen van de andere teksten op de website achterhalen.

Let op! Als voor uw website oorspronkelijk een lettertype is gebruikt dat niet op de computer staat waarop u de website bekijkt, zal er een ander lettertype worden weergegeven. Als u geen Word heeft om de eigenschappen van teksten te achterhalen, kunt u de HTML-code van de website bekijken: U ziet uw website in het venster: Rechtsklik op de webpagina Klik op



De HTML-code van de webpagina wordt zichtbaar:

Deze HTML-code ziet er wat cryptisch uit voor iemand zonder kennis van HTML. U gaat in de HTML-code alleen gegevens opzoeken. U gaat geen aanpassingen doorvoeren. U kunt nu gaan zoeken naar de gebruikte lettertypen. Hiervoor zoekt u in de HTMLcode op de tekst ‘Font’: Klik op Klik op

U ziet het venster Zoeken: Typ bij font

:

Klik op


7

8


U ziet nu de eerste HTMLregels met de lettertypeeigenschappen: : letterkleur : lettertype : lettergrootte

In het venster Zoeken: Klik op

Let op! Bij sommige websites wordt informatie over de gebruikte lettertypen niet bij iedere webpagina apart opgeslagen, maar centraal in een bestand. Dit bestand is herkenbaar aan de extensie .CSS. U kunt dan de bovenstaande procedure gebruiken bij het zoeken in het CSS-bestand. Het is soms moeilijk om in website-bestanden te zien welk lettertype precies bij welke tekst hoort. Daarom kunt u de eigenschappen vermeld in de HTML-code alleen als algemene indicatie voor de teksten gebruiken. U kunt de gegevens die bij elkaar horen (deze staan achter of onder elkaar) verzamelen, zodat u ze later kunt uitproberen en gebruiken in WordPress. U ziet bij het gebruik al snel of ze bij een kop horen of gewone tekst. Hierbij kunt u ook de kleurcode gebruiken. In het onderstaande voorbeeld staan achtereenvolgens het lettertype, de lettergrootte en letterkleur: Voorbeeld

Lettergrootte

Letterkleur

Arial

15

#000000

Arial

19

#000000

Comic Sans

15

#004080



9

Tip Website vernieuwen Dit is een goed moment om te kijken of u andere lettertypen en -eigenschappen voor uw website wilt gebruiken. Zo kunt u bijvoorbeeld de kleur van teksten aanpassen als u een andere achtergrondkleur kiest. U kunt ook kiezen voor een moderner lettertype dat wellicht beter bij uw website past.

y Welke afbeeldingen zijn gebruikt op de website? Als er afbeeldingen zijn gebruikt op uw website, is het verstandig deze voor het omzetten naar WordPress al in een map te plaatsen. Wanneer u de afbeeldingen al bij elkaar in een map op uw computer heeft staan, kunt u deze direct gebruiken in WordPress. Als u ze niet meer op uw computer heeft staan, kunt u ze vanaf uw website opslaan op uw computer: U ziet uw website in het venster: Rechtsklik op de eerste afbeelding die u wilt overzetten Klik op

Het venster Afbeelding opslaan wordt geopend: Open de map waarin de afbeelding opgeslagen moet worden Met de knop kunt u een nieuwe map voor de afbeeldingen maken:

Klik op Op dezelfde manier kunt u andere afbeeldingen opslaan. © 2012 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij de boeken over WordPress

10


Tip Website vernieuwen Dit is een goed moment om te kijken of u andere afbeeldingen wilt gaan gebruiken op uw website. Bijvoorbeeld meer actuele foto’s.

y Welke kleuren zijn gebruikt op de website? Op uw website zal meestal een kleur zijn gebruikt voor één of meer onderdelen, zoals voor de achtergrond of bepaalde kaders. Deze kleuren zijn vastgelegd met een kleurcode.

Let op! Of u de kleuren van uw oude website kunt gebruiken in WordPress is afhankelijk van het thema dat u kiest. Bij bepaalde thema’s kunt u zelf andere kleuren voor verschillende onderdelen, zoals de achtergrond, opgeven. U kunt de kleurcodes van verschillende onderdelen makkelijk achterhalen met behulp van een tekenprogramma, zoals Paint: Open Paint Maak het venster van Paint schermvullend Open het venster van uw internetbrowser

Tip Noteren U kunt de afgedrukte pagina’s van de website gebruiken om de kleurcode te noteren. U gaat nu een schermafbeelding maken van de website: U ziet uw website in het venster: Zorg dat het gedeelte waarvan u een kleur wilt weten in beeld is

Druk op



Open het venster van Paint U ziet het venster van Paint:

Druk op

+

De schermafbeelding wordt in Paint geplakt:

U kunt nu de kleuren bepalen:

Klik op Klik op de plaats waarvan u de kleur wilt weten

De kleur wordt overgenomen:

Klik op

Klik op © 2012 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij de boeken over WordPress

11

12


U kunt in dit venster de kleurcodes noteren: Noteer de kleurcodes bij , en

Klik op

Op deze manier kunt u de codes van alle kleuren op een website vaststellen.

Tip Hexadecimale code Als u werkt met een fotobewerkingsprogramma, zoals Paint Shop Pro of Adobe Photoshop Elements, kunt u ook de hexadecimale code van de kleur noteren. Deze ziet er bijvoorbeeld als volgt uit: #001123. Na het #-teken staat de nummercode die bij de bepaalde kleur hoort. Het is aan te raden te werken met de kleurcodes in deze vorm, omdat veel programma’s hiervan gebruikmaken.

Tip Website vernieuwen Dit is een goed moment om te kijken of u andere kleuren wilt gebruiken. Soms kan het aanpassen van de kleuren al de indruk van een vernieuwde website geven.

y Welke extra onderdelen zijn gebruikt op de website? Websites kunnen voorzien zijn van extra onderdelen, zoals een veld dat de actuele datum weergeeft, een video of een formulier. Deze onderdelen kunt u bij het omzetten vervangen door soortgelijke onderdelen: U ziet uw website in het venster: Blader de pagina’s door en noteer de bijzondere onderdelen



13

Voorbeeld Home

Video - Actuele datum

Contact

Formulier

Tip Website vernieuwen Dit is een goed moment om te kijken of u de speciale onderdelen nog wilt gebruiken op uw nieuwe website of ze liever verwijdert of vervangt door nieuwe onderdelen.

y Welke links zijn gebruikt op de website? Het is handig een overzicht te maken van alle hyperlinks die gebruikt worden op uw website. Het gaat dan om hyperlinks die verwijzen naar andere onderdelen op de website, zoals pagina’s en bestanden. Maar ook om e-maillinks en hyperlinks naar andere websites. U kunt deze informatie noteren op de afgedrukte pagina’s van uw website of in een apart schema. U hoeft niet exact op te schrijven waar een hyperlink naar verwijst, een korte omschrijving is voldoende. Tijdens het omzetten kunt u direct de links overzetten naar WordPress. U ziet uw website in het venster: Blader door de pagina’s en noteer de hyperlinks

Voorbeeld Home

[email protected]: hetzelfde e-mailadres

Contact

Contactformulier: pagina formulier


14


Tip Website vernieuwen Dit is een goed moment om te kijken of u bepaalde links wilt verwijderen en of alle links nog wel goed werken. Soms veranderen webadressen.

y Welke metatags zijn gebruikt op de website? Metatags vormen de informatie waarmee zoekmachines op internet uw website opnemen in hun database. Metatags bestaan onder andere uit trefwoorden die uw website beschrijven. Ook geven metatags meer informatie over de website, zoals wie de website heeft gemaakt.

Tip Metatags en Google De meest populaire zoekmachine is Google. Google gebruikt echter al sinds enige tijd geen metatags meer voor het indexeren van websites. Google scant tegenwoordig de webpagina’s op trefwoorden. Andere zoekmachines gebruiken nog wel metatags om de website goed op te nemen in hun database. Het is daarom verstandig om nog wel metatags aan uw webpagina’s toe te voegen. U kunt zelf in de HTML-code van de website kijken welke metatags zijn gebruikt: U ziet uw website in het venster: Rechtsklik op de webpagina Klik op



De HTML-code van de webpagina wordt zichtbaar:

U kunt nu gaan zoeken naar metatags. Hiervoor zoekt u in de HTML-code op de tekst ‘meta’: Klik op Klik op

U ziet het venster Zoeken: Typ bij meta

:

Klik op


15

16


U ziet nu de eerste HTMLregel met de metatags: Bij staan de metatag trefwoorden die u bij het bouwen van de overgezette website kunt gebruiken:

U kunt deze gegevens opschrijven of bij het bouwen van de website direct kopiëren naar WordPress. U kunt ook zelf nieuwe metatag trefwoorden bedenken. In het venster Zoeken: Klik op

Sluit het venster van Kladblok

2 Uw website omzetten Als u de inventarisatie voltooid heeft, kunt u uw website omzetten naar een website in WordPress. Hiervoor bouwt u de website stap voor stap opnieuw op in WordPress aan de hand van de inventarisatie en met behulp van de teksten en afbeeldingen die u al heeft. De handelingen voor het omzetten worden in dit hoofdstuk niet stap voor stap omschreven, omdat deze al uitgebreid staan beschreven in de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren. Om die reden wordt alleen naar de juiste paragrafen in het boek verwezen.

Let op! Er wordt in deze paragraaf van uitgegaan dat u de eerste twee hoofdstukken van Basisgids Websites maken met WordPress of Websites maken met WordPress voor senioren al heeft gelezen en doorgewerkt. Als u dit heeft gedaan, is WordPress al geïnstalleerd en zijn de instellingen al opgegeven. © 2012 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij de boeken over WordPress


17

Let op! Het zal vaak niet mogelijk zijn de website precies zo te maken in WordPress zoals hij er oorspronkelijk uitzag, omdat WordPress gebruikmaakt van sjablonen.

y Stap 1. De nieuwe website aanmaken Als eerste stap maakt u een nieuwe website in WordPress. Hiervoor gebruikt u een thema. Kies bij voorkeur een thema dat wat betreft uiterlijk en eigenschappen al veel lijkt op uw oorspronkelijke website. U kunt er natuurlijk ook voor kiezen uw website een vernieuwd uiterlijk te geven: Voer de gewenste handelingen uit paragraaf 3.1 Het standaard thema bekijken tot en met paragraaf 3.6 Een thema instellen uit

y Stap 2. De achtergrond instellen U kunt bij een gekozen thema vaak de achtergrond aanpassen en daarbij kiezen voor een bepaalde kleur of afbeelding. Gebruik eventueel de kleurcodes die u bij paragraaf Welke kleuren zijn gebruikt op de website? in dit PDF-bestand heeft opgeschreven. Voer de gewenste handelingen uit paragraaf 3.7 Een achtergrond instellen en paragraaf 3.8 De header aanpassen uit

y Stap 3. Teksten overzetten De volgende stap is het overzetten van de teksten van uw oude website naar WordPress. Deze teksten kunt u direct kopiëren vanaf uw oude website: Voer de gewenste handelingen uit paragraaf 4.1 Een nieuwe pagina maken tot en met paragraaf 4.9 Tekst bewerken en paragraaf 6.5 Lettertypen aanpassen uit

y Stap 4. Afbeeldingen overzetten De volgende stap is het overzetten van afbeeldingen van uw oude website naar WordPress. Deze afbeeldingen heeft u als het goed is al tijdens de inventarisatie in een aparte map geplaatst. Voer de gewenste handelingen uit paragraaf 4.11 Een afbeelding toevoegen aan de media bibliotheek tot en met paragraaf 4.13 Een afbeelding bewerken uit


18


y Stap 5. Het menu toevoegen De volgende stap is het overzetten van het menu. Het menu gebruikt u om bezoekers naar de andere pagina’s op de website te verwijzen. Voer de gewenste handelingen uit paragraaf 4.14 Werken met menu’s en paragraaf 6.3 Een dropdown menu toevoegen uit

y Stap 6. Volgende pagina’s toevoegen De volgende stap is het één voor één toevoegen van de andere pagina’s van de oude website. Voer de gewenste handelingen uit paragraaf 4.1 Een nieuwe pagina maken en paragraaf 4.2 Een titel toevoegen uit

y Stap 7. Hyperlinks toevoegen De volgende stap is het toevoegen van de hyperlinks van de oude website. Voer de gewenste handelingen uit paragraaf 4.4 Een hyperlink aan tekst toevoegen uit

y Stap 8. De overige onderdelen toevoegen Voeg nu nog de overgebleven onderdelen in WordPress toe, zoals geluid- en videobestanden en formulieren. Voer de gewenste handelingen uit Hoofdstuk 5 Extra onderdelen toevoegen en Hoofdstuk 6 Meer handige plugins uit

y Stap 9. Metatags toevoegen U kunt de metatags van uw oude website invullen in WordPress: Voer de gewenste handelingen uit paragraaf 6.4 Metatags toevoegen uit

y Stap 10. De website testen De laatste stap is het testen van de overgezette website in WordPress zodat u ziet of alle onderdelen aanwezig zijn en goed staan en onderdelen als video’s, hyperlinks en formulieren goed werken. Controleer de teksten, afbeeldingen en andere objecten © 2012 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij de boeken over WordPress


19

Controleer of de hyperlinks werken Als er een formulier is: Controleer of het formulier goed werkt In dit PDF-bestand heeft u geleerd hoe u een oude website, gemaakt in een ander webbouwprogramma, stap voor stap omzet naar een website gemaakt in WordPress.


Een website omzetten naar WordPress

Recommend Documents