Academic blogging

Rob le Pair

Use of WordPress - an introduction

Dia ga naar

Registreren, auteur, dashboard, user 3 – 4Biographical info 5Posts en pages 6Add post, titel, permalink 7 – 8 Editor: visual en text 9Editor: copy paste, zonder en met opmaak 10 – 13 Editor: link maken 14Save, draft, publish 15Categorieën 16Featured image 17 – 20 Afbeelding toevoegen 21 – 25Teaser direct onder de titel in blauwe balk 26 – 28Blockquote en pullquote 29 – 32Social bookmarking 33 – 36Opsomtekens 37 – 40 Werken met kolommen41 – 45 Witruimtes 46Filmpje embedden 47 – 51Slideshare presentatie embedden 52 – 57

Inhoud

Auteur worden

Registratie: je kunt zelf registreren let op activeringsmail:

kan gemarkeerd zijn met 'spam'; je wordt automatisch 'author'

daarom gaan we dit heel binnenkort uitzetten

naar Dashboard: http://businessenglish.ruhosting.nl/wp-admin

inlognaam

password

dia 3

Menu > User Niet aanvinken

Nickname verschijnt soms, bijv. op archiefpagina 'author archive'; verander dus pietjepuk in

Pietje Puk en kies hier ook de gewenste

'public display'

dia 4

Niet aanvinken

Menu > User > biographical info

dia 5

Deze info kunnen we wel/niet laten verschijnen onder elke blogpost, maar is niet per blogpost en ook niet per auteur aan of uit te zetten

als dit aan staat verschijnt voor alle auteurs onder elke blogpost de auteur-info;deze info verschijnt voor jou niet als je het veld leeg laat

Blogpost of Page?

Page is minder tijdgebonden:

aan een page worden geen datum, categorie, tags en auteursnaam gekoppeld, en verschijnen daarom niet in archive-overzichten, lijstjes met recente bijdragen in categorie ..., etc.

voorbeelden van pages: de 'wie-zijn-wij', 'about me', 'about this blog' pagina's de personal pages van auteurs de home-pages van groepen, of de openingspagina

voorlopig moet je als 'author' geen pages maken en kun je volstaan met posts

Blogpost is dynamischer, actueler, en vaak persoonlijker, maar daarom ook 'vluchtiger':

datum, categorie, tags en auteursnaam maar afhankelijk van het design zijn blogposts snel te vinden

dia 6

Add new post

de editor

dia 7

Post: titel en permalink

Titel en 'permalink': = permanente URL

Standaard bevat de permalink de titel (daar worden eventuele bijzondere tekens en spaties automatisch uit gesloopt); met afbreekstreepjes in de plaats van de spaties.

maar je kan de permalink aanpassen: [Edit]

dia 8

Post, opmaak; twee views: 'Visual' en 'Text' (html code)

Standaard-tekst wordtaangeduid met 'Paragraph'

de tab 'Text' laat alle html-code zien, hier bijv. <h3> en </h3> (de begin- en eindcode voor header-niveau 3)

dia 9

Post, editor, plakken zonder opmaak [1]

Gebruik deze knop zodra je tekst ergens hebt gekopieerd en wilt plakken in de WordPress editor. bij klikken opent zich een leeg tekstveld, een tussenschermpje; bij plakken in dit tekstveld is de tekst ontdaan van alle opmaak,

dus ook van allerlei onzichtbare ongewenste code;(maar ook van eventuele gewenste code: vet, cursief, etc.)Zie volgende dia voor behoud van enige (Word-)opmaak

dia 10

Post, editor, plakken zonder opmaak [2]

Resultaat in WordPress editor, in een tussenscherm, via knop [T]

Origineel in Word:

opmaak vet en cursief en lettertype Calibri ben je kwijt opsomtekens lijken behouden, maar het zijn losse bullet-tekens

geworden, lelijk en niet-functioneel als opsomtekens,ook niet na [Insert] in de editor

dia 11

Post, editor, plakken met opmaak [1]

Gebruik deze knop zodra je tekst vanuit Word hebt gekopieerd,om die te plakken in je blogpost bij klikken opent zich een leeg tekstveld; bij plakken in dit tekstveld blijft opmaak zoals vet, cursief, etc. behouden.

maar het lettertype van je Word-tekst blijft niet behouden

dia 12

Post, editor, plakken met opmaak [2]

Resultaat in WordPress editor, in het tussenscherm via knop [W]

opmaak vet en cursief zijn behouden, lettertype Calibri ben je kwijt

