1

WORDPRESS

HET ONTWIKKELEN VAN PAGINA’S VOOR INTERNET EN/OF INTRANET

DIGITALE VORMGEVING

FONS GOOSEN

MARKETING & COMMUNICATIE - DIGITALE VORMGEVING

2

Voorwoord WordPress We hebben gekozen voor het maken van een website met CMS-systeem van WordPress. WordPress is in feite gestart met een Blog Management System. Toen het bloggen in opkomst was, kwam er steeds meer vraag naar een gemakkelijk systeem dat in enkele minuten op te zetten is. De interface van Wordpress en het gemak waarmee dit systeem gebruikt kan worden sloeg in als een bom. De populariteit is nog steeds stijgende sinds de start in 2003. Op dit moment wordt gesteld dat 15,8% van het Internet bestaat uit Wordpress websites. Een enorm aantal dus. In deze reader vind je de onderwerpen, de opdrachten en de beoordeling. Veel succes

3

Inhoudsopgave

Voorwoord blz 2 Inhoudsopgave blz 3 Vormgeving blz 4-6 1. Header 2. Favicon WordPress-site blz 6-28 1. Account aanmaken 2. Thema kiezen 3. Header 4. Achtergrond 5. Favicon 6. Pagina 7. Menu 8. Subpagina 9. Font / Lettertype 10. Galerij 11. Tekst en Afbeelding 12. Berichten 13. Links (tekst,afbeelding) 14. Widgets 15. YouTube 16. Formulier 17. Links (sidebar) 18. Website verbergen, verwijderen Beoordeling blz. 28

4

Vormgeving | Header Mini Opdracht, Header Ontwerp een header voor je mini-onderneming Ieder thema heeft een eigen maat voor de header. Thema Twenty Ten heeft het formaat: 940 × 198 pixels, 72 pixels/inch, RGB. Thema K2-lite heeft het formaat: 780 × 200 pixels, 72 pixels/inch, RGB. Header. Verwerk in de header:

De naam van je onderneming

De huisstijlkleuren.

Een passende achtergrond in de vorm van een foto, kleur, verloop etc. Kijk op de volgende website, daar vind je voorbeelden van sites in wordpress: http://www.mrwebsite.nl/portfolio/

Voorbeelden van Talpa Productions:

http://www.talpa.tv/productions

5

Vormgeving | Favicon Opdracht, Favicon Maak een duidelijke Favicon voor je site van je mini.

Wat is een favicon eigenlijk? Een favicon is een klein icoontje dat je vooraan in de adresbalk van je browser ziet staan en ook vaak in je favorietenlijst en bladwijzers. Het is eigenlijk niets anders dan een mini-afbeelding die bij een website hoort. Verder is het icoontje altijd vierkant en is het formaat nooit groter dan 64x64 pixels (en nooit kleiner dan 16x16 pixels); behoorlijk klein dus. Het betekent dan ook dat je icoontje eenvoudig moet zijn: details gaan gauw verloren. Veel favicons gebruiken alleen een letter zoals Google. Ontwerp Het onderstaande formaat is goed te gebruiken. Het belangrijkste is dat je een vierkant gebruikt. Formaat: 250 x 250 pixels, resolutie: 72 pixels/inch, RGB.

De Favicons van Google in de afgelopen jaren:

Nieuwe favicon Google.

6

WordPress.com | Account Opdracht 1, WordPress Maak een account aan in WordPress.com. Een site/blog aanmaken Ga naar www.wordpress.com. Bovenaan kun je de pagina vertalen in het Nederlands

Account Maak een account aan. Vul in:

Blog Adres: kies een adres voor je blog (WordPress controleert het adres)

Gebruikersnaam: je gebruikersnaam moet minimaal vier karakters zijn en mogen alleen bestaan uit kleine letters en cijfers

Wachtwoord, hiervoor mag je hoofdletters, kleine letters, cijfers en symbolen gebruiken

Bevestigen (bevestig je wachtwoord); (WordPress controleert jouw password)

E-mailadres,

Taal: Nederlands (selecteer nl-Nederlands)

Gratis Blog (in de tweede rij alleen het vinkje bij Free Blog) Klik daarna op Maak Blog

7

