Op deze pagina staan voorbeelden van de shortcodes die gebruikt kunnen worden in de opmaak van de pagina’s voor deze website. Een shortcode is een code tussen teksthaken die door WordPress wordt vervangen door code (JavaScript, PHP, HTML, CSS of een combinatie daarvan) of tekst.
INHOUDSOPGAVE
In onderstaande uitleg worden de teksthaken weggelaten. De (niet bestaande) shortcode [fietsbel] wordt hier dus weergegeven als fietsbel.
Net als bij HTML bestaan er enkelvoudige, zelfsluitende shortcodes en gepaarde shortcodes. Het verschil is dat bij een gepaarde shortcode een begin-code altijd moet worden afgesloten met een eindcode. Zo wordt het codepaar div en /div respectievelijk voor en achter een tekst geplaatst die bij het publiceren van de pagina in een HTML-div wordt ingesloten.
Als u een typefout maakt, zal de shortcode niet worden herkend en wordt de foutieve code op de webpagina weergegeven.
Inhoudsopgave
De shortcode TOC plaatst rechtsboven op de webpagina een uitklapbare inhoudsopgave. Standaard worden alleen de koppen van niveau H2 opgenomen in de inhoudsopgave, maar dit is aan te passen met de parameter headings. De shortcode mag op een willekeurige plaats op de pagina gebruikt worden, maar liever niet op de allereerste regel van een pagina, want dan zal de eerste alinea van de pagina niet meer automatisch vet worden gezet.
TOC – een inhoudsopgave met de koppen van niveau 2.
TOC headings=”h4,h5″ – een inhoudsopgave gegenereerd met daarin de koppen van niveau h4 en niveau h5.
Alleen de bij headings genoemde kopniveaus worden in de inhoudsopgave opgenomen, de overige koppen worden genegeerd.
Accordeon
Een accordeon is een menuvorm waarbij de onderdelen zichtbaar worden als op een van de koppen van de accordeon wordt geklikt. Net als bij het gelijknamige muziekinstrument wordt de ook deze accordeon bij het gebruik ‘uitgetrokken’ en weer ‘in elkaar geduwd’.
Hoe maak ik een accordeon?
Een accordeon wordt gecodeerd met de shortcodes accordeon en /accordeon. Dat wil zeggen dat alle onderdelen van de accordeon zich tussen deze twee shortcodes moeten bevinden. Voor het geval meerdere accordions op een pagina moeten worden gebruikt, zijn ook volgende shortcodes te gebruiken:
- accordeon1 en /accordeon1
- accordion2 en /accordeon2
- accordeon3 en /accordeon3
De koppen van een accordeon zijn gewone tekstregels met de opmaak Koptekst 3 (html: H3).
De tekst voor de onderdelen van de van de accordeon moeten tussen de shortcodes div en /div worden geplaatst.
Alles in één keer openen op sluiten
Door op de regel voor de shortcodes voor de accordeon de shortcode klappen id=”accordeon” te gebruiken, wordt op de webpagina een knop getoond waarmee de accordeon geheel geopend of geheel gesloten kan worden. Dit is een enkelvoudige shortcode die niet hoeft te worden afgesloten met een gepaarde shortcode.
Wel moet het argument id worden gebruikt. Hiermee wordt aangegeven welke accordeon moet worden geopend of gesloten:
- klappen id=”accordeon”
- klappen id=”accordeon1″
- klappen id=”accordeon2″
- klappen id=”accordeon3″
Voorbeeld
Binnen een accordeon kunnen ook andere shortcodes worden gebruikt, maar identieke shortcodes mogen niet worden genest. De hier onderstaande div is dan ook niet opgemaakt met div en /div, maar met div2 en /div2.
Een geneste div met opmaak.
Het is zelfs mogelijk een accordeon binnen een accordeon op te nemen, maar onthoud dat shortcodes niet recursief mogen worden gebruikt en dat daarom hieronder accordeon2 en div2 zijn gebruikt.
Kop van niveau 3
Tekst tussen shortcodes div2 en /div2
Nog een kop van niveau 3
Meer tekst tussen shortcodes div2 en /div2
Tussen de shortcodes div en /div kunnen meerdere alinea’s worden opgenomen. Deze kunnen op de gebruikelijke wijze worden opgemaakt met behulp van de editor van WordPress.
- Een
- Twee
- Drie
Accordeons zijn ook genest te gebruiken, op voorwaarde dat voor de ‘binnenste’ accordeon niet dezelfde shortcodes worden gebruikt. Dat geldt voor zowel de accordeon-shorttag als de div-shortag.
Kadertekst
Om een tekstdeel af te zonderen van de rest van de pagina, kunnen de shortcodes voorbeeld en /voorbeeld worden gebruikt. Bij de eenvoudigste vorm worden een of meer tekst- en beeldelementen tussen deze shortcodes geplaatst:
voorbeeld tekst /voorbeeld
Om een onderschrift te kunnen toevoegen, moet de parameter recht worden toegevoegd:
voorbeeld recht tekst /voorbeeld
Het onderschrift zelf wordt toegevoegd met de shortcodes onderschrift en /onderschrift, waarbij net als bij voorbeeld de parameter recht wordt gebruikt.
voorbeeld recht tekst /voorbeeld
onderschrift recht tekst /onderschrift
Tekst in de rechtermarge
Deze alinea is ingesloten in de shortcodes marge en /marge
Bij lange artikelen is de marge aan de rechterkant helemaal leeg, tenzij met de shortcodes marge en /marge worden gebruikt. De alinea die na deze shortcodes wordt gebruikt, schuift automatisch naar boven. Bij schermen die te smal zijn om de marge aan de rechterkant weer te geven, wordt de margetekst als gewone alinea weergegeven.
TIP! Door de parameter class=”klein” toe te voegen, wordt een kleinere letter gebruikt, waardoor langere teksten kunnen worden gebruikt.
In de margetekst mogen ook afbeeldingen worden gebruikt. Hoewel de afbeeldingen automatisch worden geschaald, moet u er voor zorgen dat de bestandsomvang beperkt blijft tot ongeveer 100KB.
Het logo van Value FM
met de parameter class kan de vormgeving van de margetekst worden veranderd:
- klein voor een kleiner font,
- rood voor een rode achtergrond,
- groen voor een groene achtergrond,
- blauw voor een blauwe achtergrond,
- dik voor een dikke omlijning in zwart of de kleur van de achtergrond,
- dun voor een dunnen omlijning in zwart of de kleur van de achtergrond,
- informatie voor de weergave van een informatie-icoon en
- waarschuwing voor de weergave van een waarschuwings-ikoon.
Voorbeelden verbergen...Voorbeelden tonen...
Met de parameter class kan de margetekst van opmaak worden voorzien:
Voorbeeld
marge class=”grijs” Voorbeeld /marge
Voorbeeld
marge class=”rood” Voorbeeld /marge
Voorbeeld
marge class=”groen” Voorbeeld /marge
Voorbeeld
marge class=”blauw” Voorbeeld /marge
Voorbeeld
marge class=”waarschuwing” Voorbeeld /marge
Voorbeeld
marge class=”informatie” Voorbeeld /marge
Voorbeeld
marge class=”dun” Voorbeeld /marge
Voorbeeld
marge class=”dik” Voorbeeld /marge
Het is ook mogelijk parameters te combineren:
INFORMATIE
De parameters van deze shortcode kunnen worden gecombineerd.
marge class=”dun rood waarschuwing” Tekst… /marge
Voorbeelden van de class-parameter voor de shortcode marge.
Tabbladen
Tabbladen
Tabbladen worden gebruikt om vergelijkbare gegevens op een pagina te kunnen plaatsen, zonder dat de pagina eindeloos lang wordt. In dit thema kunnen meerdere tabbladen aan een pagina worden toegevoegd met de shortcodes tabs en /tabs. De afsluitende shortcode moet geplaatst worden na de tekst die op de tabbladen komt te staan. Meer informatie over het gebruik van deze shortcodes vindt u op de volgende tabbladen.
Tabbladen blijven op een afdruk zichtbaar als tabbladen, waardoor de tekst van de niet-actieve tabbladen niet wordt afgedrukt. Als u dat wel wilt moet u op een lege regel vlakboven de shortcode tabs de shortcode tabknop gebruiken, waarbij u voor de parameter id de naam van de set tabbladen opgeeft. Met de knop die nu op het scherm verschijnt, kunnen de tabbladen onder elkaar worden afgebeeld, zodat wel alle informatie wordt afgedrukt. Zie het volgende tabblad voor een voorbeeld.
Gebruik
De shortcodes tabs en /tabs kunnen meerdere keren op een pagina worden gebruikt. De hier gebruikte shortcode is:
tabknop id=”uniekenaam”
tabs tab=”uniekenaam” “Tabbladen” “Gebruik” “Voorbeeld” “Vierde tab”
Als de shortcode tweemaal of vaker op een pagina wordt gebruikt, moet met de parameter tab een unieke naam voor de set tabbladen worden opgegeven.
De overige parameters zijn naamloos en worden gebruikt als kopje voor de maximaal tien tabbbladen. Om te weten waar ieder kopje begint en eindigt, worden aanhalingstekens gebruikt. Het zal duidelijk zijn dat de beschikbare ruimte beperkt is en dat de kopjes daarom zo kort mogelijk moeten zijn.
Om de inhoud van de tabbladen van elkaar te scheiden wordt de shortcode x op een lege regel voor het begin van ieder tabblad geplaatst. Vergeet niet deze shortcode ook voor het eerste tabblad te plaatsen. (Zie ook het voorbeeld op het volgende tabblad.)
Voorbeeld
Dit tabblad heeft de volgende structuur:
Structuur van de shortcodes voor tabbladen.
Het laatste tabblad
Bovenstaande kop is niet ingevoegd door de shortcodes. Vooral als ook de shortcode tabknop wordt gebruikt, is het belangrijk koppen boven de teksten te plaatsen. Daarmee voorkomt u dat de onderelkaar afgebeelde tabbladen een tekstbrei worden. De tabbladen kunnen iedere inhoud en vormgeving bevatten die ook op gewone WordPress-pagina’s kan worden gebruikt, inclusief andere shortcodes:
- Vandaag is het 01-04-2023 – deze datum is ingevoegd met de shortcode datum.
- datum dag – zaterdag
- datum lang – zaterdag, 01 april 2023
- datum kort – 01-04-2023 (default)
Het is echter niet mogelijk binnen een tabblad nieuwe tabbladen op te nemen.
Op een pagina kunnen meerdere sets tabbladen worden gebruikt, maar het is niet mogelijk tabbladen te ‘nesten’.
Kolommen
Met de schortcodes twee en /twee kunnen teksten in twee kolommen naast elkaar worden geplaatst. Als er te weinig ruimte is voor kolommen, worden de teksten onder elkaar geplaatst. Teksten kunnen in drie kolommen worden gezet met de shortcodes drie en /drie en in vier kolommen met de shortcodes vier en /vier.
Nederlands
De interne markt is een van de grootste verworvenheden van de Europese Gemeenschap. Tegelijkertijd groeide de Europese Gemeenschap sneller dan de architectenrichtlijn. De vooruitgang van de Europese Gemeenschap op dit gebied is erg bevredigend. Dus gelukwensen voor de organisatoren en de missie van de Europese Gemeenschap.
Engels
The single market is one of the great achievements of the European Community. At the same time, the European Community outgrew the architects ‘ directive. The European Community has made highly satisfactory progress in this direction. So, congratulations to the organizers and to the European Community mission.
Vergeet niet om bij de het eerste gebruik van de shortcode twee de parameter ‘eerste’ toe te voegen.
Nederlands
nul
een
twee
drie
vier
vijf
zes
zeven
acht
negen
tien
Engels
zero
one
two
three
four
five
six
seven
eight
nine
ten
Chinees
零
一
二
三
四
五
六
七
八
九
十
Oud-grieks
ουδεν (‘niets’)
εἴς
δύο
τρείς
τέσσαρες
πέντε
ἓξ
ἑπτά
ὀκτώ
ἐννέα
δέκα
Vergeet niet om bij de het eerste gebruik van de shortcode vier de parameter ‘eerste’ toe te voegen.
Horizontale lijn
Horizontale lijnen kunnen in de tekst worden opgenomen met de enkelvoudige shortcode hr. Dit komt overeen met de html-code <hr>, maar dan met CSS-opmaak zodat een mooiere lijn ontstaat. Lijnen worden automatisch gecentreerd. De shorttag heeft vijf optionele parameters:
- stijl (default solid, te wijzigen in dasshed of dotted)
- hoogte (default 1px)
- breedte (default 100%, waarde opgeven in procenten of in pixels)
- kleur (default #cccccc – alle html-kleurcoderingen zijn toegestaan)
- achtergrond (default #ffffff – alle html-kleurcoderingen zijn toegestaan)
hr
hr breedte=”80px” kleur=”black”
hr breedte=”50%” kleur=”#111″
hr breedte=”80%” stijl=”dotted” kleur=”rgb(255, 0, 0)”
hr breedte=”80%” stijl=”dashed”
hr breedte=”80%” hoogte=”10px” kleur=”#333″
hr stijl=”dotted” breedte=”50%” hoogte=”10px” kleur=”red” achtergrond=”grey”
Tabellen
Tabellen worden ingevoegd via het menu Table van de WYSIWYG-editor, maar probeer het gebruik van tabellen zoveel mogelijk te voorkomen. Het is de aard van HTML-tabellen ze minder geschikt zijn voor responsive design websites die zich automatisch aanpassen aan verschillende beeldschermen. Bij kleine beeldschermen zal een deel van de kolommen mogelijk niet zichtbaar zijn. Als per se een tabel gebruikt moet worden, kan de breedte het best met de menukeuze Tabel > Tabeleigenschappen ingesteld worden op 100%. Ook de breedte van de cellen kan het best met percentages worden ingesteld.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| een | twee | drie | vier | vijf | zes | zeven | acht | negen | tien |
| one | two | three | four | five | six | seven | eight | nine | ten |
| εἴς | δύο | τρείς | τέσσαρες | πέντε | ἓξ | ἑπτά | ὀκτώ | ἐννέα | δέκα |
De vormgeving van tabellen. Op een mobiele telefoon (of als het browservenster zo smal mogelijk wordt gemaakt), zullen alleen de eerste cijfers zichtbaar zijn.
Met de shortcodes tabel en /tabel wordt de vormgeving en functionaliteit van DataTables aan de tabel toegevoegd.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| een | twee | drie | vier | vijf | zes | zeven | acht | negen | tien |
| one | two | three | four | five | six | seven | eight | nine | ten |
| εἴς | δύο | τρείς | τέσσαρες | πέντε | ἓξ | ἑπτά | ὀκτώ | ἐννέα | δέκα |
Tabel met header- en footer-regel (via menukeuze Table > Rij> Tabelrij eigenschappen) en extra functies die beschikbaar komen als de tabel is ingesloten tussen de shortcodes tabel id=”valuefm” en /tabel.
Tekst en/of afbeeldingen verbergen
Facultatieve delen van de webpagina worden met de shortcode verberg onzichtbaar tot het moment dat de gebruiker op een knop klikt. De enkelvoudige shortcode verbergt het eerst volgende html-element. Om meer html-elementen tegelijk te verbergen, moet de betreffende tekst worden ingesloten in de shortcodes div en /div. De shortcode heeft twee parameters: tonen en verbergen, die gebruikt worden als knoptekst. De default-waarden zijn respectievelijk ‘tonen’ en ‘verbergen’.
verberg tonen=”Antwoord tonen” verbergen = “Antwoord verbergen”
Tijdens de Tachtigjarige Oorlog werd Maurits van Oranje door de Staten-Generaal van de Nederlanden naar een stad in Vlaanderen gestuurd. De kaapvaart vanuit deze stad bracht veel schade toe aan de handelsvloot van de Republiek der Zeven Verenigde Nederlanden. De onverwacht komst van een groot Spaans leger onder leiding van aartshertog Albrecht van Oostenrijk leidde tot een grote veldslag. Wanneer heeft deze veldslag plaatsgevonden en onder welke naam is hij bekend geworden?
Antwoord verbergenAntwoord tonen
De Slag bij Nieuwpoort vond plaats in het jaar 1600.
Plaats de shortcode precies boven de alinea die verborgen moet worden.
verberg tonen=”Meer lezen…” verbergen = “Minder lezen…”
Klik op de knop Meer lezen… als je meer wilt lezen over de slag bij Nieuwpoort.
Minder lezen...Meer lezen...
De Slag bij Nieuwpoort was een veldslag op 2 juli 1600 tijdens de Tachtigjarige Oorlog tussen het Staatse en het reguliere Spaanse leger. De Republiek won deze slag door strategische stellingname en het inzetten van reservetroepen in de beslissende fase. Maurits won, maar zonder de stad te kunnen innemen, en de tocht naar Duinkerke werd uiteindelijk afgeblazen, zodat het doel niet bereikt werd. Als dank lieten de landvoogden de stad Scherpenheuvel inrichten als een stad voor Maria, inclusief de plannen voor de nagelnieuwe bedevaartkerk. De slag is mede vanwege het gemakkelijk te onthouden jaartal een van de bekendste gebeurtenissen uit de Nederlandse geschiedenis.
(Bron: Wikipedia)
Dit is de tekst die na de verborgen tekst komt.
Om de twee alinea’s en de foto samen te verbergen zijn ze ingebed in de shortcodes div2 en /div2.
Video
Video kan op twee manieren in een pagina worden opgenomen:
- Door eenvoudigweg de link van bijvoorbeeld YouTube of Vimeo op de pagina te plaatsen.
- Via het menu Insert > Insert Video van de WYSIWYG-editor.
In beide gevallen wordt de breedte van de video automatisch aangepast aan de beschikbare breedte.
Een video kan met de shortcodes marge en /marge ook verkleind in de rechtermarge worden geplaatst, maar dan moet per se gebruik worden gemaakt van de menukeuze Insert > Insert Video.
Verberg voorbeeld...Toon voorbeeld...
De eerste twee video’s zijn toegevoegd via het menu, de derde video door alleen de link in de tekst te plakken.
Tooltips
Dit is geen shortcode is, maar wel een automatisering die syntaxisafhankelijk is. Als de cursor op deze link wordt geplaatst, zal een ‘tooltip’ worden weergegeven. Anders dan de standaard tooltip van browsers bestaat deze tooltip uit een kop en een blokje tekst. De tekst van de tooltip moet worden toegevoegd via het title-attribuut van de link.
Het kopje en de rest van de tekst worden van elkaar gescheiden door de tekencombinatie <spatie><koppelteken><spatie>, zoals in de afbeelding hiernaast te zien is. Als deze drie tekens niet in de titel voorkomen, zal de gehele tekst als kopje worden weergegeven.
HTML-code
De shortcodes lijken in het begin ingewikkeld, maar ze vervangen grote hoeveelheden code waar je als auteur niet mee te maken wilt hebben. De rest van een WordPress-pagina wordt vormgegeven via het menu van de WYSIWYG-editor. In het voorbeeldvenster hieronder staat een beknopt overzicht van de mogelijkheden:
Voorbeeld verbergen...Voorbeeld tonen...
Koptekst 1
Dit is paragraaf-tekst. Bij een normale pagina wordt (anders dan hier) de eerste alinea paragraaftekst automatisch vet gezet. De volgende alinea’s worden niet automatisch vet gezet.
Koptekst 2
Elit ut este re seque non perum et earum quos eum volore pos5 quame corerna H2O tquias erate acepudae plandel enihil ium et, omni doluptam voluptatem restibus. Equis esto in plibus, qui consedi quas et aborepe ma et aut omni temperatur? Luptur, te lique soluptatur as aut aut que aut audicto doloribus, as vercias eum voluptat eatur, quos dolorit ere aut aditate mpostio odis et aut eosam excero int eiur?
Dit is een citaat. Een citaat wordt vormgegeven via de menukeuze Formats > Quotes > Blockquote of, eenvoudiger, met het blockquote-ikoon.
Netum et aut aborro eum rest qui ute quaesciatati dem ellecta turitiis aut apiene dolupta pore molutem is magnatur aut doluptatur seque vel maximenim nus sum dolo evenis arum inctios sequiae nones del molorendam ipis sam solectore, comnim errupta temoditatur?
- Bullets
- voor
- een
- opsomming
Koptekst 3
Incimi, nonsequ iassum niscius voluptae. Ga. Nemos quo ma cupis escipsume volupta tatianim que vere et, iuntorro blab illiqui nosam, auditib usamusc ipidem nonsene ceatem demolor ehenduc iuntotae volentis et enda endam atecum sandebitae mo excea andaes
- Of
- cijfers
- voor een
- opsomming
Koptekst 4
Erorruptaque por ra dis sus ut et doluptat faceres eriaspe ressunt quia explam aut ut id mos repe ped miniendunt et apis ea ipsus endipic to in.
Inspringen: Pel everatquia volorup tasperum sapella borempo ribusae comnimi, is elluptiandel ium voluptatum iliquia id qui ipit alitatque ipsapeliqui blab iuntibeaquae eosa et quo volupti busciis aliqui nis doluptatet autata ditatures aut officimet, saeptata dolum ut restruntiunt oditatetus sum fuga.
Verder inspringen: Netum et aut aborro eum rest qui ute quaesciatati dem ellecta turitiis aut apiene dolupta pore molutem is magnatur aut doluptatur seque vel maximenim nus sum dolo?
Koptekst 5
Erorruptaque por ra dis sus ut et doluptat faceres eriaspe ressunt quia explam aut ut id mos repe ped miniendunt et apis ea ipsus endipic to in nis premquis pra quo eum reped magnihit iducimped quibus cuptatu ribearcient.
Koptekst 6
Een illustratie met een onderschrift en een link naar een grotere versie van de afbeelding, geplaatst tussen twee alinea’s: Bitaquam, tem quo iusam, et od quaturitium re ea que volupietum rest voluptaquas as velit atem nume sitas nullaborior am dolorei umquaes ciaecum comni commos quatur?
Ieder project is een aaneenschakeling van tegenvallers en successen. De kunst is het om het succes op te zoeken door de tegenvallers in een zo’n vroeg mogelijk stadium te herkennen en aan te pakken.
Cus. Iquis re, offictassi dus necatem quate nos aut repudandit ea cuptatem. Nemque verrum aut ex eos ra sit ent elenis es aliassedit que aboriti oditi dolupta testore pudaerciae maximus exceprate qui aut pere a iliqui ullacepe eum et uta pore alignatus dollorunt exerferspe peris dolest ium ellaborem volendandi beris modipienihit accus.
En een afbeelding rechts van de alinea, zonder link: Nemos quo ma cupis escipsume volupta tatianim que vere et, iuntorro blab illiqui nosam, auditib usamusc ipidem nonsene ceatem demolor ehenduc iuntotae volentis et enda endam atecum sandebitae mo excea.
Aan deze illustratie is de CSS-class border toegevoegd, waardoor een dunnen lijn rondom wordt afgebeeld.