Link hyperlink maken toevoegen WordPress pagina

Er zijn verschillende manieren om links toe te voegen in WordPress. U kunt links toevoegen in uw berichten, pagina’s, navigatie menu, sidebar widgets, footer gebied, en nog veel meer. In deze uitgebreide beginnershandleiding laten we u zien hoe u een link toevoegt in WordPress berichten, pagina’s, widgets, navigatiemenu’s, en meer.

Waarom zijn links belangrijk?

Links zijn de bloedsomloop van het internet, en daarom zijn ze erg belangrijk. In principe zijn de meeste websites op het internet met elkaar verbonden via links, wat de reden is waarom de term “web” of “World Wide Web” in de eerste plaats werd geïntroduceerd.

Dit zijn de tekst, knoppen en andere elementen met hyperlinks waarop u klikt om van de ene pagina naar de andere te gaan of van de ene website naar de andere.

Stel je eens voor dat u een webpagina bezoekt zonder dat je op een link kunt klikken. U zult geen andere keuze hebben dan op de terugknop in uw browser te klikken.

Voor individuele websites vertellen links uw gebruikers waar ze moeten klikken om meer informatie te bekijken.

Door links op de juiste manier op uw website te plaatsen, kunt u de tijd die gebruikers op uw website doorbrengen verlengen. Het helpt gebruikers ook meer inhoud te ontdekken, een aankoop te doen in uw online winkel, of zich in te schrijven voor uw e-mail nieuwsbrief.

Laten we eens kijken hoe u eenvoudig links kunt toevoegen in verschillende gebieden van uw WordPress website.

Hoe links in WordPress berichten en pagina’s toe te voegen

WordPress maakt het heel gemakkelijk om links toe te voegen in uw blog berichten en pagina’s met behulp van de blok editor. Bewerk gewoon uw bericht of pagina, of maak een nieuwe.

• Vervolgens markeert u de tekst waar u de link aan wilt koppelen. Deze geselecteerde tekst wordt de ankertekst voor de link genoemd. Klik nu op de ‘Link’ knop:
• Je ziet dan een vak waar je een URL kunt invoeren. Een URL is een webadres. Bijvoorbeeld: https://www.cursuswp.com
• Als je linkt naar inhoud op je eigen site, dan is het misschien sneller om ernaar te zoeken. Typ een woord of twee uit de titel van je inhoud, en WordPress zal het vinden:
• Zoeken naar een pagina om naar te linken met behulp van de WordPress blok editor
• Klik op de titel van de pagina of het bericht waarnaar je wilt linken, en de URL wordt automatisch voor je toegevoegd. Nogmaals, je moet op de knop Toepassen klikken om de link in je bericht te plaatsen.

Links maken in HTML

Je kan ook een links maken in HTML. Je hebt dan het html-gutenberg blok nodig. Een html link ziet er zo uit:

<a href='https://www.cursuswp.com/bootcamp/'>Link naar WordPress Bootcamp </a>

Links maken in WordPress tekst widgets

WordPress maakt het mogelijk om widgets toe te voegen aan de niet-inhoudelijke delen van uw site, zoals de zijbalk, voettekst of andere widget gebieden.

Sommige van deze widgets zijn geautomatiseerd en hebben niet veel opties. Bijvoorbeeld, de Recent Posts widget zal automatisch links tonen naar je recente berichten. Je hoeft hier niets extra’s voor te doen.

Als je echter wat aangepaste tekst met links in je zijbalk wilt zetten, dan kun je de Tekst Widget gebruiken.

• Ga naar de pagina Uiterlijk ” Widgets en sleep de widget ‘Tekst’ naar je zijbalk of een ander widgetgebied.
• Je kunt dan je tekst typen en een link toevoegen, net zoals je zou doen als je een link aan een bericht of pagina toevoegt.

Hoe links toevoegen in WordPress navigatie menu’s

Wilt u links toevoegen aan het navigatie menu van uw site? WordPress heeft een ingebouwde drag and drop menu editor waarmee u navigatie menu’s op uw WordPress site kunt maken en beheren.

• Ga naar de pagina Weergave > Menu’s.
  Als je nog geen menu hebt ingesteld, dan kun je er een aanmaken door een menu naam in te voeren.