Email Nadat je een account hebt aangemaakt en op Create Blog hebt geklikt, ontvang je een email. Activeer nu je account.

Inloggen en beheren Het adres uit dit voorbeeld is nu: http://digitalevormgeving.wordpress.com Wil je inloggen als beheerder dan plaats je achter dit adres: wp-admin Dus: http://digitalevormgeving.wordpress.com/wp-admin. Je komt in het volgende inlogvenster:

Site bekijken | Dashboard Voer je gebruikersnaam en wachtwoord in. Je komt nu in het Dashboard van de site. Om te zien hoe je site er uitziet, klik in de bovenbalk op de naam van je site. Als je weer terug wilt naar het Dashboard klik je weer op de naam van je site links in de hoek, onder deze naam verschijnt het woord Dashboard

8

Weergave | Themes Opdracht 2, Thema Probeer een aantal thema’s uit en maak een keuze voor een thema Bij WordPress kun je meer dan 1200 gratis themes vinden. Daarnaast zijn er ook bedrijven die betaalde themes aanbieden. Maak een keuze welk theme voor jou passend is. Kies bij Weergave in het linkermenu: Thema’s. Je kunt bladeren in thema’s: Willekurig, A-Z, populair, Newest, Premium, Vrienden van WP.com. Je kunt ook gericht zoeken via Functie filters op Kleur, Kolommen, Breedte en Eigenschappen.

Bekijk verschillende thema’s: Klik je op Voorbeeld. Sluit daarna het voorbeeld door het geopende venster te sluiten.

Activeren Als je voor een thema kiest klik je op Activeren bij het door jou gekozen thema. Het thema wordt geactiveerd. Dit kan even duren. Bekijk het thema door weer te klikken op de naam van je site in de linker bovenhoek. Vind je het ontwerp toch tegenvallen, kun je op dezelfde wijze voor een ander thema kiezen. Ga weer naar Dashboard Afhankelijk van het Thema dat je gekozen hebt kun je bij Weergave een eigen Header (Kop) plaatsen, een eigen Achtergrond bepalen, bij Custom Design, Lettertypes aanpassen, etc

9

Weergave | Header Opdracht 3, Header Plaats de header die je hebt gemaakt in de WordPress-site Uploaden Om zelf een header te plaatsen ga je Weergave (Appearance). Kies voor het menu-item Header. Hier kun je een eigen gemaakte Header uploaden. Je kunt een Header in Photoshop maken. Zorg dat deze header het juiste formaat heeft. Ieder Theme heeft een andere maat. In het voorbeeld is dat 984 x 242 pixels, 72 pixels/inch. Sla je header op als Jpeg. Een andere manier is een foto uploaden en bijsnijden. Nadat het bestand is geüpload dan zie je het bovenin bij Voorbeeld staan. Bij Headertekst haal je eventueel het vinkje weg. Tenslotte weer Wijzigingen opslaan.

10

Weergave | Achtergrond Opdracht 4, Achtergrond Geef de site een passende kleur of afbeelding voor de achtergrond. Hier kun je een Kleur of een Afbeelding als Achtergrond plaatsen. Bij Achtergrondinstellingen kun je de Achtergrondkleur bepalen. Je kunt de code van de kleur intypen of een kleur kiezen.

Achtergrondafbeelding. Je kunt achter jouw website een Achtergrondafbeelding plaatsen. Bij Afbeelding uploaden ga je naar Bladeren naar jouw afbeelding. Daarna ga je naar Uploaden. Tenslotte Wijzigingen opslaan. Tenslotte kun je bij Weergave-instellingen bepalen: Positie: Links, Gecentreerd of Rechts; Herhalen: Geen herhaling, Uittrekken, Horizontaal naast elkaar; Let op om een afbeelding volledig achter je blog te plaatsen heeft het wel een bepaalde grootte nodig. Ik heb een groene kleur geplaatst met een grootte van 1800 x 1252 pixels.

11

Instellingen | Algemeen | Blogicoon/Favicon Opdracht 5, favicon Plaats je ontworpen Favicon in de site..

Een favicon van een site is het kleine icoontje dat in de adresbalk verschijnt naast de URL. Het favicon geeft een extra mogelijkheid aan de webmaster om de site een visuele herkenning te geven.

