Your SlideShare is downloading. ×
  • Like
WordPress instructies, met gebruik van MySiteMyWay thema
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WordPress instructies, met gebruik van MySiteMyWay thema

  • 306 views
Published

Registreren, auteur, dashboard, user 3 – 4 …

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

Published in Social Media
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
306
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Academic blogging Use of WordPress - an introduction Rob le Pair
  • 2. Inhoud Registreren, auteur, dashboard, user Biographical info Posts en pages Add post, titel, permalink Editor: visual en text Editor: copy paste, zonder en met opmaak Editor: link maken Save, draft, publish Categorieën Featured image Afbeelding toevoegen Teaser direct onder de titel in blauwe balk Blockquote en pullquote Social bookmarking Opsomtekens Werken met kolommen Witruimtes Filmpje embedden Slideshare presentatie embedden Dia 3–4 5 6 7–8 9 10 – 13 14 15 16 17 – 20 21 – 25 26 – 28 29 – 32 33 – 36 37 – 40 41 – 45 46 47 – 51 52 – 57 ga naar
  • 3. 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
  • 4. Menu > User Niet aanvinken 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
  • 5. Menu > User > biographical info   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 dia 5
  • 6. 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
  • 7. Add new post de editor dia 7
  • 8. 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.  dia 8 maar je kan de permalink aanpassen: [Edit]
  • 9. Post, opmaak; twee views: 'Visual' en 'Text' (html code) Standaard-tekst wordt aangeduid met 'Paragraph' dia 9 de tab 'Text' laat alle html-code zien, hier bijv. <h3> en </h3> (de begin- en eindcode voor header-niveau 3)
  • 10. 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
  • 11. 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
  • 12. Post, editor, plakken met opmaak [1] Gebruik deze knop zodra je tekst vanuit Word hebt gekopieerd, om die te plakken in je blogpost   dia 12 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
  • 13. Post, editor, plakken met opmaak [2] Origineel in Word:  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 dia 13 Resultaat in WordPress editor, in het tussenscherm via knop [W]
  • 14. 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  je wil voorkomen dat een lezer bij klikken de site kwijt is  maar: vink dit niet aan voor 'interne' links;  voor interne links kan het handig zijn om 'link to existing content' te gebruiken  klik op 'Add Link' dia 14 Een gemaakte link opheffen
  • 15. Post > save, publish  Publish / status  Save     dia 15  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
  • 16. Post > Categories  Categories zijn belangrijk!! i.v.m. automatisch genereren van blog-overzichten  Voorlopig vooral om administratieve redenen en transparante navigatie   dia 16 categorie voor de groep waarin je zit categorie voor de opdracht
  • 17. 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 breedte dit 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
  • 18. Featured image (2) Archive page  Featured image  verschijnt als thumbnail in bijv. 'Recent posts'-lijstje  verschijnt op Archive-pages Recent posts met thumbnail-afbeelding dia 18
  • 19. 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
  • 20. 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
  • 21. 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 waarin de afbeelding al staat:  knopje rechts om image te verwijderen (uit post, niet uit media-bibliotheek)  knopje links om layout en klikgedrag te editen dia 21 Edit image Image verwijderen
  • 22. 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 voorkom je dat tekst eerst naast de image doorloopt en daarna er onder 'omheen krult'; dat gebeurt bij Alignment Left  Title: iets invullen heeft geen zichtbaar effect  Caption: = het onderschrift direct onder de afbeelding  Link URL: kies  'None'; óf  'Link to Image'  zie volgende dia dia 22
  • 23. 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 is aanklikbaar: een link naar... zie volgende dia dia 23
  • 24. Afbeelding toevoegen in blogpost: link opties   ... scherm met opties  'Link to Image'  de afbeelding is aanklikbaar: een link naar...  Klik op de tab 'Advanced Settings':  Vul in het veld 'Link Rel' in: lightbox of prettyphoto dia 24
  • 25. 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 ×
  • 26. 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
  • 27. Onder de titel een 'teaser' opnemen (2)  Onder 'Intro Options' staat:  Als je 'Title & Teaser Tekst' aanvinkt krijg je een extra tekstveld waar je een 'teaser' kan redigeren: Zie volgende dia voor het resultaat dia 27
  • 28. Onder de titel een 'teaser' opnemen (3)  Resultaat: dia 28
  • 29. Tekstopmaak: quotes - blockquote Om een citaat meer nadruk te geven kun je er een blockquote van maken Selecteer de tekst waar je een blockquote van wil maken, en klik op de blockquote-knop dia 29
  • 30. Tekstopmaak quotes – pullquote [1] Nog meer nadruk op de quote via gebruik van Pullquote: dia 30
  • 31. Tekstopmaak quotes – pullquote [2] 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] Met de shortcode-generator gaat dit eenvoudig:  volgende dia dia 31
  • 32. Tekstopmaak quotes – pullquote met Shortcode Generator Gebruik de shortcode-generator: Kies: Pullquotes & Blockquotes Kies type: Pullquote4 hier staat de quote (zonder aanhalingstekens) Dit vinkje zorgt voor de aanhalingstekens als je Align: center zou kiezen, verschijnt de pullquote over de volle breedte dia 32 Als je bij 'Align' niks kiest (het is 'optional'), dan verschijnt pullquote 4 over de volle breedte
  • 33. 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 editor maar onder de gepubliceerde blogpost dia 33
  • 34. Post > 'social sharing' [2] bezoeker deelt dit als Twitter-bericht van hem/haar dit venster verschijnt (in nieuwe tab/venster)  Structuur van de tweet: [titel] - [url]  Maak je geen zorgen om de lengte van de url: die wordt automatisch verkort dia 34
  • 35. Post > 'social sharing' [3] bezoeker deelt dit als Facebook-bericht van hem/haar dit venster verschijnt (in nieuwe tab/venster) dia 35
  • 36. Post > 'social sharing' [4] bezoeker deelt dit als LinkeIn-bericht van hem/haar dit venster verschijnt (in nieuwe tab/venster) dia 36
  • 37. 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
  • 38. Tekstopmaak [3] opsomtekens [2] arrow_list  Arrow_list in de editor:    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] dia 38
  • 39. Tekstopmaak [3] opsomtekens [3] circle_arrow + een 'fancy link'   Circle_arrow_list Mogelijk toepassing: verwijzingen mooier maken: linktekst vooraf laten 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_link De 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) dia 39 de aanklikbare linktekst
  • 40. 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
  • 41. Werking van de shortcode generator voorbeeld: tekst in kolommen [1]  Kies in shortcode editor: Column Layouts  Er zijn veel variaties, we kiezen hier voor Three Column Layout  Dan worden er drie tekstvelden geopend;   dia 41 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", dan staan de shortcodes alvast op de goed plaats t.o.v. elkaar
  • 42. Werking van de shortcode generator voorbeeld: tekst in kolommen [2]  Als je nu op 'Send Shortcode to editor' klikt  Komt deze code in de editor te staan:  deze en de volgende stap zijn al genomen als je hiervóór al 3 x "bla, bla" had ingevuld (zie vorige dia) Je kunt nu met wat 'Enters' de ruimte maken om tekst in te voeren:  een kolom start met [one_third] en eindigt met [/one_third]  de shortcode voor de laatste kolom heeft daarbij altijd de toevoeging _last] dia 42
  • 43. Werking van de shortcode generator voorbeeld: tekst in kolommen [3]  Dit is de output op de website dia 43
  • 44. Werking van de shortcode generator voorbeeld: 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 de titled box komt te staan  De box-tekst dia 44
  • 45. Werking van de shortcode generator voorbeeld: 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
  • 46. 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
  • 47. 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
  • 48. Filmpje embedden in blogpost [1] shortcode voor YouTube video shortcode 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 hebben als je 'Height' kleiner maakt kun je 'Width' blanco laten en omgekeerd (video houdt juiste proporties) dia 48
  • 49. Filmpje embedden in blogpost [1] shortcode voor YouTube video shortcode generator [2]  een greep uit de opties om knop voor fullscreeen weergave 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
  • 50. Filmpje embedden in blogpost [1] shortcode voor YouTube video shortcode generator [3]  Vergeet niet te klikken op  Shortcode komt op de plaats waar cursor staat  de ingevoegde shortcode met de hiernaast aangevinkte opties is: [youtube url="http://www.youtube.com/watch?v=wUH-Hbh-Jhg" fs="1" rel="0" showinfo="0"] dia 50
  • 51. 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
  • 52. 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
  • 53. SlideShare presentatie embedden [2]      dia 53 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
  • 54. SlideShare presentatie embedden [3a] Klik op [<>Embed] Kies geen formaat; werkt niet, dat lossen we anders op Kopieer de code die hier staat dia 54
  • 55. 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] 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 [slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01&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
  • 56. SlideShare presentatie embedden [4a] Hieronder is geen &w=... code opgenomen: [slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01] Zijbalk dia 56 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
  • 57. SlideShare presentatie embedden [4b] Hieronder is &w=... code opgenomen: [slideshare id=15390803&doc=hetexperimentdocent-121128114948-phpapp01]&w=675 Zijbalk dia 57 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