• Selecteer vervolgens aan de linkerkant de pagina’s die u aan uw menu wilt toevoegen en klik vervolgens op de knop ‘Toevoegen aan menu’.

WordPress zal automatisch linken naar uw geselecteerde berichten en pagina’s. U kunt menu items verplaatsen en omhoog en omlaag om ze te herschikken.

Je kunt ook elke link die je maar wilt aan je menu toevoegen. Het hoeft geen pagina of post op uw site te zijn. U kunt bijvoorbeeld de URL van uw Twitter-profiel invoeren en die aan uw navigatiemenu toevoegen.

Om een link in te voeren, klik je op de pijl naast de ‘Aangepaste links’ sectie aan de linkerkant. U kunt dan de URL invoeren en de tekst die u voor de link wilt gebruiken.

Tips over links maken

WordPress links kleur stijlen en vormgeven voor gevorderden

Bij de betere thema’s kun je uiteraard de links een kleur geven.

Mocht dit niet lukken moet je het met CSS doen.
Het is handig om de onderstaande links te lezen hoe CSS werkt:

Voorbeelden CSS links kleur stijlen en vormgeven

Hieronder vind je voorbeelden

a { 
    color: #fff; 
    &:hover, &:visited, &:active { color: #696969; }
 }

p {
a { 
        color: #fff; 
        &:hover, &:visited, &:active { color: #696969; }
     }
}

h2 a:link {color:#0c08c1;}    
h2 a:visited {color:#0c08c1;} 
h2 a:hover {color:#fc8002;}   
h2 a:active {color:#fc8002;}

h3 a:link {color:#0c08c1;}    
h3 a:visited {color:#0c08c1;} 
h3 a:hover {color:#fc8002;}   
h3 a:active {color:#fc8002;}

#content h2 a:link {color:#0c08c1;}    
#content h2 a:visited {color:#0c08c1;} 
#content h2 a:hover {color:#fc8002;}   
#content h2 a:active {color:#fc8002;}

#content h3 a:link {color:#0c08c1;}    
#content h3 a:visited {color:#0c08c1;} 
#content h3 a:hover {color:#fc8002;}   
#content h3 a:active {color:#fc8002;}

h1, h2, h3{
 a{
   color:#d99a30 !important;
   &:hover{ color:#37404e !important;}
 }
}      

Voorbeelden van stijlen html links met style (inline CSS)

Voorbeeld Link 1

<style>
.vriend a{
    font-family:Verdana;
    font-size:48px;
    color:red;
}
  }
</style>
<div class='vriend'>
  <a href='https://www.cursuswp.com/bootcamp'>Bootcamp!</a>
</div>

Voorbeeld Link 2

<style>
.voorbeeld-arthur a{
background-image: linear-gradient(transparent 0,transparent calc(50% - 6px),rgba(238,108,77,.35) calc(50% - 9px),rgba(238,108,77,.35) 100%);
transition: background-position 120ms ease-in-out 0s,padding 120ms ease-in-out 0s!important;
background-size: 100% 200%;
background-position: 0 0;
word-break: break-word;
text-decoration: none;
}
.voorbeeld-arthur a:hover{
background-image: linear-gradient(transparent 0,transparent calc(50% - 26px),rgba(238,108,77,.35) calc(50% - 26px),rgba(238,108,77,.35) 100%);
transition: background-position 120ms ease-in-out 0s,padding 120ms ease-in-out 0s!important;
color: #f44336;
position: relative;
}
  }
</style>
<div class='voorbeeld-arthur'>
  <a href='http://www.cursuswp.com/bootcamp'>Bootcamp!</a>
</div>

Veel gestelde vragen over links maken

Kan ik 2 keer dezelfde link op dezelfde pagina plaatsen

Een vraag die ik vaak gesteld krijg, is of je meerdere links naar dezelfde content (vanaf dezelfde pagina) moet bieden.

Het antwoord is over het algemeen nee. Hoewel de bedoeling goed is, is het resultaat op lange termijn niet wat je zou verwachten. In veel situaties is het beter uw interface te stroomlijnen met weinig duidelijke keuzes dan meer links aan te bieden om een breder publiek te bereiken.

Tip: Elimineer dus waar mogelijk redundantie op webpagina’s om de cognitieve overbelasting te verminderen. Elke extra link maakt uw site moeilijker te gebruiken.

Info: nngroup.com/articles/duplicate-links/