WORDPRESS HET ONTWIKKELEN VAN PAGINA S VOOR INTERNET EN/OF INTRANET DIGITALE VORMGEVING PERIODE 5 2013/2014 FONS GOOSEN / CORRIE VAN DE KROEF MARKETING & COMMUNICATIE - DIGITALE VORMGEVING
Opdracht/WordPress Opdracht Maak een website voor jezelf waarop je onderstaande pagina s gaat plaatsen. Pagina s: o Welkom, Home Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé. o CV (Curriculum Vitae) of About Me o Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies; Producten; Foto s/afbeeldingen o Digitale Vormgeving: Producten; Omschrijving van producten; Geleerde vaardigheden/technieken. o Contact Subpagina s: Bij Projecten en bij Digitale Vormgeving ga je twee subpagina s maken. Naast de reader kun je ook gebruiken van de handleiding voor WordPress op internet: http://www.handleiding.wordpress.com Andere sites: http://lesin.wordpress.nl http://wptipstrucs.wordpress.com/. http://digitalevormgeving.wordpress.nl 2
WordPress.com Account Opdracht 1, WordPress Maak een account aan in WordPress.com. Ga naar www.wordpress.com. Account Maak een account aan. Vul in: E-mailadres. 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. Blog Adres: kies een adres voor je blog (WordPress controleert het adres). Gratis Blog, in de tweede rij alleen het vinkje bij Gratis Blog. Klik daarna op Creëer Blog. Email Nadat je een account hebt aangemaakt en op Creëer 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: 3
Site bekijken Dashboard Om te zien hoe je site er uitziet, klik je 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 en klik op het woord Dashboard. Dashboard bestaat uit drie onderdelen: 1. Dashboard algemeen. 2. Menu-items die met het plaatsen van content op de website te maken hebben. 3. Menu-items die met de werking en het uiterlijk van de website te maken hebben 4
Weergave Thema s Opdracht 2, Thema Probeer een aantal thema s uit en maak een keuze voor een thema Bij WordPress kun je meer dan 1200 gratis thema s vinden. Daarnaast zijn er ook bedrijven die betaalde thema s aanbieden. Maak een keuze welk thema 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 5
Pagina s Nieuwe Pagina Opdracht 3, Pagina s Maak vijf onderstaande pagina s voor je site met een contactpagina die als laatste staat in de rij. o Welkom, Home Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé. o CV (Curriculum Vitae) of About Me o Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies; Producten; Foto s/afbeeldingen o Digitale Vormgeving: Producten; Omschrijving van producten; Geleerde vaardigheden/technieken. o Contact 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. 6
Weergave Header Opdracht 4A, Header-Ontwerp Ontwerp een header voor je website in Photoshop. 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. Ga naar Dahboard, Weergave, Header en kijk hoe groot de header voor jouw website moet worden. Schrijf hier het formaat:.. Header. Maak in Photoshop de Header en verwerk in de header, je naam, je huisstijlkleuren, een passende achtergrond Opdracht 4B, Header Plaats de header die je hebt gemaakt in de WordPress-site Uploaden Om zelf een header te plaatsen ga je naar 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. 7
Weergave Achtergrond Opdracht 5, 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. Je kunt ook zelf een achtergrond maken in Photoshop maken en uploaden. 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. 8
Weergave Menu Opdracht 6, 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. 9
Pagina s Subpagina s Opdracht 7, Subpagina Maak een uitklapmenu door een subpagina aan een pagina toe te voegen. Maak twee subpagina s voor zowel Projecten als voor Digitale Vormgeving. 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. 10
Welkom bericht Maak je blog helemaal leeg. Opdracht 8, 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. Lees verder Lange blogberichten die op elkaar volgen, zorgen ervoor dat de webpagina onoverzichtelijk wordt. Dit probleem kunnen we oplossen, door de inhoud van het bericht te splitsen in een zichtbaar bovengedeelte en een onzichtbaar volgend gedeelte, dat pas zichtbaar wordt, nadat op de link Lees verder geklikt wordt.. Werkwijze Maak de inhoud van uw bericht op. Zet uw cursor in het tekstvak op de plaats waar u de inhoud wenst te onderbreken Klik vervolgens in de Wysiwyg editor op de pictogram Insert More Tag. Er verschijnt dan een lijn met aan het eind More (zie hierboven). Klik in de rechterzijde op Publiceren om het bericht op te slaan Het resultaat ziet er zo uit, klik op de tekstlink Lees verder: Lees verder 11
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. 12
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. Bestanden uploaden. Bestanden selecteren. Let op dat het bestand de juiste extensie heeft, PSD- niet, JPG wel. Rechts zie je nu het bestand dat je hebt geupload. 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: thumbnials, gemiddeld, groot, volledige grootte. Klik tenslotte op In pagina invoegen Media toevoegen Galerij aanmaken Klik nog een keer op Media Toevoegen. Rechts onder het woord Media toevoegen zie je nu Galerij aanmaken. In het midden staan alle bestanden die je hebt ingevoerd. Rechts staan de bijlagedetails. Galerij-instellingen Selecteer nu een aantal foto s die je hebt ingevoerd door erop te klikken; er verschijnt een vinkje rechtsboven op de foto. Klik nu rechtsonder op Een nieuwe galerij aanmaken. Rechts zie je Gallery-instellingen. Kies het gewenste aantal Galerijkolommen, tussen 1 en 9. 13
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. Slideshow Maak een galerij. Klik dan rechts op type en kies Slideshow en vervolgens Galerij bijwerken. 14
Instellingen Algemeen Blogicoon/Favicon Opdracht 11, Favicon Maak een duidelijke Favicon voor je site en plaats je ontworpen Favicon in de site.. 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. 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. Voorbeelden van Favicons: Vier Favicons van Google in de afgelopen jaren en enkele andere favicons van social media. Nieuwe favicon Google. Favicon op 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. 15
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. 16
Planning: Wk 35 (26 aug.) Wk 36 (02 sept.) Wk 37 (09 sept.) Wk 38 (16 sept.) Account maken, Thema Kiezen, Dashboard, Pagina s Ontwerp Header, Achtergrond Menu, Subpagina, Berichten, Tekst Galerij, Favicon De beoordeling. Je WordPress-site wordt beoordeeld op de volgende onderdelen: Alle onderdelen, Alle onderdelen zoals hierboven genoemd, moeten in je WordPress-site zijn verwerkt (per gemist onderdeel twee punten in mindering) (20 punten). De inhoud De inhoud van je WordPress-site moet duidelijk, overzichtelijk, passend en zonder spellingfouten zijn gemaakt (10 punten). De website moet een duidelijke inhoud hebben die op de pagina s tot uiting komt. De vormgeving De vormgeving van thema, header, achtergrond, favicon/blogicoon, kleur tekst van je WordPress-site moet passen bij de site. De site moet overzichtelijk, passend en een eenheid in stijl hebben (10 punten). Afvinklijst Wordpress site: Onderwerp Vormgeving Site Header Favicon Achtergrond Elementen Site Thema Pagina s Subpagina Welkom bericht Contactpagina Galerij Inhoud Berichten en Pagina s Extra Zelf ontworpen Duidelijk Passend Thema met header Minimaal vier In Menu verplaatst Laatste knop in de navigatiebalk Minimaal vier foto s Kolom, Titel Duidelijke inhoud van de site Afvinken 17