Handleiding Bloggen met WordPress

Handleiding Bloggen met WordPress Inhoud

Fontys Economische Hogeschool Tilburg

Edwin Schravesande november 2012

1

Terminologie van het bloggen

2

De eerste stappen

3

Een oefenblogpost invoeren

4

Onderzoeksblogposts: speciale aanwijzingen

5

Zelf een blog starten?

1

Terminologie van het bloggen Blog Het woord ‘blog’ is een verkorting van ‘weblog’, oftewel een dagboek op het internet. Oorspronkelijk werden vooral de echt typische dagboek sites ‘blog’ genoemd. De vorm van een soort dagboek bleek ook goed te werken om nieuws te brengen of nieuwe kennis te delen. Een blog is eigenlijk een internetsite waar constante vernieuwing centraal staat. blogpost Een (we)blog is in essentie een website die hoofdzakelijk bestaat uit een serie artikelen die gebonden zijn aan een specifieke publicatiedatum. Die artikelen noemen we blogposts, posts, of blogjes. ankeilers Kenmerkend is ook dat op de homepage en op archiefpagina’s kleine inleidingen (ankeilers of intro’s) van de verschillende blogjes te lezen zijn. Als je hier op doorklikt krijg je een pagina waarop maar één blogje te lezen is. Sidebar en Een typisch blog heeft een opmaak in twee kolommen. De kern staat in de linkerkolom, die widgets tweederde van de pagina beslaat. De smallere kolom daarnaast heet de sidebar. Die staat vol met kleine blokjes, waar bijvoorbeeld verwijzingen naar andere blogs of een twitterfeed in staan. Zo’n blokje noemen we een widget. CMS, frontend WordPress is wat we noemen een Content Management Systeem (CMS). Dat betekent dat je de en backend inhoud ook via het internet kan aanpassen. Wat de lezer ziet noemen we het frontend van het CMS. Als je een blogje wil schrijven of het systeem op een andere manier wilt onderhouden, dan doe je dat op speciaal daarvoor gemaakte webpagina’s, die alleen met een wachtwoord toegankelijk zijn. We noemen dit het backend. Je moet voor het backend inloggen met een wachtwoord.

Frontend: www.nieuwemedialab.nl

Backend: www.nieuwemedialab.nl/wp-admin

Rollen en In het backend krijg je de rol van ‘author’. Een rol is afgestemd op jouw taak op de site. Omdat rechten je een bepaalde rol krijgt, heb je bepaalde rechten wel, en andere rechten niet. Als je meer rechten hebt, dan kan je meer en ziet het backend er ook ingewikkelder uit. Omdat we allerlei rechten van je hebben afgepakt kunnen we ook voorkomen dat je bijvoorbeeld een blogje van iemand uit een andere klas per ongeluk weggooit. Je docent heeft een andere rol op de site. Hij / zij heeft meer rechten, om bijvoorbeeld het werk van iedereen in te kunnen zien. Hoe dat in de praktijk werkt, dat merk je nog wel. Maar het idee van rollen en rechten is een principe dat je moet begrijpen, omdat het in heel veel complexere websites terugkeert.

2

Tags en Verschillende blogjes hebben verschillende onderwerpen. Je kan de lezer daar doorheen categorieën helpen door het aanbrengen van categorieën en tags. Die begrippen lijken een beetje op elkaar, maar meestal gebruik je categorieën als een logische indeling voor je site, en zijn tags weer behulpzaam om kris-kras door die logische indeling heen te kunnen zappen. Op de site www.nieuwemedialab.nl is een indeling in categorieën gemaakt. Afhankelijk van de categorie die je toevoegt, komt een blogpost op een andere plek in het menu. Jullie onderzoek is ingedeeld onder ‘merkenonderzoek’. Daaronder vallen weer meerdere categorieën. Daarnaast kan je ook tags toevoegen. De tags worden gebruikt om ook nog op een andere manier door de site te navigeren. Een blogje valt onder één categorie, maar je kan er meerdere tags aan hangen. Voor de categorieën geldt overigens weer: omdat je minder rechten hebt, zie je ook minder categorieën.

