Online links vormen de basis voor eenvoudig online surfen, of het nu gaat om het sturen van gebruikers naar webpagina’s, downloadbare documenten of andere toepassingen.
Het mooie is dat je klikbare links kunt maken binnen veel verschillende applicaties, zoals content management systemen, websitebouwers, tekstverwerkers en e-mailclients.
Deze gids bespreekt alles wat je moet weten over hoe je een link klikbaar maakt, terwijl we ook de grondbeginselen achter een link en de terminologie die je kunt tegenkomen bij het maken ervan uitleggen
Basisprincipes van hyperlinks
Er zijn verschillende termen voor een stuk inhoud, zoals tekst of een afbeelding, dat klikbaar is, oftewel de interactieve mogelijkheid om je cursor op de content te plaatsen en ergens anders heen te navigeren.
Enkele van die termen zijn:
- Link
- Hyperlink
- Klikbare link
Technisch gezien hebben ze allemaal hun eigen definities, maar tegenwoordig worden ze door elkaar gebruikt.
Het vermogen van een gebruiker om te communiceren met online content hangt af van deze hyperlinks, waarbij gebruikers over een stukje tekst, een afbeelding of een knop kunnen scrollen en erop kunnen klikken, waardoor ze naar een ander stukje content worden gestuurd (zoals een externe webpagina) of een actie kunnen uitvoeren (zoals het bellen van een telefoonnummer vanaf je smartphone).
Een eenvoudige met HTML gecodeerde versie van een hyperlink ziet er zo uit:
<a href="https://example.com/">the hyperlink text</a>Maar het wordt ingewikkelder als je optionele zaken als targets en nofollow elementen meerekent:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>Dit zijn de elementen waaruit een hyperlink bestaat:
Blijf lezen om meer te leren over deze elementen en hoe ze werken.
De inhoud
Je kunt klikbare links maken met twee soorten inhoud:
- Tekst
- Grafisch
Dit betekent dat zolang de app die je gebruikt hyperlinks ondersteunt, je elke regel geschreven tekst of afbeelding binnen je content kunt pakken en er een klikbare link van kunt maken.
Tekst met hyperlinks
Tekst is een van de opties bij het maken van klikbare links.
Als je een editor zoals WordPress gebruikt, kun je in het editorscherm elke gewenste tekst markeren en dan de knop Link selecteren.
Dit geeft een link weer voor de lezer, meestal met gekleurde, onderstreepte tekst.
Een tekstuele hyperlink verandert soms als een gebruiker er met de muis overheen gaat, en verandert vaak van kleur of verbergt de onderstreping om aan te geven dat het een klikbare link is.
Bovendien tonen browsers bij het bewegen van de muis over een tekstlink meestal een voorbeeld van de gelinkte URL, zodat je kunt zien waar die naartoe leidt.
Afbeeldingen met hyperlinks
Met veel programma’s – waaronder WordPress – kun je hyperlinks maken met behulp van online media, zoals afbeeldingen.
Dit werkt door in de editor een afbeelding te selecteren (in plaats van tekst) en de gewenste URL toe te voegen via de Link feature.
Eenmaal gepubliceerd verandert de standaard cursorpijl in een handcursor als je met de muis over de afbeelding beweegt, en bezoekers zien in de browser een voorbeeld van de URL waarnaar je linkt.
Of het nu om afbeeldingslink of een tekstlink gaat, door erop te klikken wordt een actie geactiveerd, zoals het sturen van de gebruiker naar een andere URL.
Hoe de codering eruit ziet
De tekst of afbeelding in een hyperlink wordt in onderstaand voorbeeld weergegeven door “The Link Text”:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>Leren hoe je een klikbare link maakt betekent echter dat je die tekst vervangt door je eigen inhoud.
Bij een tekstlink komt de klikbare tekst vlak voor de afsluitende </a> .
Afbeeldingslinks werken iets anders, omdat ze de URL van de afbeelding moeten bevatten (het beste is als je die hebt geüpload naar de mediadatabase van je website).
Die media URL komt tussen de aanhalingstekens in de sectie img src=””.
Er zijn nog andere elementen toe te voegen bij afbeeldingslinks, zoals:
- Een alt tag (alt=””): Tekst die de afbeelding beschrijft voor zoekmachinecrawlers en gebruikers met een visuele beperking.
- Een klasse (class=””): Een gecodeerde naam voor het gebruik van de afbeelding elders in je code of websitebestanden.
De URL
Als onderdeel van een hyperlink dient de URL als bestemming of actie die plaatsvindt als iemand op de link klikt.
Maar niet alle URL’s hebben webpagina URL’s. Sommige hyperlinks hebben een “click to call” functie, waarmee gebruikers met één klik vanaf hun smartphone een telefoonnummer kunnen bellen.
Een andere optie is om een kaart te tonen die de kaart-app van de gebruiker op zijn telefoon opent.
Hoe de codering eruit ziet
URL’s in klikbare links worden geplaatst tussen de aanhalingstekens in het <a href=”” deel van de hyperlink.
Bijvoorbeeld, het https://www.example.com deel van de volgende hyperlinkcode is de URL:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
Sommige URL’s leiden naar downloadbare documenten, terwijl andere een speciale codering vereisen. Bijvoorbeeld, voor een “click to call” link moet je tel: en een telefoonnummer binnen de href=”” aanhalingstekens plaatsen.
Doelvenster
Het doelvenster is een optioneel onderdeel van een hyperlink. Het geeft aan of de inhoud wordt geopend in hetzelfde browsertabblad of in een nieuw browsertabblad.
Op WordPress en veel andere apps kun je met de visuele editor een doelvenster toevoegen zonder code aan te raken.
Schakel gewoon het schakelaartje “Open in new tab” uit als je wilt dat de link wordt geopend in hetzelfde tabblad dat de gebruiker op dat moment bekijkt.
Als alternatief kun je de “Open in new tab” schakelaar activeren, die automatisch een _blank attribuut toevoegt aan de hyperlink codering en de URL in een nieuw tabblad opent als erop wordt geklikt.
Hoe de codering eruit ziet
Deze opties worden geactiveerd door het toevoegen en bewerken van het target=”” element in een hyperlink.
Hoewel het target attribuut verschillende waarden heeft, zoals _blank, _parent, _self, en _top, gebruiken we meestal alleen de _blank waarde.
Een hyperlink zonder het _blank doel ziet er als volgt uit:
Je zult merken dat het niet verschilt van een gewone hyperlink. Dat komt omdat hyperlinks standaard niet openen in een nieuw tabblad. Je hoeft dus niets aan de link te doen, tenzij je hem liever in een apart tabblad ziet openen.
Een hyperlink met het _blank doel, waardoor de URL in een apart tabblad wordt geopend, ziet er ongeveer zo uit:
<a href="https://www.example.com" target="_blank">View the entire menu.</a>
nofollow, noreferrer en noopener
Je kunt ook extra elementen toevoegen aan een klikbare link, waarvan de meeste beveiliging of cloaking voor zoekmachines toevoegen:
- nofollow: Een attribuut dat blokkeert dat “SEO link juice” naar de gelinkte website gaat. Dit helpt je website te beschermen en kan de link verbergen voor zoekmachines.
- noopener: Dit is een HTML attribuut dat automatisch wordt toegevoegd aan WordPress links gemarkeerd als “Open in een nieuw tabblad”. Het wordt gekoppeld aan noreferrer om bepaalde beveiligingsproblemen bij het openen van links in nieuwe tabbladen te minimaliseren.
- noreferrer: Vaak gekoppeld aan noopener, blokkeert het noreferrer attribuut alle verwijzingsinformatie die wordt doorgegeven aan de doelsite, waardoor extra veiligheid wordt toegevoegd en gegevens van tracking sites en affiliate verdien sites mogelijk worden geblokkeerd.
Je kunt geen van deze link attributen identificeren door naar een link op de live site te kijken. In plaats daarvan moet je in de HTML-code kijken.
Hoe de codering eruit ziet
Al deze linkattributen staan tussen de aanhalingstekens in het rel=”” gedeelte van de klikbare link.
Het is mogelijk ze allemaal in één link op te nemen.
Je kunt ook zien dat sommige hyperlinks alleen een noreferrer noopener attribuut bevatten, of een nofollow zonder de andere twee. Het hangt allemaal af van wat de maker van de link wil bereiken.
Redenen om een link klikbaar te maken
Wanneer je leert hoe je een link klikbaar maakt, is het belangrijk om alle redenen achter hyperlinking te begrijpen. Zo ben je je bewust van de mogelijkheden en kun je er in de toekomst je voordeel mee doen.
Hier zijn de belangrijkste redenen om een link klikbaar te maken:
- Algemene interne/externe hyperlinks naar URL’s: Je kunt tekstlinks maken die wegleiden van je website (zoals voor het citeren van bronnen of het versterken van een stelling met een externe studie), of naar andere pagina’s op je site (vooral handig om lezers naar relevante content te sturen en ze langer op je site te houden).
- Afbeeldingen linken: Aan elke afbeelding op WordPress, en vele andere websitebouwers, kun je hyperlinks toevoegen naar URL’s, mediabestanden of bijlagepagina’s.
- Knoppen linken: CSS knoppen bieden mogelijkheden voor het toevoegen van hyperlinks, waardoor je klikbare link een aantrekkelijkere, visuele ervaring krijgt in vergelijking met gewone tekst.
- Telefoonnummers: Vaak een “click to call” functie genoemd, hyperlinks die leiden naar telefoonnummers openen apps met belmogelijkheden, zoals de eigenlijke telefoon app op je apparaat, of Skype.
- Adressen: Hyperlinken naar specifieke coördinaten op Google of Apple Maps betekent dat de gebruiker die op de link klikt, die informatie automatisch in zijn GPS/kaart-app krijgt voor navigatie.
- E-mailadressen: Dit is vergelijkbaar met “click to call” links, maar dan met e-mailadressen. Het triggert de e-mail app op een telefoon of computer, samen met een nieuwe e-mailcompositie met een specifiek e-mailadres toegevoegd in het veld Aan.
- Anchorlinks maken: Je kunt linken naar inhoud op dezelfde pagina door ankerlinks te gebruiken; deze zijn erg populair voor het maken van een inhoudsopgave aan het begin van een lange blogpost. Ze worden ook wel “bookmark hyperlinks” genoemd
- Een downloadbaar bestand aanbieden: WordPress en andere websitebouwers bieden hulpmiddelen om SVG bestanden, PDF’s, HTML bestanden en nog veel meer te uploaden; je kunt zelfs items in bulk uploaden. Daarna is het mogelijk om in berichten/pagina’s hyperlinks aan te brengen waarmee gebruikers de bestanden rechtstreeks naar hun apparaten kunnen downloaden.
Nu we de soorten hyperlinks en de redenen waarom je er een zou willen maken hebben besproken, kun je verder lezen hoe je dat voor elkaar krijgt.
Zo maak je een link klikbaar
De methode die je kiest om een link te maken hangt af van je ervaring. Je kunt kiezen voor een eenvoudiger visuele methode of overwegen HTML code te gebruiken.
Er zijn vier primaire methoden om een link klikbaar te maken:
- Met behulp van de WordPress Classic Editor
- Met behulp van de WordPress Block Editor (Gutenberg)
- Met behulp van HTML
- Met behulp van een grafische gebruikersinterface (GUI)
Houd in gedachten dat al deze methoden vrijwel hetzelfde werken voor zowel WordPress berichten als pagina’s. Deze tutorials (met name methode 4) zijn ook nuttig voor andere apps/websitebouwers, maar sommige terminologie/functionaliteit kan verschillen.
Methode 1: De WordPress Classic Editor gebruiken
Als je werkt met de WordPress Classic Editor is de eenvoudigste manier om een klikbare link op een post of pagina te maken via het tabblad Visual editor.
Ga daarvoor naar het onderdeel Posts of Pages van je WordPress dashboard, en selecteer een individuele pagina of post die je wilt bewerken, via het tabblad Visual.
Stap 1: Markeer de tekst die je klikbaar wilt maken
Voor een tekstlink kun je het beste de tekst al in de Visual editor hebben getypt. Gebruik daarna je cursor om de tekst te markeren.
Als je van een afbeelding een klikbare link maakt:
Selecteer de afbeelding zodat je een bewerkingsbalk en een contour rond de afbeelding ziet.
Stap 2: Klik op de knop Insert/edit link
Terwijl de tekst nog steeds gemarkeerd is, scroll je over de knop Insert/edit link in de werkbalk van de visuele editor. Het pictogram van de knop ziet eruit als een kettinglijn.
Als je van een afbeelding een klikbare link maakt:
Met de afbeelding nog geselecteerd, klik je op de knop Insert/edit link (degene die eruitziet als een ketting).
Stap 3: Plak een URL
Er verschijnt nu een leeg URL veld. Kopieer (Command + C, of Ctrl + C) de gewenste link URL naar het klembord van je apparaat. Deze link kan een externe URL zijn die je ergens anders op het internet hebt gevonden of een URL van je eigen website.
Eenmaal gekopieerd plak je hem (Command + V, of Ctrl +V) in het veld.
Als je van een afbeelding een klikbare link maakt:
Plak de gewenste URL in het onthulde veld en klik dan op de knop Apply om de link te activeren.
Stap 4: Pas de link toe
Klik op de knop Apply om de link te activeren en de tekst klikbaar te maken.
Je zou nu het hyperlink gedeelte van je tekst onderstreept moeten zien, en mogelijk in een andere kleur.
Als je in je editor op de hyperlink klikt, verschijnt er een live link om te testen, samen met bewerkingstools voor het geval je de hyperlink wilt veranderen.
Extra opties
We behandelen meer geavanceerde klikbare links in de volgende secties, maar het is de moeite waard om op te merken dat elke link die je maakt in de Classic WordPress editor een Link options knop heeft voor extra instellingen.
Hier kun je:
- De URL aanpassen
- De tekst van de link wijzigen
- De link in een nieuw tabblad openen
- Zoeken naar en linken naar bestaande inhoud op je site
Als je van een afbeelding een klikbare link maakt:
De klassieke WordPress editor biedt een tweede manier om afbeeldingen klikbaar te maken. Dat is door de afbeelding te selecteren en dan de knop Edit (lijkt op een potlood) te kiezen in de popup werkbalk.
Scroll naar het veld Link to, waarmee je kunt linken naar een Custom URL. Plak gewoon de gewenste URL in het veld daaronder, en klik op Update.
Je kunt ook het Link naar dropdown menu selecteren om een hyperlink naar te maken:
- Mediabestanden
- Bijlage pagina’s
- Custom URL’s
- Geen
Methode 2: De WordPress Block Editor gebruiken (Gutenberg)
Hyperlinks werken hetzelfde voor zowel berichten als pagina’s in de WordPress Block Editor.
Ga om te beginnen naar het onderdeel Posts of Pages van je WordPress dashboard. Selecteer een individuele post of pagina die je wilt bewerken, en duik dan in de onderstaande stappen.
Stap 1: Markeer tekst
Typ wat tekst in de editor. Markeer met je cursor het gedeelte van de tekst dat je klikbaar wilt maken. Klik in de popup werkbalk op de Link knop.
Als je van een afbeelding een klikbare link maakt:
Een afbeelding klikbaar maken in de WordPress Block editor begint met het daadwerkelijk toevoegen van een afbeelding aan de editor.
Klik daarvoor op de knop Add block en selecteer dan het blok Image. Upload de afbeelding die je wilt linken.
- Klik op de afbeelding zodat die gemarkeerd/selecteerd is, en kies dan de knop Insert link in het popupvenster van de werkbalk.
Stap 2: Plak de URL en sla de link op
Je ziet nu een popup met een leeg veld. Plak de URL waarnaar je wilt linken, klik dan op Enter op je toetsenbord, of op de Submit knop om de klikbare link te activeren.
De tekst van de hyperlink wordt nu in een andere kleur weergegeven, en je kunt op de link klikken om een voorbeeld van de inhoud te bekijken en meer geavanceerde instellingen voor het linken toe te voegen.
Als je van een afbeelding een klikbare link maakt:
Er zijn opties om mediabestanden en pagina’s met bijlagen te hyperlinken als je dat wilt.
Plak hiervoor een URL in het lege linkveld. Klik op de knop Apply om de link te activeren. Na het publiceren wordt iedereen die op de afbeelding klikt naar de link gebracht die je hebt opgegeven.
Klik voor meer opties op de knop Pijl naar beneden (v):
- De link in een nieuw tabblad te openen
- Link toevoegen
- CSS klasse van de link toevoegen
Extra opties
We gaan in de volgende paragrafen dieper in op geavanceerde hyperlinkstructuren, maar je moet weten dat er een Edit knop beschikbaar is als je met je cursor op de nieuw aangemaakte link klikt.
Deze Edit pagina laat velden zien om:
- De tekst van de link te wijzigen
- De URL te wijzigen
- De link in een nieuw tabblad te openen
Andere klikbare links die je in de Block Editor kunt maken
De WordPress Blok editor breidt de gebruikelijke linkmogelijkheden uit. In feite maken tientallen ingebouwde blokken een soort klikbare linkstructuur mogelijk, waaronder:
- Knoppen: Een stijlvolle manier om inhoud te koppelen in vergelijking met eenvoudige tekstlinks.
- Bestanden: Upload snel bestanden en voeg een knop toe waarop gebruikers kunnen klikken om ze te downloaden.
- Sociale pictogrammen: Voeg sociale pictogrammen in met klikbare links.
- Navigatie: Plaats overal op je site navigatieknoppen met behulp van klikbare links.
- Meer lezen: Kan gebruikt worden om je inhoud in te korten en een link te geven naar de uitgebreidere versie.
- Inloggen/uitloggen: Voeg een snelle link toe voor gebruikers om in te loggen op je site.
- Volgende bericht: Voeg een klikbare link/knop toe naar het volgende blogbericht op je site.
- Vorige bericht: Voeg een klikbare link/knop toe die naar het vorige blogbericht op je site gaat.
Methode 3: HTML gebruiken
Een link klikbaar maken met HTML functioneert op dezelfde manier, ongeacht de interface van je editor.
Je kunt HTML bewerken met:
Het Text paneel in de WordPress Classic Editor
De Code Editor in de WordPress Block Editor
Een HTML/tekst editor op je apparaat
Teksteditors als Atom, Sublime Text en Coda bieden de interface die nodig is om HTML te schrijven en te bewerken, vooral voor klikbare links. Het is ook mogelijk om Markdown editors te gebruiken.
Na het werken met de teksteditor kun je:
- Je bestanden uploaden voor publicatie op internet, via FTP of SFTP. We raden aan FileZilla te gebruiken voor het meest gestroomlijnde proces.
- HTML bestanden in bulk uploaden naar de bestandsmap van WordPress.
- Een van de vele andere FTP clients gebruiken voor het uploaden van HTML bestanden naar WordPress.
Nadat je een teksteditor hebt gevonden – en je weet hoe je de HTML gaat uploaden naar WordPress – ga je naar de onderstaande stappen om een link klikbaar te maken met HTML.
Dit format wordt gebruikt voor basic hyperlinks in HTML:
<a href="https://www.example.com">Link Text</a>
- Code voor een link in de Text editor
Opmerkingen:
- Vervang “https://www.example.com” door de gewenste URL.
- Vervang “Link Text” door de gewenste linktekst.
Als je de link klaar hebt, kun je het bericht/de pagina publiceren, of de HTML uploaden naar je site. Het is ook mogelijk om een visueel voorbeeld van de link te krijgen door over te schakelen naar het tabblad Visual op WordPress.
Een gepubliceerde versie van die HTML link toont de link onderstreept en soms in een andere kleur. Als je de muis over die link beweegt, verschijnt het doel ervan onderin de browser.
Methode 4: Een grafische gebruikersinterface (GUI) gebruiken
Hoewel we niet elke denkbare GUI die er bestaat kunnen bespreken, lijkt het proces van klikbaar maken van een link in een andere omgeving dan WordPress of HTML vaak op wat we zojuist behandeld hebben.
Over het algemeen kan het zijn dat elke GUI weer een iets andere naam heeft voor een knop of een ander pictogram gebruikt voor het maken van een hyperlink.
Je algemene proces zou er echter altijd als volgt uitzien:
- Markeer de tekst die je wilt linken.
- Klik op het Link pictogram (kan een andere naam hebben) in de editor.
- Plak de gewenste URL erin.
- Klik op de knop Add link (kan ook een andere naam hebben).
Als simpel voorbeeld kun je met een online winkelbouwer als Shopify een link aanklikbaar maken op elke pagina of post, door tekst te markeren en op de knop Insert link te klikken.
Je plakt dan de doel-URL in en klikt op de knop Insert link.
Dit levert een klikbare link op.
Links laten openen in een nieuw tabblad
Zoals we eerder bespraken, bieden WordPress en andere GUI’s extra aanpassingsmogelijkheden voor klikbare links, zoals het dwingen van een link om in een ander tabblad te openen.
Hoe doe je dat? Laten we eens kijken.
Link openen in een nieuw tabblad met WordPress Classic Editor
Zodra je een klikbare link in de WordPress Classic Editor hebt, kies je de knop Link options.
Schakel het vakje Open link in new tab uit.
Klik dan op de knop Update.
Link in nieuw tabblad openen met de WordPress Block Editor
Aangenomen dat je al een link hebt toegevoegd in de WordPress Block Editor, opent een klik op de link een popuppreview van de doelinhoud.
De knop Edit geeft toegang tot meer instellingen (waaronder de optie Open in new tab), maar het is gemakkelijker om de schakelaar Open in new tab onderaan het popupvenster om te zetten.
Link openen in nieuw tabblad met HTML
In de WordPress Text editor, WordPress Code editor, of een algemene HTML editor kun je de volgende code gebruiken om het zo te maken dat je klikbare link in een nieuw tabblad opent:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>- Vervang “https://www.example.com” door je gewenste doel URL
- Vervang “Link Text” door de tekst die je wilt linken.
- Het target=”_blank” attribuut is het stukje code dat de link daadwerkelijk opent in een nieuw tabblad. Het is het enige deel dat echt nodig is voor deze eenvoudige functie.
- We raden je ten zeerste aan de rel=”noreferrer noopener” attributen en waarden toe te voegen om veel voorkomende beveiligingsproblemen bij het openen van links in nieuwe tabbladen te voorkomen. Het is echter heel goed mogelijk om ze uit de code te laten en de link toch in een nieuw tabblad te laten openen.
Na publicatie ziet de link er precies hetzelfde uit, maar bij aanklikken opent de doel-URL in een nieuw tabblad.
Nofollow toevoegen aan een hyperlink
De nofollow HTML waarde vertelt zoekmachines een klikbare link te negeren, en voorkomt dat zoekmachinewaarde (link juice) wordt doorgegeven aan de doelwebsite. Het belangrijkste doel van nofollow is het verminderen van spamlinks, maar makers van content gebruiken het voor betaalde links, comments, door gebruikers gegenereerde inhoud, embeds, of wanneer je liever niet gezien wilt worden als een goedkeuring van een site waarnaar je linkt.
WordPress heeft geen ingebouwde manier om een nofollow link toe te voegen, maar het is mogelijk door HTML toe te voegen.
De volgende code geeft een basic link weer met een nofollow waarde:
<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
Wat je ziet:
- Vervang de “https://www.example.com” tekst door je gewenste doel URL.
- Vervang het gedeelte “The Link Text” door de gewenste linktekst.
- Gebruik het rel=”nofollow” attribuut en de waarde binnen de link HTML.
Bij publicatie, of in de Visual weergave, ziet een nofollow link er niet anders uit dan een standaard hyperlink; toch wordt de nofollow functionaliteit opgeslagen in de backend code.
Linken naar bestaande content
Linken naar bestaande contentis een exclusieve functie van WordPress, waarbij je rechtstreeks in de WordPress editor naar eerder gemaakte blogberichten en pagina’s kunt zoeken. Hierdoor hoef je hun URL’s niet in een ander browservenster op te roepen om ze te kopiëren en te plakken in een klikbare link.
Linken naar bestaande inhoud in de Classic Editor van WordPress
Maak een link door de gewenste tekst te markeren en in de editor op de knop Add/Edit link (kettingpictogram) te klikken. Er verschijnt nueen popupveld, waar je kunt klikken op de knop Link options (tandwielpictogram).
- Ga naar het onderdeel “Or link to existing content”.
- Typ een trefwoord in de zoekbalk en kies dan een bestaande pagina of post uit de resultaten.
- Zie hoe de link naar de bestaande inhoud automatisch in het URL veld wordt geplaatst.
Zorg ervoor dat je op de knop Add link klikt als je klaar bent.
Dit levert meteen een link op naar andere content (ook wel interne link genoemd) in de editor.
Linken naar bestaande content in de WordPress Block Editor
Markeer de tekst/afbeelding die je wilt linken en klik dan op de knop Linken in de popup werkbalk.
Het veld heeft twee features: je kunt er een URL in plakken, of het gebruiken als zoekbalk. Typ daarom een trefwoord in dat betrekking heeft op een deel van je bestaande content om gerelateerde resultaten te tonen.
Zodra je de gewenste pagina of post ziet, klik je erop.
Dat maakt automatisch een link naar de bestaande inhoud in de WordPress Block Editor.
Zo maak je klikbare telefoon-, sms- en e-maillinks
Er zijn een paar manieren om speciale acties toe te voegen aan klikbare links door de standaard URL structuur uit te wisselen en naar iets anders te linken, zoals:
- Een telefoonnummer dat de Telefoon app opent.
- Een telefoonnummer dat de sms app opent.
- Een e-mailadres dat automatisch de e-mail app van de gebruiker opent.
Zo maak je een klikbare telefoon link
Een “click to call,” of telefoonlink voegt automatisch een specifiek telefoonnummer toe aan de telefoon app van de gebruiker, of zelfs een app die telefoonnummers ondersteunt, zoals Skype.
In plaats van een URL te gebruiken, zou je de tel: code in de HTML invoegen, gevolgd door een telefoonnummer, zoals dit:
<a href="tel:555-555-5555">Click To Call</a>Opmerkingen:
- Vervang het telefoonnummer door het nummer dat je gebruikers wilt laten bellen.
- Vervang de “Click to call” tekst door wat je wilt dat de linktekst laat zien.
In visuele editors zoals WordPress Block en WordPress Classic typ je simpelweg tel:555-555-5555 (met het gewenste telefoonnummer) in het URL veld voor een link. Klik op Enter om de telefoonlink automatisch voor je te genereren.
Als iemand op die link klikt, wordt hij of direct naar de meest relevante app gestuurd (de telefoon app op een smartphone) of hij ziet een prompt om een app als Skype te openen.
Zo maak je een klikbare sms link
Klikbare sms links werken net als telefoonlinks, maar ze kiezen ervoor om automatisch berichten-apps te openen in plaats van bel-apps.
Om een sms link toe te voegen gebruik je sms:555-555-5555 in plaats van een URL.
<a href="sms:555-555-5555">Click To Text</a>Opmerkingen:
- Vervang “555-555-5555” door een ander telefoonnummer.
- Vervang “Click To Text” door welke tekst je maar wilt voor de link.
Zowel Classic als Block WordPress editors ondersteunen sms links als je de waarde sms:555-555-5555 binnen het URL veld voor links zet.
Zoals beloofd worden de messaging apps van gebruikers geopend wanneer ze op dit soort links klikken.
Zo maak je een klikbare e-mail link
Bij het aanklikken van e-mail hyperlinks opent het apparaat van de gebruiker automatisch zijn meest relevante e-mail app, samen met een Compose sectie die naar een specifiek e-mailadres gaat.
Voor deze voeg je de mailto: code toe, gevolgd door een e-mailadres, waar je normaal gesproken een doel URL zou plaatsen.
<a href="mailto:[email protected]">Click To Email</a>Opmerkingen:
- Vervang het e-mailadres “[email protected]” door het gewenste doel e-mailadres.
- Vervang de “Click To Email” tekst door wat je wilt dat de linktekst weergeeft.
Als je de WordPress Classic of Block Editors gebruikt, typ dan gewoon de mailto:[email protected] waarde in het URL veld bij het maken van een link.
Nadat je de link hebt gepubliceerd, worden gebruikers die erop klikken doorgestuurd naar hun mailing-app, met het e-mailadres dat je hebt opgegeven in het veld Aan:.
Samenvatting
Het toevoegen van klikbare links (ook wel hyperlinks of simpelweg links genoemd) kan de interactiviteit op je website verbeteren, mensen naar meer van je content leiden, en verwijzen naar belangrijke informatie van elders op het internet. Daarom is leren hoe je een klikbare link maakt een van de basislessen voor het ontwerpen van websites en het maken van content.
Na het lezen van dit artikel zou je het uiterlijk van een klikbare link moeten kunnen herkennen en precies moeten weten hoe je er een maakt, of het nu gaat om het toevoegen van een link aan tekst of afbeeldingen. Het is ook fijn om te weten dat er verschillende methoden zijn om een link klikbaar te maken, zoals via de WordPress Classic Editor, Block Editor, HTML, of elke andere beschikbare grafische gebruikersinterface.
En natuurlijk moedigen we je aan om de meer geavanceerde klikbare linkopties te verkennen, zoals links voor telefoonnummers, e-mailadressen en die met nofollow tags.
Als je nog vragen hebt over hoe je een link klikbaar maakt, deel ze dan in de comments hieronder.
Laat een reactie achter