Klik in het linker menu onderaan op Instellingen – Algemeen. Algemene instellingen zoals Titel, Subtitel, Datum, Tijd en Blogicoon kun je hier instellen. Vergeet niet onderaan dit menu: Wijzigingen opslaan. Uploaden Ga naar Instellingen Algemeen. Rechts kun je je Blog Foto / Icoon plaatsen. Blader naar je Foto of Icoon (jpeg of png) Kies het bestand en Upload plaatje. Wijzigingen opslaan.

12

Het verschil tussen Berichten en Pagina’s Met WordPress heb je twee basis mogelijkheden om informatie op je blog te zetten: Berichten en Pagina’s WordPress Pagina’s Pagina’s zijn ook artikelen, maar ze staan niet in de chronologische volgorde, het zijn meer statische artikelen die naast die tijdlijn staan. Voordeel van pagina’s is dat je ze wel op volgorde kunt zetten en je zelf sub-pagina’s kunt maken zodat je toch het idee van een statische website kunt krijgen. Blog Posts – Berichten Berichten schrijf je zoals een krant gepubliceerd wordt, je schrijft nu iets over wat nu voor jou actueel is en publiceert dat. Deze publicatie staan altijd in chronologische volgorde, het nieuwste bericht staat altijd bovenaan je blog pagina. Je hebt dus verder geen invloed op de volgorde van de artikelen op je blog.

Pagina’s | Nieuwe Pagina Opdracht 6, Pagina’s Maak vier pagina’s voor je site; de contactpagina staat als laatste in de rij. Klik in het linkermenu op Pagina’s – Nieuwe pagina. Geef de pagina een naam. Pagina Bewerken Geef in het eerste veld de titel. In het grote vak kun je de inhoud typen. Om de pagina op te slaan zonder te publiceren, klik je op Opslaan als Concept (Save Draft). Wil je de pagina opslaan en direct publiceren, klik dan op Publiceren (Publish) of Bewerken. Wil je de pagina bekijken klik op Voorbeeld (Preview). Pagina- attributen instellen Hoofd: hier geef je aan of een pagina een hoofd- of sub-pagina is. Template: is afhankelijk van theme. Volgorde: Via deze optie kun je de volgorde van de pagina’s aangeven in de navigatiebalk of bij de subpagina’s onder elkaar. Publiceer de pagina’s.

13

Weergave | Menu Opdracht 7, Menu Maak een menu aan en plaats de pagina’s in de juiste volgorde in het menu. Om de pagina’s te plaatsen moet je naar Menu’s bij Weergave. Om te beginnen moet je een Menunaam invoeren bij Menunaam. Daarna klik op Menu aanmaken. Na het opslaan zie je links het veld Thema locaties. Kies uit de uitklaplijst de naam en klik op Opslaan. Plaats een vinkje bij Automatisch nieuwe top-level pagina´s toevoegen.

Pagina aan het menu toevoegen Ga naar Weergave en kies Menu’s. Selecteer, plaats een vink voor de nieuwe pagina in het blok Pagina’s. Klik op de knop Aan menu toevoegen (Add to Menu). Tenslotte sla alles op met de knop Menu opslaan. Kijk op de website of controleer of alles klopt.

14

Pagina’s | Subpagina’s Naast hoofdpagina’s kun je ook subpagina’s maken. Opdracht 8, Subpagina Maak een uitklapmenu door een subpagina aan een pagina toe te voegen. Pagina’s | Nieuwe pagina Ga naar Alle pagina’s – Klik op Nieuwe Pagina. Type de naam van de subpagina. Pagina-attributen Rechts zie je het menu: Pagina-attributen. Zoek bij Hoofd (Meta) de pagina waaraan je de subpagina wilt toevoegen. Geef bij Volgorde (Order) de volgorde van de subpagina’s aan nummer 0, nummer 1 etc. Klik boven Pagina-attributen op Publiceren.

Weergave | Menu Volgorde van de pagina’s Ga in het linkermenu naar Weergave – Menu’s Vink bij Pagina’s (links) de nieuwe pagina’s aan. Kies voor Aan menu toevoegen. Rechts van de pagina’s zie je nu alle pagina’s afzonderlijk staan. Deze pagina’s kun je in de juiste volgorde slepen. Scrol weer naar boven. Vink bij Themalocaties, bij Primaire navigatie het door jou gemaakte menu aan. Kies voor Menu opslaan.

