Plugins er ikke nødvendige
Mange internet-brugere bliver en smule forvirret, når de klikker på links som fører væk fra det aktuelle website, med mindre dette er tydeligt indikeret.
Der findes WordPress plug-ins der kan tilføje et symbol efter et eksterne links. Fælles for dem er, at det tilføjer en del ekstra kode til dit website.
Du kan selvfølgelig også bare skrive “Eksternt link” eller “PDF” efter dine links, men hvis du er ligesom mig, eller arbejder i et team, så ved du også at det næppe bliver en konsekvent indsats.
Lad CSS gøre arbejdet for dig
Heldigvis tilbyder CSS nogle smarte funktioner, der gør det let at adressere links, som f.eks. peger på sider der ikke ender på oldrup.dk, eller links som ender på .pdf. Når vi kan det, så kan vi tilføje noget bagefter. Jeg kan godt lide symbolet “black upper right triangle”. Det ser sådan her ud: ◥
Når det kommer til PDF filer, er et lille PDF et godt valg efter min mening. Man kunne også anvende en lille SVG-grafik. Som altid – når du styler via CSS, er det let at ændre.
Opdatering: En lille hage tegnet ◥
Jeg er blevet opmærksom på, at diverse symboler og tekster vi tilføjer efter links, bliver læst op af skærmlæsere. Det betyder, at med nedenstående kode vil et eksternt link, afhængig af skærmlæser, blive efterfulgt at ordene “black upper right triangle”
Det er selvsagt ikke optimalt. Og der er ikke umiddelbart nogen indlysende løsning på det problem fordi:
- Der findes et UTF-8 link symbol 🔗men det vises meget forskelligt i forskellige browsere – det er med andre ord ret grimt.
- Når vi bruger CSS’ content property, kan vi kun manipulere med indholdet af den efterfølgende tekst. Vi kan altså ikke fx tilføje en aria-label eller en alt-tekst til en eventuel inline SVG grafik.
- Man kan ikke bruge media queries til at konstatere om der benyttes skærmlæsere og fx benytte teksten “eksternt link” i stedet for trekanten.
Så metoden her, gør nok livet lidt lettere for normalt seende, men er formentlig irriterende for brugere af skærmlæsere.
PDF-etiketten fejler ikke noget. Der er kun ◥ vi skal finde en bedre løsning til. Smid gerne en kommentar nederst, hvis du har et godt forslag.
Eksempler på styling
Inline-links i tekstafsnit
Herunder, ser du forskellen på inline-links til eksterne websites og PDF filer.
Bevægelsen Vild Med Vilje har udarbejdet folderen Vilde Haver i tæt samarbejde med Fredericia Kommune
PDF etiket i Gutenberg fil-blok
Landsforeningen Praktisk Økologi har udgivet en guide i hvordan du skaber mere vild natur hvor du bor. Guiden er også, for eksemplets skyld, mulig at hente i en komprimeret udgave herunder. Bemærk hvordan den lille PDF-etiket er føjet til filnavnet, men undladt i knappen.
Tilføj symbol eller etiket efter eksterne links med CSS
Nedenstående CSS kan du tilføje til dit WordPress website. Du skal selvfølgelig huske at ændre [href*="oldrup.dk"] til dit eget domæne-navn.
Koden adresserer med vilje kun eksterne links i din brødtekst. Har du links uden for denne sektion som du ønsker at markere, f.eks. i din header eller footer, kan du tilføje rel="external" attributten til linket.
CSS kodestump
/*** Symbol or label after external links 2022-04-20 ***/
/* Target content section, explicit external links and PDF's */
.entry-content a[href^="https"]:not([href*="oldrup.dk"]):after,
a[rel*="external"]:after,
.entry-content p a[href$=".pdf"]:after,
.wp-block-file a[href$=".pdf"]:first-of-type:after {
content: var(--link-suffix-content, "\25E5");
display: inline-block;
padding-bottom: 0.3rem;
font: normal var(--link-suffix-weight, normal) 0.6em sans-serif;
vertical-align: text-top;
text-decoration: none;
}
/* Use PDF label and bold weight on PDF files */
a[href$=".pdf"] {
--link-suffix-content: "\00A0PDF";
--link-suffix-weight: bold;
}
/* Blocksy: No decoration on links with symbol unless hovering */
.entry-content a[href^="https"]:not([href*="oldrup.dk"]):not(:hover),
a[rel*="external"]:not(:hover) {
--has-link-decoration: var(--false);
}Hvis du vil vide mere
Her er et par referencer, hvis du vil vide mere om hvordan du kan bruge CSS Pseudo Elements og Attribute Selectors til din fordel, eller hvis du vil udvide koden til også at omfatte fx Word dokumenter eller YouTube links. Gør det nemt for dig selv og dine besøgende.
HTML attribute: rel på MDN Web Docs
Pseudo-elements på MDN Web Docs
Attribute selectors på MDN Web Docs
Kan du bruge små kodestumper som denne her til noget, for så har jeg flere hvor de kommer fra. Smid meget gerne en kommentar herunder.