Wat je bij categorieën instelt is bepalend voor het menu waar je blogpost in verschijnt

De tags die je invoert komen ondermeer terug in de tagcloud op de homepage

HTML Een internetpagina bestaat in de basis uit HTML. De eerste twee letters HT staan voor Hypertext, wat het mogelijk maakt om links aan te leggen naar andere internetpagina’s of bestanden. De ML staat voor Markup Language, oftewel opmaaktaal. In 1995 was iedereen die iets met internet wilde HTML aan het leren. De basis is ook niet zo ingewikkeld, maar echt gebruiksvriendelijk is anders. Voor het schrijven van een gewone tekst op het internet is HTML nu meestal meer nodig, er zijn eigenlijk altijd ‘teksteditors’ in het backend die ongeveer werken zoals je in Word gewend bent. Je kan in WordPress nog wel zien hoe de HTML er uit ziet. Voor sommige trucs is het handig dat je ongeveer het idee achter HTML begrijpt, ook als je de taal zelf niet kan lezen (zie opdracht 8 op pagina 8) 3

De eerste stappen 1. Inloggen Er is al een account voor je gemaakt op nieuwemedialab.nl. Log in op www.nieuwemedialab.nl/wpadmin. Je kan je gebruikersnaam of je e-mailadres gebruiken om in te loggen. a. Je gebruikersnaam is je PCN nummer. b. Als e-mail adres gebruiken we de PCN variant. Dus bijvoorbeeld [email protected]. c. Het wachtwoord is ‘welkom’. 2. Hoofdmenu, Dashboard en wachtwoord Je hoofdmenu ziet er uit zoals hier links. De menuoptie Updates gebruiken we niet. Het belangrijkste wat je doet op dit blog is blogpostjes schrijven, aanpassen, opmaken en nog beter maken. En dat doe je allemaal onder het menu Posts. Onder het menu Profile kan je je eigen gegevens aanpassen a. Op je dashboard zie je waarschijnlijk een waarschuwing in een groot rood vak, waarop staat dat je browser niet veilig is. Klik die waarschuwing weg met Dismiss. b. Het is een goede gewoonte om je werk op internetsites goed te beschermen met een wachtwoord. Het is misschien een beetje denkbeeldig dat iemand gaat proberen om onder jouw naam dingen te doen die je niet wilt, maar je kan maar beter het zekere voor het onzekere nemen. Ga naar profile. Ga naar je wachtwoord (password) en pas dat aan in iets wat jij kan onthouden. Alle andere opties onder Profile laten we nu nog even voor wat het is. c. Klik op de button 3. Een eerste oefentekst We gaan nu even wat onzin invoeren om de werking van WordPress te verkennen a. Ga in het menu naar Posts naar Add New. b. Tik als titel in ‘eerste blogpost van (naam)’ c. Tik in ‘dit is een vette tekst’. d. Maak het woord ‘vette’ vet met de knop B e. Klik op het tabblad HTML. Je ziet nu de broncode van de tekst in HTML. Dit is voor de meeste toepassingen niet erg belangrijk. Als je wat verder wilt komen met internet is het toch handig om een beetje HTML te begrijpen. Voor nu is het genoeg dat je even weet waarom dat tabblad er zit. Ga weer terug naar het visual tabblad.

4

f.

Behalve Bold zitten er nog veel meer knopjes die in de basis lijken op wat je vanuit Word kent. Experimenteer een beetje met de knopjes. Tik nog wat meer tekst en probeer die met verschillende knoppen op te maken. Hieronder zie je wat toelichting over welke knop waarvoor is.

