LES 2: Berichten, Pagina’s en de Editor
Auteur: Ton Jense
Augustus/september 2020
Gilde Samensterker Basiscursus WordPress Basiscursus WordPress
2
Inhoudsopgave Les 2
Berichten en pagina’s ... 4
Kennismaken met Gutenberg ... 5
Een nieuw bericht maken... 6
Blokeditor functies ... 7
Een titel toekennen ... 9
Verschillende bloktypen ... 9
Tekstblokken ... 10
Klassieke paragraaf ... 10
Smart Slider 3 ... 15
Lijst ... 17
Tabel ... 17
Media ... 18
Afbeelding ... 18
Galerij ... 21
Audio ... 21
Ontwerp ... 22
Knoppen... 22
Kolommen ... 23
Meer ... 24
Widgets ... 25
Archiefblok ... 26
Kalenderblok ... 27
WP-Forms ... 28
Insluitingen ... 28
Document ... 29
Youtube ... 30
Een nieuw bericht maken ... 31
De titel van het bericht ... 32
3
De inhoud van het bericht ... 32
Categorie(ën) ... 37
Aangepaste header ... 37
Uitgelichte afbeelding ... 39
Opslaan ... 40
Controle ... 40
4
Berichten en pagina’s
Een bericht gebruik je in WordPress voor alle blog artikelen of nieuwsberichten. Het is maar net wat voor website je hebt. Berichten komen in elk geval altijd in het blogoverzicht te staan op je website. Bij Gilde Zoetermeer is dit de homepage.
Pagina’s gebruik je voor meer statische zaken. Denk aan de statuten, het huishoudelijk Reglement, de Privacyverklaring, etc. Eigenlijk is alles wat je kunt vinden via het menu een pagina. Maar ook een link in de Sidebar of in de tekst van een bericht kan je naar een pagina leiden.
Het grootste verschil tussen berichten en pagina’s is dus eigenlijk de plek waar het geplaatst wordt en hoe het te bereiken is. Maar er zijn méér verschillen. Zo kun je bij berichten categorieën en tags gebruiken en wordt daarbij (afhankelijk van het
gekozen thema en de instellingen) vaak ook de naam van de auteur en de
publicatiedatum getoond. Reacties staan ook bij berichten standaard aan, tenzij je het anders hebt ingesteld.
Bij pagina’s kun je een pagina-template uitkiezen en staan de reacties in eerste instantie uit, tenzij je dit anders hebt ingesteld. Wij hebben er bij het Gilde niet voor gekozen, maar je kunt ook een statische pagina instellen als homepage.
Pagina’s kunnen alleen worden gemaakt en veranderd door een beheerder of Redacteur.
De manier waarop een bericht of een pagina worden opgemaakt is verder min of meer hetzelfde. Je gebruikt er exact dezelfde gereedschappen voor. Alleen voeg je bij een bericht altijd een categorie en een uitgelichte afbeelding toe. En een pagina moet in het menu worden opgenomen of op een andere manier ontsloten.
5
Kennismaken met Gutenberg
De editor is de omgeving, waarin je een bericht of pagina kunt opmaken. Wordpress beschikt echter over méér dan één editor. Dat zit zo:
Wordpress beschikte jarenlang over slechts één editor, nu aangeduid als de klassieke editor. Sinds ongeveer 1,5 jaar is er echter ook een nieuwe editor. Die heet Gutenberg, vernoemd naar Johannes Gensfleisch zur Laden zum Gutenberg.
De veelgehoorde bewering dat Gutenberg de boekdrukkunst zou hebben uitgevonden, is incorrect. De blokdruk bestond al langer; daarbij werd een hele bladzijde uit één blok vervaardigd. Als zo'n bladzijde achteraf moest worden gecorrigeerd en geredigeerd, moest er een heel nieuw blok worden gesneden.
Gutenbergs grote verdienste bestaat uit het gebruik van losse letters. Door
Gutenbergs vinding werden correctie en redactie gemakkelijker en goedkoper; kleine veranderingen in het zetsel waren nu voldoende.
De klassieke editor bestaat uit een veld TITEL en één groot veld voor de hele CONTENT. De Gutenberg editor werkt met zogeheten “blocks”. De hele pagina bestaat hier dus uit “blokken”. Iedere nieuwe paragraph (alinea) is in Gutenberg een block.
Voor iedere soort content heb je in Gutenberg een “block”. Zo gebruik je een Paragraafblok voor tekst, een Afbeeldingsblock voor een plaatje en een YouTube- block om een YouTube-video op je pagina in te sluiten. De blokken kun je onderling van plaats verwisselen en vaak kun je achteraf ook nog het type van het blok
veranderen. Hoewel de klassieke editor nog steeds gebruikt kan worden, concentreren wij ons voor deze cursus op Gutenberg.
Onder de werkbalk Blok editor vind je het gebied voor de inhoud. Hier voeg je inhoud toe, bestaande uit verschillende soorten blokken. Elk blok dat je aan het inhoudsgebied toevoegt, heeft zijn eigen werkbalk en wordt ofwel net boven het blok weergegeven (standaard) of in de hoofdwerkbalk van de Blok editor bovenaan het scherm (als de optie Top Toolbar is ingeschakeld) ).
6
Daarnaast heeft elk blok in de Content ook een eigen werkbalk(je) en de
pictogrammen in die werkbalk zijn afhankelijk van het type inhoud dat het blok bevat.
De werkbalk op een alineablok zal bijvoorbeeld anders zijn dan de werkbalk op een kopblok, omdat ze verschillende soorten inhoud bevatten. Na het klikken op of het selecteren van een blok, kan het zijn dat er zelfs extra opties zijn die je kunt instellen in de zijbalk Instellingen. Alles hangt af van het type blok dat je hebt geselecteerd.
Een nieuw bericht maken
Om een nieuw bericht toe te voegen, beweeg je de cursor over de menuoptie Berichten in het navigatiemenu aan de linkerkant. Klik in het uitklapmenu op de link Nieuw bericht. Je kunt ook op de menuoptie Berichten klikken en vervolgens op de link Nieuw bericht of op de knop Nieuw > Bericht boven aan de pagina klikken. Je krijgt een leeg bericht te zien die lijkt op de onderstaande afbeelding.
7
Blokeditor functies
Bovenaan de pagina staat de hoofdwerkbalk van de Blok editor. Deze nieuwe werkbalk bevat een aantal pictogrammen:
Het Blok invoeg pictogram wordt gebruikt om nieuwe blokken in de inhoud in te voegen. Als je op dit pictogram klikt, wordt een klein paneel geopend dat toegang verschaft tot alle verschillende bloktypen die je kunt invoegen. Verderop leggen we uit welke bloktypen er zijn en wat je ermee kunt doen
Het Gereedschap pictogram gebruik je om te wisselen van bewerken naar selecteren. Standaard staan alle blokken in de
bewerkstand. Dat kun je zien aan het symbool. Als je in een blok klikt kun je het meteen bewerken.
Als je op het pennetje klikt verandert het in
Nu staan alle blokken in de Selectie stand en kun je – als je in een blok klikt – dit kopiëren, verplaatsen, verwijderen, etc…...
Met het pictogram Ongedaan maken kun je de meest recente wijziging(en) ongedaan maken.
Met de knop Opnieuw kun je de meest recente wijziging(en) opnieuw uitvoeren.
De knop Inhoudsstructuur biedt informatie over de inhoud van het bericht of de pagina. Het laat zien hoeveel woorden, koppen, alinea’s en blokken de inhoud bevat, samen met de documentstructuur en links naar elk van de koppen in de inhoud.
De Bloknavigatie-knop toont een lijst met alle blokken in de inhoud en biedt een snelle link naar elk van die blokken.
Naar concept omzetten
De knop Naar concept omzetten verschijnt pas nadat de pagina, c.q.
het bericht is gepubliceerd. Je kunt het daarmee dus terugzetten naar de status Concept.
8
Concept bewaren
Met de knop Concept bewaren kun je de pagina of het bericht tussentijds opslaan, zonder dat het op de site wordt getoond.
Voorbeeld Met de knop Voorbeeld kun je een voorbeeld van bericht of pagina bekijken. De voorbeeldpagina opent een nieuw browsertabblad of - venster.
Publiceren Met de knop Publiceren kun je een pagina of bericht publiceren. In tegenstelling tot eerdere versies van WordPress, is het publiceren van een pagina nu een proces in twee stappen. Nadat je de eerste keer op de knop Publiceren hebt geklikt, krijg je een nieuw paneel te zien met een bevestigingsbericht en een andere knop Publiceren. Met dit paneel kun je ook de zichtbaarheid van de inhoud en de
publicatiedatum en -tijd wijzigen. Als je op deze tweede knop
Publiceren klikt, wordt de inhoud daadwerkelijk gepubliceerd en wordt deze live op de site geplaatst.
Bijwerken Als de inhoud al is gepubliceerd, wordt de knop Publiceren vervangen door een knop Bijwerken. Net als in eerdere versies van WordPress, worden je wijzigingen opgeslagen door op de knop Bijwerken te klikken.
De instellingen-zijbalk toont alle instellingen voor pagina of bericht, inclusief elementen zoals het toevoegen van uitgelichte afbeeldingen, het specificeren van categorieën en tags op berichten, of het
selecteren van pagina- / berichtsjablonen. Als je op het pictogram Instellingen klikt, wordt de zijbalk met instellingen weergegeven of juist weer verborgen.
Het laatste pictogram in de werkbalk is het pictogram Meer
hulpmiddelen en opties weergeven. Deze knop geeft toegang tot een aantal ad hoc instellingen. Je kunt de bovenste werkbalk en Spotlight-modus in- of uitschakelen. Je kunt de inhoud ook weergeven met de visuele editor (de standaardmodus voor het toevoegen van blokken) of met de code-editor. Daarmee kun je de onderliggende html bewerken. Je kunt ook de Block Editor-tips opnieuw weergeven, een lijst met de sneltoetsen van de editor bekijken en ook alle inhoud op de pagina kopiëren met een enkele klik.
9
Een titel toekennen
Elk bericht of pagina heeft een titel:
De titel is - in tegenstelling tot alle andere elementen die straks in de pagina of het bericht komen te staan - GEEN blok. Je kunt het dus niet weghalen of verplaatsen.
Type hier de gewenste titel van het bericht of de pagina.
Verschillende bloktypen
We gaan nu op het plusteken klikken om een nieuw blok toe te voegen:
Klik op om een nieuw blok in te voegen. In de Gutenberg editor zijn heel veel verschillende soorten blokken beschikbaar:
• Tekst
• Media
• Ontwerp
• Widgets
• Insluitingen
Naast blokken zijn er ook blokpatronen:
• Knoppen
• Kolommen
• Galerij
• Headers
• Tekst
We lopen al deze typen blokken en patronen even langs…..
10
Tekstblokken
De huidige versie van Wordpress (5.5) kent 12 verschillende soorten TEKST blokken:
• Klassiek paragraaf
• Smart Slider 3
• Paragraaf
• Kop
• Lijst
• Citeren
• Code
• Klassiek
• Gepreformatteerd
• Pull-quote
• Tabel
• Strofe
We hebben geen tijd om ze allemaal te behandelen. Hieronder komen een paar handige bloktypen voorbij….
Klassieke paragraaf
Wat mij betreft is dit verreweg de handigste van alle tekstblokken. Je kunt er namelijk bijna alles mee, wat je ooit nodig zult hebben….
11 Je vindt in de klassieke paragraaf de meeste opmaakfunctionaliteiten die uit Word kent wel terug, zoals Vet, schuin, onderstreept, Links of rechts uitgelijnd. Je kunt de grootte of de kleur van de tekst aanpassen, etc., Maar je kunt ook andere blokken integreren, zoals een tabel, foto of een Smartslider. En daarmee lijkt dit dan weer een beetje op de oude klassieke editor…
Bestand Afdrukken
Klik op Bestand en kies Afdrukken om een opgemaakte paragraaf te kunnen afdrukken.
Bewerken
Je kent deze wel van Word…. Kopiëren, Knippen, Plakken…
Klik op Bewerken en kies één van de beschikbare opties….
12 Bekijken
Hier kun je wat speciale opties AAN of UIT zetten. Ze hebben geen enkele uitwerking op de inhoud zelf, ze bepalen alleen hoe deze in de editor (dus niet op de website) wordt getoond.
Invoegen
Deze optie geeft je wat zaken om in de paragraaf in te voegen. Denk aan een link, een plaatje of ander mediabestand, een tabel, etc.
13 Stijl
Deze optie bepaalt de opmaak van de geselecteerde tekst…
Extra
Hier kun je de broncode van de paragraaf bekijken. Maar dat kon ook al onder Bekijken. Dus besteden we er hier geen aandacht aan….
14 Tabel
Tja, waar zou deze optie voor dienen? Alles wat je met een tabel kunt doen, vind je hier….
Knoppenbalk
Dan is er nog de knoppenbalk. De gebruiksmogelijkheden lijken me redelijk voor de hand liggen. En anders gewoon een keer op klikken….
15 Smart Slider 3
Je kiest hier de slider die je in een bericht of pagina wilt insluiten. Je kunt in de editor geen nieuwe slides maken. Daarvoor heb je (toegang tot) de plug-in Smart Slider nodig.
Druk op Select Slider. Je krijgt nu een overzicht van alle beschikbare sliders:
16
Zo’n slider is dus al kant-en-klaar. Hoe je ‘m zelf maakt leer je in een vervolgcursus…
Maar wat een slider met een tekstblok te maken heeft, dat moet je mij niet vragen .
Ik zou deze eerder bij de media plaatsen….
17 Lijst
Hiermee kun je een lijst invoegen. Genummerd, of met bullets…
Kies welk type lijst je wilt gebruiken (bullets of nummers). Je kunt ook delen van de lijst laten inspringen, vet of italics maken, een link invoegen en meer…..
Tabel
Dit is dus om een tabel in een blok te zetten….
Kies het aantal rijen en kolommen en druk op Tabel maken.
18
Media
De blokken van het type Media helpen je om een plaatje, een video of een ander bestand in jouw bericht of pagina op te nemen.
Afbeelding
Dit bloktype voegt een afbeelding aan jouw bericht of pagina toe:
Je kunt een afbeelding van jouw computer uploaden, een reeds eerder gebruikte afbeelding uit de Mediabibliotheek ophalen of een plaatje rechtstreeks van internet plukken (invoegen via URL).
Ook dit blok heeft een eigen knoppenbalk:
19 Deze knop dient om achteraf het bloktype te kunnen wijzigen:
Met deze knop kun je het blok naar boven of beneden verplaatsen
Deze knop dient om het blok uit te lijnen: Links, Centreren of Rechts:
20
verrichten, zoals verplaatsen, kopiëren, verwijderen, etc.
21 Galerij
Een Galerij is een serie afbeeldingen naast en/of onder elkaar.
Je kunt zelf een of meer plaatjes uploaden of bestaande afbeeldingen uit de mediabibliotheek ophalen.
Audio
Je kunt dus ook een audiobestand op een pagina zetten. Zodra de pagina wordt geladen, speelt het blok het bestand af. Tenzij je het anders wilt natuurlijk…..
22
Ontwerp
De blokken van het type Ontwerp helpen je om een of meer knoppen in een bericht of pagina op te nemen, de pagina of het bericht op te delen in meerdere kolommen, Knoppen
Met het Knoppenblok kun je eenvoudig een of meer knoppen met HTML-links toevoegen aan de inhoud. Wanneer je het knoppenblok voor het eerst toevoegt, wordt er een enkele knop in het blok ingevoegd. Je kunt meer knoppen aan het blok toevoegen door op het pictogram Knop toevoegen ( ) te klikken. Nadat een knop is toegevoegd, klik je erop en typ de knoptekst.
Je kunt ook op het Koppelingspictogram ( ) in de knopwerkbalk klikken om een link aan de knop toe te voegen.
Nadat je de benodigde knoppen aan het blok hebt toegevoegd, kun je door elke afzonderlijke knop te selecteren verdere opties in de zijbalk Instellingen wijzigen. Je kunt kiezen uit een aantal verschillende stijlen voor elke knop en de knopkleur en de tekstkleur bepalen. Als je een stijl selecteert in de vervolgkeuzelijst Standaardstijl, zullen alle andere knoppen die je aan de pagina of het bericht toevoegt, standaard die geselecteerde stijl gebruiken.
Met de schuifregelaar of het invoerveld Border Radius kun je de straal van de knophoeken wijzigen. Je kunt de afronding ook helemaal verwijderen, zodat de hoeken vierkant zijn, door de schuifregelaar op nul te zetten. Als je wilt dat de knoplink wordt geopend in een nieuw browsertabblad, schakel je de schakelaar Openen in nieuw tabblad in.
23 Kolommen
Met het Kolommenblok kun je een rij met meerdere kolommen invoegen. Wanneer je het Kolommenblok voor het eerst invoegt, moet je een lay-out selecteren uit een selectie van veelgebruikte lay-outs. Je kunt er ook voor kiezen om deze stap over te slaan en dan krijg je de standaardlay-out: twee kolommen met een breedte van 50%.
Na het toevoegen van een Kolommenblok, kunt je vervolgens de gewenste blokken toevoegen aan die kolommen. Het Kolommenblok is handig voor het maken van interessantere lay-outs, in plaats van de typische enkele tekstkolom van de Klassieke Editor.
24
Je kunt het aantal kolommen binnen het Kolommenblok selecteren met de
schuifregelaar in de zijbalk Instellingen. Als je een afzonderlijke kolom binnen het Kolommenblok selecteert, kun je de breedte van die kolom wijzigen met de schuifregelaar Percentage breedte in de zijbalk Instellingen.
Als je binnen een kolom op een blok klikt kun je die vervolgens aanpassen.
Meer
Het laatste bloktype dat ik laat zien uit de categorie Ontwerp is Meer….
Met het Meer(-lezen)-blok kun je een meer-lezen tag aan de inhoud toevoegen. De meeste archiefpagina’s (bijvoorbeeld uw blogpagina) geven slechts een klein
fragment van een bericht weer en bieden de lezer vervolgens een link “Lees meer …”
om de rest van het artikel te blijven lezen. Wanneer je een meer-lezen-blok in de inhoud invoegt, wordt alles voorafgaand aan de tag als dit fragment beschouwd.
Meestal gebruik je deze knop alleen wanneer u een bericht maakt, in plaats van een pagina. Sommige thema’s doen dit overigens automatisch.
Je kunt slechts één meer-lezen-blok in elke pagina of elk bericht invoegen. Als je de tekst in de link ‘Meer lezen …’ wilt wijzigen, klik je op de tekst in het blok en verander je de tekst in wat je maar wilt weergeven.
25 Om terug te keren naar de standaardtekst die in het thema wordt weergegeven, verwijder je eenvoudig alle tekst uit het blok en je slaat het bericht of de pagina op.
Widgets
De sectie Widgets bevat speciale widgets zoals het shortcode-blok, het archiefblok, het categorieënblok, het blok met recente reacties en het blok met recente berichten.
De meeste van deze blokken hebben functionaliteit die je ook vindt onder het menu Weergave > Widgets. Maar nu kun je ze dus ook in een bericht of pagina opnemen, in plaats van speciale ruimte voor widgets, zoals de sidebar.
26
Archiefblok
Met het Archiefblok geef je een maandelijks archief van alle berichten weer. Nadat je een archiefblok hebt toegevoegd, kun je ervoor kiezen om de inhoud weer te geven als een ongeordende lijst of als een vervolgkeuzelijst met behulp van de tuimelschakelaar in de zijbalk Instellingen. Je kunt ook het aantal berichten voor elke maand weergeven of verbergen.
27 Kalenderblok
Met het Kalenderblok kun je een maandelijkse kalenderweergave van alle berichten weergeven.
Er zijn geen instellingen voor dit blok. Zodra je het blok in de inhoud hebt geplaatst, zal het op alle dagen waarop een bericht werd gepubliceerd een link bevatten naar dat bericht. Er is ook een link naar de vorige maand en (indien van toepassing) de volgende maand.
28
WP-Forms
Met deze widget kun je een bestaand formulier in jouw bericht of pagina zetten:
Insluitingen
Een andere manier om video of andere inhoud aan uw pagina’s toe te voegen, is door inbedden. Een populair voorbeeld hiervan is het insluiten van een YouTube- video op de pagina.
Wanneer je een bestand insluit, hoef je het bestand niet naar de site te uploaden. Je maakt eenvoudigweg een link naar het bestand, vanuit pagina of bericht. WordPress kan bestanden van een aantal verschillende services automatisch insluiten.
Om iets in een bericht of pagina in te sluiten, selecteer je eenvoudig het juiste insluitblok, plak dan de URL in het veld en klik op de knop Insluiten. Het blok zal de daadwerkelijke inhoud van het bestand weergeven.
29 Document
Met een Add Document blok kun je een PDF-document toevoegen aan de pagina:
Als je op Add document klikt kun je een keuze maken:
Laat je niet misleiden. Upload Document geeft je OOK de gelegenheid om een document uit de mediabibliotheek te gebruiken!
30
Youtube
Dit bloktype geeft je de mogelijkheid om een bestaande YouTube video in jouw bericht of pagina in te sluiten. Je moet alleen de URL weten:
Type de URL, druk op Insluiten en voila….
31
Een nieuw bericht maken
Om een nieuw bericht aan de website toe te voegen moet je dus ingelogd zijn.
Bovendien moet jouw rol tenminste Schrijver zijn om een bericht te kunnen
aanmaken. In dat geval kun je het niet zelfstandig publiceren. Daar moet je tenminste auteur voor zijn.
We binnen simpel: We gaan een nieuwsbrief (in dit geval één voor de Klussendienst) in het systeem zetten:
Kies in het menu Berichten de optie Nieuw bericht
Je komt nu in een formulier, waarin je het bericht kunt opmaken:
32
Elk nieuw bericht bestaat uit:
• Titel
• Inhoud
• tenminste één categorie (méér mag)
• aangepaste header
• uitgelichte afbeelding
De titel van het bericht
De titel van te plaatsen nieuwsbrieven wordt altijd “Nieuwsbrief” [Gildenaam] [maand]
of [volgnummer]. In ons geval wordt dat dus: Nieuwsbrief Klussendienst 2020-04.
De inhoud van het bericht
De inhoud van een bericht is voor een nieuwsbrief meestal vrij simpel: deze bestaat uit een stukje inleidende tekst en een ingebed document (de nieuwsbrief in PDF formaat).
Druk op + om een blok toe te voegen. Kies het Type Klassiek Paragraaf en type de gewenste tekst in het grote vlak, bijvoorbeeld:
33 Daaronder voeg je dan de nieuwsbrief in. Druk op de + knop, scroll naar beneden en klik onder Insluitingen op Document. Dan zie je dit blok verschijnen:
Druk op Add Document:
34
Kies Upload Document…
Kies Bestanden uploaden….
35 Klik op Bestanden selecteren, zoek het betreffende PDF-document op jouw PC ….
en klik op Openen.
Kies nu de gewenste instellingen, zoals hoogte en breedte, bepaald of het document gedownload mag worden en door wie, wat er op de download link moet komen te staan en welke viewer je wilt gebruiken (Microsoft of Google). Als je het niet weet kun je de default instellingen gewoon accepteren:
36
Druk op Insert om het document te tonen:
37
Categorie(ën)
Wijs aan het bericht altijd tenminste één categorie toe. In dit geval Nieuwsbrieven en Nieuwsbrief Klussendienst.
Aangepaste header
Omdat we voor elk Gilde een eigen header gebruiken, wijzen we ook de header van de Klussendienst toe aan dit bericht:
38
Klik op Set Custom Header Image…
Zoek het juiste bestand, selecteer het en klik op Invoegen in bericht.
39
Uitgelichte afbeelding
Om een passende afbeelding in de lijst met berichten te kunnen gebruiken, wijzen we het daarvoor bedoelde bestand toe als uitgelichte afbeelding.
Druk op Uitgelichte afbeelding kiezen.
Zoek het juiste bestand, selecteer het en klik op Invoegen in bericht.
40
Druk op Publiceren om het bericht op te slaan. Je krijgt dan dit dialoogvenster te zien:
Je moet nu een tweede keer op Publiceren drukken om het bericht daadwerkelijk op te slaan (en op de site zichtbaar te maken).
Als je zelf geen publicatierechten hebt, dan ben je nu afhankelijk van een beheerder of redacteur, die jouw stuk voor je op de website kan plaatsen.
Controle
Verlaat de beheeromgeving en kijk hoe het bericht er in de website uitziet.
In de zwarte balk staat een link Gilde Zoetermeer. Die brengt je weer terug naar de website. Als alles okee is, dan ben je nu klaar. En anders moet je het bericht opnieuw openen in de beheeromgeving. Druk daarvoor op de link Bericht bewerken.
De rest is méér van hetzelfde ….