15

Pagina’s | Tekst Opdracht 9,Lettertype Verander kleur en grootte van je letters bij pagina’s Lettergrootte en kleur van letters kun je aanpassen op de pagina.

Weergave | Custom Design In Custom Design kun je je Lettertype (Fonts) aanpassen. Ga naar weergave en klik op Custom Design. Ga vervolgens naar Fonts. Je kunt daar een keuze maken voor Fonts voor de titel, koppen en de body. Voor het aanpassen van je lettertype moet je wel betalen, vanaf 30 dollar per jaar. De grootte kun je wel zonder te betalen aanpassen.

Afmeting Je kunt de Afmeting, grootte van je Lettertype aanpassen. Met het + plus en - min-teken kun je het lettertype groter of kleiner maken.

16

Pagina | Galerij WordPress heeft een standaard Galerij-functie. Hiermee toon je één of meerdere afbeeldingen binnen een bericht of pagina. Opdracht 10, Galerij Voeg een Galerij toe aan één van je pagina’s. Pagina | Nieuwe Pagina | Media toevoegen Kies voor Nieuw bericht of Nieuwe Pagina Klik op Media toevoegen. Bestand kiezen. Let op dat het bestand de juiste extensie heeft, PSD- niet, JPG wel. Type bij Titel de naam ven de foto. Uit Uitlijning kun je nog aangeven; Geen, Links, Gecentreerd of Rechts. Bij Afmeting geef je grootte aan van de foto op jouw blog: thumbnials, gemiddeld, groot, volledige grootte.

Media Toevoegen | Galerij Nadat de eerste foto is toegevoegd, staat bovenin bij Media Toevoegen het woord Galerij. Achter het woord Galerij staat het aantal foto’s die geüpload zijn Klik bij iedere afbeelding op Tonen. Voer een juiste titel en beschrijving in. Kies voor Alle wijzigingen opslaan. Galerij-instellingen Kies onderaan bij Gallery-instellingen voor: Thumbnails koppelen aan: Afbeeldingsbestand of Bijlage pagina. Afbeeldingen selecteren op: Menuvolgorde, Titel, Datum/ tijd, Willekeurig. Volgorde bepalen: Oplopend of Aflopend Gewenste aantal Galerijkolommen, tussen 1 en 9. Kies voor Galerijinstellingen bijwerken of Slideshow invoegen

17

Kijk op jouw blog naar de afbeeldingen. Klik op een afbeelding en je krijgt een grotere variant te zien. Je kunt dan met een pijltjestoets naar de andere afbeeldingen bladeren

Galerij bewerken Klik op gallery link. In de linkerbovenhoek zie je hetzelfde teken met de tekst Galerij bewerken. Klik daarop en je je Galerij bewerken.

Media | bibliotheek Foto verwijderen Een foto kun je verwijderen in de bibliotheek. Ga naar Media, Bibliotheek. Klik op de foto en in beeld komt: Bewerken, Permanent verwijderen of Bekijken. Klik op Permanent verwijderen.

18

Pagina | Tekst en Afbeelding Opdracht 11, Tekst en Afbeelding Voeg een afbeelding links of rechts van de tekst toe. Een afbeelding kun je rechts of links naast je tekst plaatsen. Hieronder zie je de afbeelding van het logo van wordpress naast de tekst.

Ga naar de pagina waar je de tekst wilt toevoegen. Plaats de cursor voor de tekst en ga naar Uploaden/Toevoegen. Daarna bestand kiezen. Je afbeelding wordt geupload, scroll naar beneden. Maak een keuze bij Uitlijning voor Links of Rechts. Kies een Afmeting, thumbnail, gemiddeld, groot.. En tenslotte klik op Invoegen in bericht.

19