4. Toegang bepalen: Zoals in de inleiding al naar voren kwam: je hebt bepaalde rechten op de site. Maar je kan zelf bepalen wie er rechten heeft op jouw stukjes. Sowieso kunnen andere leerlingen jouw werk niet zomaar weggooien, maar ze kunnen wel de hele tekst vegen. En wat nog erger is: als we met 180 studenten zomaar allemaal proefteksten gaan invoeren, dan moet je eerst door een lijst van 500 postjes heen voordat je die van jezelf gevonden hebt. Daar moet je dus wat aan doen. Onderin de rechter kolom staat het blokje Access, oftewel toegang. Je moet hier de groep waarin jij zit aanvinken. Als de groepsindeling nog niet duidelijk is, dan zie je onder access alleen een groep voor je klas (bijvoorbeeld 2011-1X). Als de groepjes wel duidelijk zijn zie je ook je projectgroep staan. Bijvoorbeeld 2011-1X-PietjeJantjeKlaasje. Dat laatste is je beste keuze (zodra dat werkt). Als je hier het vakje aanvinkt, dan betekent dat dat je werk in het backoffice alleen maar te zien is voor de mensen in die groep / klas. Je moet dit bij iedere nieuwe bijdrage opnieuw doen. 5. Opslaan en publiceren We gaan nu kijken hoe het opslaan van een document werkt in WordPress a. Klik rechts op Save draft of Save om de kladversie op te slaan. Doe dit telkens opnieuw als je zo meteen echt aan de slag gaat, anders worden je wijzigingen niet opgeslagen! b. Klik op Preview om te kijken hoe je stuk er voor gebruikers (frontend) uitziet. c. Als je nu ook nog op Publish zou klikken, dan pas staat het document echt live. Maar dat doen we niet, want het is maar een kladje. Klik dus op Move to trash om deze blogpost weg te gooien. 5

Een oefenblogpost invoeren 6. Nu gaan we een echte tekst invoeren. We gebruiken hiervoor een tekst over personal branding, die in Word al helemaal af is. Als je zelf gaat schrijven is het een mogelijkheid om ook eerst in Word je tekst te maken, en deze daarna pas in te voeren in WordPress. Je kan ook direct in WordPress werken. Dat laatste scheelt werk, maar je moet dan wel online werken. a.

b. c.

d.

Open het document ‘WordPress-oefening-plattetekst’. Je kan dat document vinden onder het kopje ‘handleiding’ op het Dashboard van je backoffice. Dit is de tekst die je over gaat zetten van Word naar WordPress. Open in WordPress een nieuwe blogpost met Add New. Kopieer eerst de titel van Word naar WordPress. Nu gaan we de rest van de tekst kopiëren. Selecteer in Word de hele tekst, behalve dan de titel en het onderste stuk (onder de streep) waar een stuk HTML code staat. Maar let op: plak het niet direct in het witte vak in WordPress. Er worden dan allerlei codes uit Word meegekopieerd, en dan wordt het een zooitje. Gebruik het knopje zoals je dat hier links in de kantlijn ziet. Klik er op en plak je tekst in het scherm wat je dan krijgt en klik vervolgens op de button Insert. Na de tekst ‘Eerst even de minder spannende resultaten:’ staan drie alinea’s achter bulletpoints (in goed Nederlands ‘ongenummerde opsomming’). Verwijder de bulletpoints die je uit Word hebt meegekopieerd, en vervang deze door bulletpoints uit WordPress, door de tekst te selecteren en op het knopje zoals in de kantlijn te drukken

7. Ankeilers De eerste alinea is wat we noemen een ankeiler. Het is een begin van het artikel, maar ook een stukje dat iets verteld over wat je in de rest van het stuk te lezen krijgt. Het is deze tekst die ook op de overzichtspagina’s van de verschillende blogjes verschijnt. Dat gaat vanzelf, maar je moet WordPress wel uitleggen waar deze alinea eindigt. Dat doe je door na de eerste alinea de zogenaamde ‘MORE’ streep te zetten met de button als in de kantlijn. Als je zelf een stukje schrijft is het dus niet alleen een kwestie van na de eerste alinea deze streep zetten, je moet er ook goed op letten dat die eerste alinea ook echt geschikt is om op de voorkant van de site te zetten. 8. Links plaatsen: In de tekst die je hebt gekregen staan heel veel links, maar zoals het er nu staat zijn die erg rommelig. Het is de bedoeling om telkens de links ‘achter’ een bepaalde tekst staan waar je op moet klikken. a. Zoek in de tekst waar een URL staat, alleen het gedeelte binnen de { } haken. b. Knip de URL weg met Ctrl-X c. Selecteer de tekst waar je de link achter wil plaatsen en klik op de linkbutton (zie kantlijn) d. Je krijgt nu een schermpje waarin je de link kan plakken (Ctrl-V). Je kan nu kiezen of je de link wil openen in een nieuw venster, of in het zelfde venster. In het laatste geval verdwijnt dus bij het lezen de tekst van de blogpost. Bepaal zelf hoe je dat wilt. Klik op Add Link om het schermpje weer te sluiten. Let op: er staat al een http:// tekst. Plak jouw link daaroverheen, in plaats van daarachter, anders krijg je http://http://. e. Verwijder de eventueel overgebleven {} haken. 6

