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.
Venligst intet mystisk symbol i enden af billedfiler
Mindre opdatering til koden her i 2023: Hvis billeder linker til eksterne websites, er vi ikke ikke interesseret i et symbol efter billedet. Derfor den lille tilføjelse af :not(.wp-block-image) til kodestumpen længere nede. I eksemplet her, linker Mastodon logo’et til min Mastodon profil.
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
/*** WP: Symbol or label after external links ***/
/* Apply suffix symbol to content on screen, no need on print */
@media only screen {
body {
--link-suffix-content: "\25E5";
}
}
/* If link is to a pdf file, add the PDF-label */
a[href$=".pdf"] {
--link-suffix-content: "\00A0PDF";
--link-suffix-weight: 600;
}
/* If accessible class is added to pdf link parent, use 'Tilgængelig PDF' label */
.is-accessible a[href$=".pdf"] {
--link-suffix-content: "\00A0Tilgængelig\00A0PDF";
}
/* Target content links (exluding image links), explicit external links and PDF's */
a[rel*="external"]:after,
.entry-content :not(.wp-block-image) > a[href^="https"]:not([href*="oldrup.dk"]):after,
.entry-content :is(p, .wp-element-caption, .sw-file-list) a[href$=".pdf"]:after,
.wp-block-file a[href$=".pdf"]:first-of-type:after {
content: var(--link-suffix-content, "");
display: inline-block;
padding-bottom: 0.6em;
font: normal var(--link-suffix-weight, normal) 0.6em sans-serif;
vertical-align: text-top;
text-decoration: none;
}
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
- CSS entities på W3schools
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.