Blog met Berichten Maak je blog helemaal leeg. Opdracht 12, Berichten Schrijf een welkom bericht op je berichtenpagina in plaats van het bericht Hello world. Berichten, Links, Pagina Ga in het linkermenu naar Berichten, Alle berichten. Ga met je muis over het bericht Hallo allemaal en klik op Prullenbak. Ga in het linkermenu naar Links, Alle Links. Je kunt deze allemaal verwijderen door bij Naam een vinkje te plaatsen. Klik vervolgens op Acties, Verwijderen. Klik vervolgens op Uitvoeren. Ga in het linkermenu nu naar Pagina’s Ga met je muis over Voorbeeld pagina en klik op Prullenbak.

Je eerste Bericht Ga naar het Dashboard. Klik links in het menu op Berichten en dan op Nieuw bericht. Het is ook mogelijk om boven in de menubalk op Nieuw Bericht te klikken Begin met het vullen van de Titel en start dan met het Schrijven in het venster onder de titel. Sla tijdens het schrijven op als concept. Plaats het bericht in de gewenste Categorie, rechts op je scherm.

20

Pagina’s/Berichten | Links Opdracht 13, Links Maak op een pagina of in een bericht een interne link, externe link en afbeeldingslink 1.Een interne TekstLink in hetzelfde venster. Dit is een tekstlink die gekoppeld wordt naar een andere pagina in dezelfde site. Open een pagina of bericht. Selecteer een Tekst waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster. In het menu zie je alle pagina’s van je site. Selecteer de gewenste pagina. Geen vinkje bij Open link in een nieuw venster/tab. Kies Link Toevoegen. En Bijwerken niet vergeten.

2. Een externe TekstLink in een nieuw venster. Dit is een tekstlink die gekoppeld wordt naar een website buiten de WordPress-site. Open een pagina of bericht. Selecteer een Tekst waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster. In het menu dat je nu opent, type (of kopieer en plak) je de volledige Url van de site waar je naar toe wilt linken. Plaats een vinkje bij: Open Link in een nieuw venster/tab. Het is namelijk belangrijk dat als je de site waarnaar je gelinkt hebt afsluit, je weer terug bent in jouw site. Bijwerken.

21

3. Een AfbeeldingsLink, intern of extern. Bij opdracht 11 heb je een afbeelding toegevoegd aan een tekstpagina. Ga naar de tekstpagina met afbeelding en selecteer de afbeelding. Klik op Link invoegen. In het onderstaande voorbeeld heb ik de afbeelding, logo van WordPress, gelinkt naar de URL van WordPress, http://www.wordpress.com.

22

Weergave | Widgets Opdracht 14, Widgets Voeg drie widgets (meest recente berichten, twitter en facebook) toe aan je site. Maar wat zijn nu eigelijk Widgets? WordPress Widgets zijn links, afbeeldingen etc die je in je zijmenu (sidebar) kunt plaatsen. In het scherm van de beschikbare widgets kun je via je simpele "drag and drop" optie de standaard Widgets uit het onderste veld verslepen naar een plaats in je zijmenu. Bij sommige templates het je zelfs twee zijmenu opties voor links en rechts. Nadat je de Widgets op hun plaats gezet hebt, sla je alles op en kijk je hoe je wordpress site er nu uit ziet. Mocht je toch de volgorde willen wijzigen, dan kun je dat ook weer doen door ze te veslepen: Ga in het linkermenu naar Weergave – Widgets. Maak een keuze uit de Beschikbare Widgets die je op je site wilt. Sleep deze Widgets via drag and drop in het Widgetmenu, Sidebar rechts.

Activeren, Deactiveren Sleep Widgets van de Beschikbare Widgets naar het Primaire Widgetmenu in de Sidebar aan de rechterkant om deze te activeren. Sleep de Widget van het Primaire Widgetmenu, Sidebar naar de Beschikbare Widgets om te deactiveren en de instellingen te verwijderen. Standaardwidgets Meest recente berichten Sleep de widget van de beschikbare widget naar het zijmenu (sidebar).

Facebook en Twitter Voeg de widget Twitter en facebook aan het zijmenu toe.

23

Widgets | Afbeelding Opdracht 15, Widget Afbeelding Voeg de Widget Afbeelding toe aan het zijmenu (sidebar).