f.

Probeer nog een stuk of drie links goed op hun plek te zetten (of alle 14 als je perfectionist bent).

9. Plaatjes: Let op, het werken met plaatjes in WordPress is niet zo heel erg gebruiksvriendelijk. Er kan veel, maar je moet er een beetje mee experimenteren voordat je weet waar alle opties zitten, en dan nog gaan er soms kleine dingen fout. Even geduld dus. En als je onderstaande stappen precies volgt moet het goed gaan. a. Zet je cursor op de juiste plek in de tekst, voor ‘De grappigste student ‘. Dat is niet de alinea die of de Google resultaten van Jasper Degreef gaat, maar anders past het niet goed. b. Boven de tekst-editor staat na de tekst Upload/Insert de plaatjesbutton (zie kantlijn) die je gebruikt om nieuwe plaatjes toe te voegen. Klik hier op en ga naar ‘Next Gen Gallery’. Selecteer in de dropdownbox ‘studenten’ en klik op Select. Klik achter het plaatje Jasper Degreef op ‘show’. c. Selecteer ‘Full size’, anders krijg je een heel klein plaatje d. Klik op ‘insert into post’ om het plaatje in je verhaal op te nemen. e. Het plaatje staat nu nog niet helemaal goed. Klik op het plaatje en vervolgens op het icoontje Edit Image (zie rechts).

 

Op het eerste tabblad selecteer je onder Allignment ‘right’. Het plaatje komt nu rechts in de tekst te staan. Maak het plaatje kleiner (60%) Klik op het tabblad Advanced settings en pas de volgende velden aan. Hierdoor plakt het plaatje niet helemaal aan de tekst vast de tekst.



Klik onderaan op de button Update



10. Zelf een plaatje zoeken en toevoegen: Het plaatje in de vorige oefening zat al in de bibliotheek. Als je zelf een blogpostje gaat schrijven, dan moet je ook zelf je plaatjes verzamelen. Vaak zullen dat plaatjes van het internet zijn. Het is dan handig als je weet hoe je schermfoto’s kan maken. Op je computer zit een PrtScn (printscreen) functie, waarmee je zo’n schermfoto kan maken. Op een windows computer kan je die vervolgens plakken in Paint, of misschien heb je zelf wel een beter programma als Photoshop. Het bestand wat je in paint maakt moet je dan weer opslaan, voordat je het kan toevoegen in WordPress. Een makkelijke manier om screenshots te maken van Internetsites is het programma Fireshot. Dat programma is oorspronkelijk gemaakt als een zogenaamde Add-On voor de browser Firefox (vandaar dat ‘Fire’). Maar er is ook een versie voor Internet Explorer (IE) of Google Chrome. Je vindt deze gratis programma’s onder http://screenshot-program.com/fireshot/fireshot_pro.php. 7