opsomtekens krijgen ook de juiste code na [Insert] in je tekst heb je de gewenste layout

Origineel in Word:

dia 13

Post, editor, een link maken

selecteer de tekst die linktekst moet worden klik op de link-knop; het volgende scherm verschijnt:

plak de url erin;'title' kan leeg blijven

'Open link in new window/tab: vink dit aan voor alle links die

naar buiten de businessenglish-site linken

maar: vink dit niet aan voor 'interne' links;

voor interne links kan het handig zijnom 'link to existing content' te gebruiken

klik op 'Add Link'

Een gemaakte link opheffen

je wil voorkomen dat een lezerbij klikken de site kwijt is

dia 14

Post > save, publish

Publish / status

Save draft

post opgeslagen published

Preview changes – inclusief wijzigingen die je na opslaan maakt

Published:je kan het op elk moment weer terugzetten op Draft

Published: je kunt datum, tijdstip wijzigen Je kan visibility aanpassen

dia 15

Post > Categories

Categories zijn belangrijk!!i.v.m. automatisch genereren van blog-overzichten

Voorlopig vooral om administratieve redenen en transparante navigatie

categorie voor de groep waarin je zit

categorie voor de opdracht

dia 16

Featured image (1)

Featured image

1 verschijnt als thumbnail in bijv. 'Recent posts'-lijstje

2 verschijnt op Archive-pages

3 verschijnt ook bovenaan in de post,over de volle breedtedit is meestal ongewenst, want vaak lelijk, dus: als je een featured image gebruikt vink dan aan:

Let op: hiermee stop je alléén de derde functie (image bovenaan in volle breedte in de post); de eerste twee functies blijven van kracht

dia 17

Featured image (2)

Featured image verschijnt als thumbnail

in bijv. 'Recent posts'-lijstje verschijnt op Archive-pages

Recent posts met thumbnail-afbeelding

dia 18

Archive page

Featured image (3)

klik op 'set featured image'

je komt in de media-bibliotheek

als de afbeelding al een keer gebruikt is dan staat die in de Media Library

als je een nieuwe afbeelding wilt uploaden, klik je op 'Upload Files'

klik op 'Select Files' om een afbeelding op je computer te selecteren;die wordt dan in de media bibliotheek gezet

dia 19

Featured image (4)

... activeer de bedoelde afbeelding

(vinkje in rechterbovenhoek) rechts-onder in het scherm klik je op je bent terug in de editor en je ziet rechts:

vergeet niet om onder 'General options''Disable Featured Image on this post' aan te vinken(dat kan altijd achteraf ook nog)

Zoals eerder is benadrukt: dit 'disablen' voorkomt slechts dat de afbeelding groot bovenaan, over de volle breedte in de blogpost verschijnt

dia 20

Afbeelding toevoegen in blogpost

Klik links boven op de knop 'Add Media'

doorloop dezelfde stappen als bij 'featured image';maar nu zegt de knop rechts-onder:

Voordat je op 'Insert into post' klikt kun je nog iets aan de layout veranderen,maar dat kan ook vanuit de post waarinde afbeelding al staat:

knopje rechts om imagete verwijderen (uit post, niet uit media-bibliotheek)

knopje links om layout en klikgedrag te editen

dia 21

Image verwijderenEdit image

Afbeelding toevoegen in blogpost: layout opties

klik op knopje links

scherm met opties Size: image verkleinen tot bepaald

percentage Alignment: als je 'None' kiest komt

de image links te staan en voorkomje dat tekst eerst naast de imagedoorloopt en daarna er onder 'omheen krult'; dat gebeurt bijAlignment Left

Title: iets invullen heeft geen zichtbaar effect

Caption: = het onderschrift direct onderde afbeelding

Link URL: kies 'None'; óf 'Link to Image'

zie volgende dia

dia 22

Afbeelding toevoegen in blogpost: link opties

... scherm met opties Link URL: kies

'None'; óf

'Link to Image'

'None': de afbeelding staat niet-aanklikbaar in je post

'Link to Image' de afbeelding isaanklikbaar: een link naar...

zie volgende dia

dia 23

Afbeelding toevoegen in blogpost: link opties

... scherm met opties

'Link to Image' de afbeelding isaanklikbaar: een link naar...

Klik op de tab 'Advanced Settings': Vul in het veld 'Link Rel' in:

lightbox of prettyphoto

dia 24

Afbeelding toevoegen: toepassing van het Lightbox-effect