In het sidebar gaan we een afbeelding plaatsen. Sleep de Widget Afbeelding naar het zijmenu. Plaats de URL-code van de afbeelding bij Image URL. Geef de widget de juiste titelnaam. En geef de grootte van afbeelding aan bij width (breedte) en hoogte (Height).

24

Pagina | YouTube Opdracht 16, YouTube Voeg een Youtube-filmpje embed toe aan je site. YouTube als filmpje (embed) Ga naar het filmpje op YouTube. Onder het filmpje klik je op Delen, daarna op Insluiten. Vervolgens bepaal je het Formaat. Met Aangepast kun je het formaat zelf aanpassen kleiner of groter. Tenslotte selecteer je de Code.

Ga naar WordPress, Dashboard, Pagina. Selecteer bij Alle Pagina’s de pagina waar je het YouTube filmpje Embed gaat invoegen. Klik rechtsboven op HTML (naast Wysiwyg) en plak de Code in de tekst. Vervolgens Bijwerken.

Pagina | Media Uploaden Ga in je dashboard naar Pagina naar Media-toevoegen/uploaden. Kies voor Van URL en voor Audio, Video of een ander bestand. Vul de URL van het filmpje van YouTube in en de Titel. Klik tenslotte op Invoegen in bericht. Daarna Bijwerken.

25

Pagina’s | Formulier Opdracht 17, formulier Voeg een formulier toe aan de pagina Contact. Formulier toevoegen Maak een pagina Contact. En zorg dat deze als laatste pagina op de navigatiebalk staat (via menu). Plaats op deze pagina een contactformulier. Ga naar Voeg een formulier toe; het meest rechtse pictogram dat staat in de rij van Uploaden/toevoegen. Je ziet dan het formulier met vier velden.

Formulier bewerken Verander de teksten in het Nederlands via edit. Ook kun je aangeven door een vinkje te plaatsen of het verplicht(required) is het vak in te vullen. Met het min-tekentje achter het veld kun je het veld weghalen. Je kunt ook velden toevoegen door te klikken bij: Can I add more fields? Hier heb je nog andere mogelijkheden. Probeer een aantal mogelijkheden uit en kies wat bij jouw website past.

26

Links | Link in de Sidebar/Widgetruimte. Opdracht 18, Links VoegLinks toe aan de sidebar van je site Dit zijn de Links die je vindt in het Dashboard aan de linkerzijde. Deze links komen vrijwel altijd aan de Rechterkant (sidebar) of in de Footer (onderaan de website) van je website te staan. Als je Links niet zichtbaar zijn moet je bij Widgets de applicatie Links aan je Primaire Widgetruimte toevoegen. Je kunt Links toevoegen door in het menu Links op Nieuwe toevoegen te klikken.

Bovenin begin je in te vullen met de Naam die getoond zal worden op de website. Daaronder vul je de link zelf in, inclusief http://www..... Je kunt een Beschrijving invullen die WordPress zal tonen aan de bezoeker zodra die met de muis over de link heen beweegt. Kies een Categorie. Bepaal het Doel van de link. Bij een andere website kies de optie _blank, zodat er een nieuw venster wordt geopend, naast het venster van jouw website. Tenslotte klik rechtsboven in de pagina op Link toevoegen.

Heb je alle Links gemaakt, dan kun je ze beheren door in het menu te kiezen voor Alle Links

27

Website verbergen Instellingen | Privacy Je kunt je site privé houden en alleen zichtbaar maken voor gebruikers die jij uitkiest. Ga dan naar Instellingen (links onder het midden). Kies vervolgens Privacy.

Website verwijderen Extra | Site verwijderen Wil je aan het eind van de periode je site verwijderen dan kan dat via Extra (links) en vervolgens Site verwijderen.

28

De beoordeling. Je WordPress-site wordt beoordeeld op de volgende onderdelen:

Alle onderdelen, zoals hierboven genoemd, in je WordPress-site zijn verwerkt (per gemist onderdeel twee punten in mindering) (20 punten).

De inhoud van je WordPress-site moet duidelijk, overzichtelijk, passend en zonder spellingfouten zijn gemaakt (10 punten).

De vormgeving: thema, header, achtergrond, favicon/blogicoon van je WordPress-site moet passen bij de site. De site moet overzichtelijk, passend en een eenheid in stijl hebben (10 punten).