Als je dat geïnstalleerd hebt komt er een fireshot button te staan in een balk bovenin je browser waarmee je een schermfoto maakt. Je moet zelf even uitvogelen hoe het verder werkt. We gaan nu het plaatje van de site van Dominique Scholten toevoegen. a. Ga naar http://www.vads.nl, maak een schermfoto en sla die op als bestand. b. Druk in je WordPress post opnieuw achter Upload/Insert op de Add an image button. c. Klik op Select file en voer het plaatje in. d. Kijk nu zelf hoe je de instellingen wilt. Je kan onder Caption weer een onderschrift invullen. Onder Link URL kan je een link naar www.vads.nl toevoegen. Onder Edit image kan je het plaatje nog bewerken. Druk uiteindelijk op Insert into post en kijk naar het resultaat. Werk eventueel bij met Edit Image als je nog niet tevreden bent. 11. Video plaatsen Het YouTube filmpje van Guido plaatsen gaat zo: a. Ga op de goede plaats in de tekst staan. Klik op de You Tube button b. Plak de link naar het YouTube tussen de twee codes. Als het goed is ziet het er zo uit: [youtube]http://www.youtube.com/watch?v=KHtq_Guvx5M[/youtube] c. Verwijder eventuele overgebleven tekst van de oorspronkelijke verwijzing. Kijk in de preview of het werkt

12. HTML in je blogpost plakken We gaan nu het spelletje van Robbie in de tekst plaatsen. Dat is een HTML code. Een beetje technisch dus. Let op, dit gaat wellicht niet bij iedereen goed, maar het is wel grappig om te proberen. a) Als je in een klaslokaal zit, zet eerst je geluid uit! b) Ga naar het tabblad HTML, en zoek naar de tekst <Screenshot of HTML code Robbie Hageman> c) Vervang deze tekst door de HTML code die je onderaan het Word document vindt. d) Staat je geluid uit? Kijk met preview naar het resultaat.

8

Onderzoeksblogposts: speciale aanwijzingen De basis heb je nu onder de knie. Nu moet je zelf aan de slag met het schrijven van je eigen blogpost. Hier volgen verschillende specifieke onderwerpen die belangrijk zijn om alles zo mooi mogelijk te m aken en het te laten werken om met alle studenten samen op één internetsite te publiceren. Categorieën Onder categorieën kan je instellen onder welk menuitem jouw blogpost moet verschijnen. Zolang de groepsindeling nog niet duidelijk is, staan de goede categorieen ook nog niet in het systeem. Als dat wel geregeld is, dan spreekt dit verder redelijk vanzelf, maar zorg dat je het niet vergeet! Tags Plaats als tags de merken die je noemt, de platforms en middelen die dat merk gebruikt, en de theorieen die je bespreekt. Bijvoorbeeld: Puma, Facebook, zoekmachinemarketing, Location Based Media. Je kan je tags één voor één invoeren, of meerdere tegelijk met een komma ertussen. Als je klikt op ‘Choose from the most used tags’ kan je aansluiten bij tags die andere gebruiken. Redactioneel stappenplan Als je voor een internetsite werkt bij een professionele organisatie, dan is het niet zomaar een kwestie van een stukje maken en dat op het web plaatsen. Je moet ook anderen naar je werk laten kijken. Bij ons gaat dat in verschillende stappen. 1. Kladversie: Je maakt een eigen kladversie. Daarna 2. Feedback svp: Je stuurt je eerste versie door naar je groepsleden voor feedback. Die maken kleine aanpassingen en zetten er commentaar onder. 3. Feedback klaar: Je verbetert je werk op basis van de kritiek van anderen. 4. Nakijken svp: Je stuurt je werk naar je docent. Die gaat het nakijken. 5. Nagekeken: Je verbetert zaken die je docent heeft aangegeven. Als je docent heeft aangegeven dat het echt nog niet goed genoeg is, dan zet je de status weer terug op ‘nakijken svp’. 6. Publiceer: Eindelijk ben je klaar, en kan je je postje met de wijde wereld delen. Je moet zelf bijhouden waar je bent door de status van je postje in het blokje Publish telkens aan te passen. Als je een postje van iemand anders hebt nagekeken zet je die op ‘Feedback klaar’. Stuur wel even een mailtje als je feedback wilt. Rond de inleverdatum kijkt de docent zelf naar welke blogposts op ‘nakijken svp’ staan, maar als je vroeg of veel te laat bent met inleveren, dan moet je ook je docent even een mailtje sturen.

9