Denk ook aan grafieken die je klein in de lopende tekst opneemt, waarbij een lezer door te klikken alle details in vergrote weergave ziet...

Let op: je moet de afbeelding in de grootste gewenste weergave uploaden, en die in de lopende tekst verkleinen (zie 'percentage'), want in de lightbox wordt de afbeelding nooit groter dan die bij het uploaden was

Bijkomend voordeel: de lezer blijft op dezelfde pagina / hetzelfde scherm en na wegklikken van de Lightbox is lezer weer op de plaats waar hij/zij was.

(op veel websites is een afbeelding aanklikbaar, en na klikken zie je die – soms wel, soms niet vergroot – in een nieuwe browser-tab of zelfs in een nieuw browser-venster of in hetzelfde venster met enkel de afbeelding, al of niet vergroot, in dat venster

in beide gevallen is de lezer de eigenlijke tekst voor even kwijt

Daarom luidde de instructie hiervóór:• kies óf 'None' (image wordt geen link), óf• 'Link to image', maar gebruik dan

Lightbox via Advanced Settings:vul bij Link Rel in: lightbox

×

dia 25

Onder de titel een 'teaser' opnemen (1)

De standaard ('Default Intro') is: in de blauwe balk de titel van je blogpost:

Onder 'Intro Options' staat:

dia 26

Onder de titel een 'teaser' opnemen (2)

Onder 'Intro Options' staat:

Als je 'Title & Teaser Tekst' aanvinkt krijg jeeen extra tekstveld waar je een 'teaser' kanredigeren:

dia 27

Zie volgende dia voor het resultaat

Onder de titel een 'teaser' opnemen (3)

Resultaat:

dia 28

Tekstopmaak: quotes - blockquote

Om een citaat meer nadruk te geven kun je er een blockquote van maken

dia 29

Selecteer de tekst waar je een blockquote van wil maken, en klik op de blockquote-knop

Tekstopmaak quotes – pullquote [1]

dia 30

Nog meer nadruk op de quote via gebruik van Pullquote:

Tekstopmaak quotes – pullquote [2]

dia 31

Met de shortcode-generator gaat dit eenvoudig: volgende dia

De code die in de editor komt te staan is voor deze pullquote:[pullquote4 quotes="true"]users can create huge waves of outrage within just a few hours[/pullquote4]

Tekstopmaak quotes – pullquote met Shortcode Generator

dia 32

Gebruik de shortcode-generator:

Kies type: Pullquote4

hier staat de quote(zonder aanhalingstekens)

Dit vinkje zorgt voor de aanhalingstekens

Als je bij 'Align' niks kiest (het is 'optional'), dan verschijnt pullquote 4 over de volle breedte

Kies: Pullquotes & Blockquotes

als je Align: center zou kiezen, verschijnt de pullquote over de

volle breedte

Post > 'Sociable' - Sharing your content [1]

Disable sociable?

'Social' is de aanduiding voor 'Social sharing':elke bezoeker kan het verhaal delen, verwijzen naar het verhaal; dat kan bezoeker natuurlijk altijd, maar deze knoppen maken het wel erg eenvoudig; zie illustraties op volgende dia's

't Doet er niet toe of, en op welke sociale netwerken je zelf actief bent, maar waar de bezoeker de verwijzing kan plaatsen

de knoppen vind je dan ook niet in de editormaar onder de gepubliceerde blogpost

dia 33

Post > 'social sharing' [2]bezoeker deelt dit als Twitter-bericht van hem/haar

Structuur van de tweet: [titel] - [url]

Maak je geen zorgen om de lengte van de url:die wordt automatisch verkort

dit venster verschijnt(in nieuwe tab/venster)

dia 34

Post > 'social sharing' [3]bezoeker deelt dit als Facebook-bericht van hem/haar

dit venster verschijnt(in nieuwe tab/venster)

dia 35

Post > 'social sharing' [4]bezoeker deelt dit als LinkeIn-bericht van hem/haar

dit venster verschijnt(in nieuwe tab/venster)

dia 36

Tekstopmaak [3] opsomtekens [1]

In het menu gebruik je deze knop

bullets springen iets in vanaf linker kantlijn tekst wordt netjes uitgevuld bij <Enter> nieuwe bullet, <Sh.-Enter> voor niewe regel binnen bullet-alinea bij 2 x <Enter> ben je voorbij de opsom-code en krijg je weer standaard-tekst

zonder bullets

Hierna volgen instructies voor mooiere variaties

dia 37

Tekstopmaak [3] opsomtekens [2] arrow_list

Arrow_list

Hiervoor is extra code nodig: een shortcode;shortcode staat altijd tussen [vierkante haken]

Maak eerst de standaard-opsomming Plaats boven het eerste opsomteken de code [arrow_list]

plaats onder het laatste opsomteken de code [/arrow_list]

in de editor:

dia 38

Tekstopmaak [3] opsomtekens [3] circle_arrow+ een 'fancy link'

Circle_arrow_list Mogelijk toepassing:

verwijzingen mooier maken: linktekst vooraflaten gaan door deze circle_arrow bullet

Maar ook een 'lijst' met één verwijzing is al mooi; de shortcode:boven 1e opsomteken de code [fancy_list style="circle_arrow"]onder laatste opsomteken de code [/fancy_list]

Een Fancy_linkDe linktekst "Annieks personal page" is geen 'gewone' link maar een zgn. fancy_link(met verwijs-pijltje na de linktekst) de shortcode voor fancy link met link en linktekst is:[fancy_link link="http://cls.ruhosting.nl/persuasion/Anniek_Boeijinga/"]Annieks personal page[/fancy_link]

de url (web-adres) de aanklikbare linktekst

dia 39

Tekstopmaak [3] opsomtekens [4] triangle_arrow bullets en checklist bullets

Triangle_arrow_list

Plaats boven het eerste opsomteken de code [fancy_list style="triangle_arrow"]plaats onder het laatste opsomteken de code [/fancy_list]

Check_list

Plaats boven het eerste opsomteken de code [fancy_list style="check_list"]plaats onder het laatste opsomteken de code [/fancy_list]

dia 40

Werking van de shortcode generatorvoorbeeld: tekst in kolommen [1]

Kies in shortcode editor:Column Layouts

Er zijn veel variaties, we kiezen hier voorThree Column Layout

Dan worden er drie tekstveldengeopend; je hoeft die nog niet

te vullen met de teksten voor de eerste, tweede en derde kolom

maar het kan wel; ook al typ je in elke'column content': "bla, bla", danstaan de shortcodes alvast op de goed plaats t.o.v. elkaar

dia 41

Werking van de shortcode generatorvoorbeeld: tekst in kolommen [2]

Als je nu op 'Send Shortcode to editor' klikt

Komt deze code in de editor te staan:

Je kunt nu met wat 'Enters' de ruimtemaken om tekst in te voeren:

een kolom start met [one_third]en eindigt met [/one_third]

de shortcode voor de laatste kolomheeft daarbij altijd de toevoeging _last]

