Shortcode toevoegen

Wat is een shortcode?

Met shortcodes kan je zonder HTML kennis toch bepaalde opmaak toevoegen aan je website. Inhoud wordt dan vaak tussen shortcode blokken geplaatst.

Een voorbeeld is:

[ video ] https://www.youtube.com/watch?v=jqM4w9 [ / video ]
Let op!

Hieronder wordt een voorbeeld gegeven wat je met shortcodes op je WordPress website kan doen. Dit is geen standaard functionaliteit in WordPress en zal door een ontwikkelaar zelf aan de thema moeten worden toegevoegd. Heb je vragen hierover neem dan contact op met Revealit via support@revealit.nl of 085 773 77 36.

1. Een voorbeeld link plaatsen

Stel ik wil onder de tekst van de pagina een button of link plaatsen dan kan je dit doen door middel van een link toe te voegen. Maar als ik de link een eigen opmaak wil geven dan zal ik door middel van een “Shortcode” deze moeten toevoegen. Dit heel gemakkelijk door in de editor straks een stukje code te plaatsen.

1

2. Pagina openen

Eerst moet je in WordPress inloggen en vervolgens ga je de pagina waar je de link wilt plaatsen. In dit voorbeeld bewerken we de pagina Shortcode. Eenmaal op de pagina dan plaats je de cursor op een nieuwe regel.

2

3. Shortcode plaatsen

In dit voorbeeld hebben we te maken met de shortcode links dat straks een button op de pagina zal plaatsen. Wanneer je de cursor op een nieuwe regel of alinea hebt geplaatst voer je de volgende code uit en slaan je de pagina op:

[ links ]

3

4. Het resultaat

Als we nu naar de website gaan dan zien we een button staan. Echter we hebben nog geen link en tekst attributen toegevoegd aan de shortcode. Dit gaan we nu doen!

4

5. Attributen aan de shortcode toevoegen

Iedere shortcode kan verschillende attributen bevatten deze attributen worden vooraf aan je doorgegeven. In dit geval beschikken we over de volgende attributen:

  1. link *
  2. titel
  3. doel
  4. kleur
  5. tekst *

* De attributen 1 & 2 zijn verplichte velden, de overige zijn optioneel. De shortcode ziet er als volgt uit met deze attributen eraan toegevoegd.

[ links link="http://dev.revealit.nl/voorbeeld-pagina/" tekst="Bekijk deze pagina" ]

En als we nu de website aan de voorzijde opnieuw bekijken dan zie we de link staan met de juiste tekst en link.

5