Editorial comments Als je feedback geeft op het werk van anderen, kan je die invoeren onder Editorial comments. Die optie staat onder je tekst invoervak, in de middenkolom. Die opmerkingen zijn alleen in het backend te zien. Gebruik deze functie, want je docent wil ook echt zien dat jullie elkaars werk kritisch hebben bekeken. Dit wordt meegewogen in de beoordeling. Jouw profiel: Onder je postje kan je een keurig blokje zetten waarin alles over jou staat. Je moet zelf bepalen hoeveel informatie je hier weggeeft, maar dit zijn de stappen als je het helemaal goed wilt doen: 1. Ga in het hoofdmenu naar Profile 2. Voer een profielfoto in onder Picture, rechtsboven. 3. Pas je Biographical Info aan. 4. Zet Turn on/off Social Author Bio op ‘on’. 5. Voeg de sociale netwerken toe waarop mensen jou kunnen vinden en zet die ook op ‘on’. Onder aan de pagina zie je een blokje met auteursinfo staan, zoals dat op de website zal verschijnen. Klik helemaal onder aan de pagina op Update profile als je tevreden bent met het resultaat. Social media marketing Tot slot. Je blog staat online. Je hebt er misschien zelfs al een cijfer voor gekregen. Toch nog eventjes reclame maken voor je eigen werk! Ga naar het front-end en zoek je eigen stuk op. Aan de bovenkant en de onderkant van de pagina kan je met deze knopjes je werk delen met de rest van de wereld.

10

Zelf een blog starten? Zoals gezegd aan het begin van de cursus Nieuwe Media Lab: we kunnen je niet alles leren. Als je echt een beetje handig wilt worden met nieuwe media, dan zal je zelf initiatief moeten nemen. Wat je nu hebt geleerd over WordPress kan dan heel erg goed van pas komen. Vandaar nog even dit laatste hoofdstuk. Als je een Facebook account aanmaakt, dan werk je op de site van Facebook. Bij WordPress zit dat wat ingewikkelder in elkaar. Het account wat je in deze cursus hebt gemaakt, is wel gemaakt met het CMS WordPress, maar het is een eigen installatie met een eigen database van FEHT. Je kan daarmee dus alleen maar blogposts schrijven voor www.nieuwemedialab.nl. Wellicht is dat leuk als je een keer een stage loopt en interessante ontdekkingen hebt gedaan rond nieuwe media. Een gratis WordPress blog aanmaken Als je verder wilt zul je een eigen WordPress domein moeten aanmaken. Leuk als je in het buitenland een stage doet, of als je je als specialist op een bepaald terrein wilt profileren. Of gewoon een soort dagboek bijhouden is ook een mooi project. Op de site van WordPress kan je met een paar muisklikken een WordPress blog aanmaken. De eerste stappen zijn makkelijk, maar daarna is er een hoop te ontdekken. Je kan je eigen vormgeving kiezen, leren hoe je voor andere mensen een account maakt, pagina’s maken, reacties beheren en nog veel meer zaken die we je niet hebben geleerd nu, maar die ook niet heel erg moeilijk zijn als je een beetje weet hoe het kan werken. Als je op de site van WordPress een account aanmaakt krijg je een URL als bijvoorbeeld slimmestudent.WordPress.com. Prima om mee te beginnen. Kost nul komma niks euro. Ga naar http://nl.WordPress.com/ en kijk zelf eens hoe makkelijk het is. Je eigen WordPress domein aanmaken Het kan ook zijn dat je nog een stap verder wilt. Je wilt bijvoorbeeld je eigen sportvereniging helpen om goedkoop een website op te zetten. Je kan dan beter zorgen dat je een eigen WordPress installatie regelt, of in vaktermen een ‘self-hosted domain’. Dat betekent dat je een hostingpartij moet vinden waar je een stukje webserver kan huren. Kosten in de orde van grootte van 50 tot 200 euro per jaar. Als je zo’n eigen domein hebt, dan kan er opeens nog veel meer. Je kan zogeheten plugins installeren, en zo extra functies toevoegen. Dit gaat wellicht wat ver, en is alleen weggelegd voor degene die echt een beetje de internet kant op willen. Maar alles is te leren met een beetje doorzettingsvermogen en veel hulp van je grote vriend Google!

11