dia 42

deze en de volgende stap zijn al genomenals je hiervóór al 3 x "bla, bla" had ingevuld(zie vorige dia)

Werking van de shortcode generatorvoorbeeld: tekst in kolommen [3]

Dit is de output op de website

dia 43

Werking van de shortcode generatorvoorbeeld: tekst in kolommen [4]

Binnen een kolom kun je weer andere shortcodes gebruiken; weer even ter illustratie:

Kies als shortcode: 'Fancy Boxes'

Type: een 'Titled Box'

De titel die in de gekleurde balk van detitled box komt te staan

De box-tekst

dia 44

Werking van de shortcode generatorvoorbeeld: tekst in kolommen [5]

Klik op

Je ziet dat in de tweede van de drie kolommen de Titled Box shortcode is geplakt;ook hier kun je titel en tekst nu nog aanpassen

De output op de website:

dia 45

Shortcode direct typen (waarvoor je de generator niet nodig hebt) voorbeeld: meer witruimte [margin--] en [divider]

Soms is het mooier om wat extra witruimte te maken als tekst te dicht volgt na een afbeelding,

of te dicht boven een afbeelding staat om twee tekstgedeelten wat ruimer van elkaar te scheiden

daar is een eenvoudige shortcode voor: [margin10] (10 pixels extra wit) [margin20] (20 pixels extra wit) ... [margin90] (90 pixels extra wit)

Nota bene: helemaal aan het einde van je blogpost: de shortcode [divider] helemaal aan het einde van je blogpost is altijd wat meer witruimte gewenst,

omdat zonder extra witruimte de social sharing icons nogal dicht onder einde van tekst staan:

Hier is wél voldoende witruimte ontstaan én een heel dunne scheidingslijn;

de code is: [divider]hiermee sluit je je blogpost af

dia 46

Filmpje embedden in blogpost [1] shortcode voor YouTube video [1]

YouTube filmpje kopieer in de browser de url van het filmpje, bijv.:

http://www.youtube.com/watch?v=wUH-Hbh-Jhg plak de url tussen de dubbele aanhalingsteksen in de shortcode (let op de

rechte haken) voor een YouTube video: [youtube url=""] Resultaat:

[youtube url="http://www.youtube.com/watch?v=wUH-Hbh-Jhg"]

dia 47

Filmpje embedden in blogpost [1] shortcode voor YouTube videoshortcode generator [1]

Voordeel van het gebruik van de 'shortcode generator': je kunt gewenste aanpassingen snel aanbrengen: kies uit lijst met shortcodes: video, en achter 'Type': YouTube plak de YouTube Video URL in het volgende veld

default is een mooi passende grootte; dus alleen aanpassen als je de video kleiner wil hebbenals je 'Height' kleiner maakt kun je 'Width' blanco laten en omgekeerd (video houdt juiste proporties)

dia 48

Filmpje embedden in blogpost [1] shortcode voor YouTube video shortcode generator [2]

een greep uit de optiesom knop voor fullscreeenweergave te enablen

voorkomen dat aan het einde het video-scherm gevuld wordt met gerelateerde video's

Titel bovenaan in video kan worden weggelaten

dia 49

Filmpje embedden in blogpost [1] shortcode voor YouTube video shortcode generator [3]

Vergeet niet te klikken op

Shortcode komt op de plaatswaar cursor staat

de ingevoegde shortcode met de hiernaast aangevinkte optiesis:[youtube url="http://www.youtube.com/watch?v=wUH-Hbh-Jhg" fs="1" rel="0" showinfo="0"]

dia 50

Filmpje embedden in blogpost [2] shortcode voor Vimeo video

Vimeo filmpje kopieer in de browser de url van het filmpje, bijv.: http://vimeo.com/48703194 plak de url tussen de dubbele aanhalingsteksen in de shortcode (let op de rechte

haken) voor een Vimeo video: [vimeo url=""] Resultaat:[vimeo url="http://vimeo.com/48703194"] Ook hier kun je gebruik maken van de Shortcode generator, met een aantal

opties specifiek voor weergave van een Vimeo filmpje:

dia 51

SlideShare presentatie embedden [1]

Op SlideShare www.slideshare.net vind je ontelbare presentaties, in de formaten PowerPoint, Keynote, .PDF en Word presentaties

om eigen presentaties te uploaden naar SlideShare moet je een gratis account aanmaken bij www.slideshare.net

om een presentatie te 'embedden' in een WordPress blog hoef je niet een account te hebben

dia 52

SlideShare presentatie embedden [2]

Je kunt de presentatie bekijken op SlideShare, al of niet op volledig scherm.

Net als bij de filmpjes van YouTube worden er altijd (min of meer) verwante relevante presentaties als suggesties gegeven.

Onder een presentatie staan links voor social sharing. Verder wordt er een embed-code gegeven om zo’n presentatie op een

eigen website weer te kunnen geven. Dat spaart al gauw één tot meer megabytes per presentatie op je eigen websiteruimte.

Zie volgende dia hoe dat in zijn werk gaat

dia 53

SlideShare presentatie embedden [3a]

Klik op [<>Embed]

Kopieer de code die hier staat

Kies geen formaat; werkt niet, dat lossen we anders op

dia 54

SlideShare presentatie embedden [3b]

Plak de code in je blog-tekst op de plaats waar je deze presentatie wilt embedden:

[slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01]

[slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01&w=600]

De breedte van de SlideShare-presentatie is standaard 400 px.;Als je de presentatie groter wilt hebben moet je iets toevoegen; hieronder is aan het einde, zonder spatie, toegevoegd:

&w=600

Op de businessenglish-website kun je tot &w=675 gaan;dan hou je nog een kleine witmarge rechts van de presentatie, tot de rechter zijbalk. zie volgende dia's

dia 55

SlideShare presentatie embedden [4a]

[slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01]

Op de businessenglish-website kun je tot &w=675 gaan;dan hou je nog een kleine witmarge rechts van de presentatie, tot de rechter zijbalk: zie volgende dia

Hieronder is geen &w=... code opgenomen:

dia 56

Zijbalk

SlideShare presentatie embedden [4b]

[slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01]&w=675

Op de businessenglish-website kun je tot &w=675 gaan;dan hou je nog een kleine witmarge rechts van de presentatie, tot de rechter zijbalk: zie volgende dia

Hieronder is &w=... code opgenomen:

dia 57

Zijbalk