Introduktion
Kategori-ikoner på WordPress-forsiden
Sådan:

Kategori-ikoner på WordPress-forsiden

Hvis du har et website, medie eller blog, hvor du udgiver forskellige typer indhold, kan det være rart med forskellige visuelle markører for dine brugere. Her kan du læse, hvordan du gør i WordPress.

Abonnér på nyhedsbrevet

Så får du en e-mail hver uge med den ugentlige opsamling fra Digital Ugerevy og nye artikler her fra Backlog. Helt gratis.

Det kan du bruge det til

Det kan for eksempel være, du både udgiver tekst, billeder, video og måske også podcasts, du gerne vil markere visuelt forskelligt på dit website. Det kan være, du har forskellige typer artikler, såsom nyheder, analyser, klummeindlæg, der skal adskilles.

Det kan være en fin ting at gøre, så dine brugere på din forside kan se, hvilken type indhold, der er tale om.

Her er et eksempel, jeg har lavet:

Du kan markere på forskellige måder, men her vil jeg vise, hvordan du kan gøre det med ikoner - specifikt emojis, som efterhånden er understøttet af alle browsere.

Du kan selvfølgelig skifte det ud med noget andet, såsom billeder, du selv har lavet. Jeg bruger emojis i mit eksempel, fordi det er tegn, der bliver renderet af browseren og derfor har en passende størrelse i forbindelse med fx overskrifter, som vi skal arbejde med her.

Vi bruger CSS

Metoden, jeg bruger, er simpel CSS - derfor er det en god idé, hvis du kan det til husbehov. Kort fortalt er CSS (der står for Cascading Style Sheets) et sprog, man bruger til at give layout, størrelser og farver til indholdet på en hjemmeside. Jeg gør det via WordPress' egen mulighed for at indsætte CSS, så du ikke skal redigere i filerne i dit tema.

I den forbindelse udnytter vi, at mange WordPress-temaer inkluderer de enkelte artiklers kategorisering i CSS-klasserne. Det er smart, for det betyder, at artiklerne har forskellige paths, som vi kan bruge til at fange dem med CSS.

(Bemærk: Der er også andre måder at gøre det på, men de vil formentlig kræve, at du enten skal redigere i temafilerne (kæmpe no-no) eller i gang med at bygge et "child theme" i WordPress. Her bruger vi CSS, for det er den letteste – og mindst indgribende - måde at gøre det på.

Få fat i CSS-stien

Right, vi starter med først at finde den rigtige CSS-sti, så vi kan detektere. Det er lettest at gøre via nogle udviklerværktøjer - personligt er jeg blevet ret glad for de værktøjer, Firefox-browseren tilbyder.

Højreklik på det element, det drejer sig om (i dette tilfælde en overskrift) og vælg "Inspect element" (hedder noget andet, hvis du har Firefox på et andet sprog):

Nu bliver det smart. For Firefox gør det nemligt muligt at kopiere hele CSS-stien til det pågældende element:

Nu får du sikkert en ordentlig klamamse på dit klippebord, som du skal sætte ind i en ren teksteditor (altså uden formattering af teksten - det er vigtigt!). I mit tilfælde får jeg dette:

html body.home.blog.ast-desktop.ast-plain-container.ast-no-sidebar.astra-2.4.3.ast-header-custom-item-inside.ast-mobile-inherit-site-logo.ast-inherit-site-logo-transparent.ast-mouse-clicked div#page.hfeed.site div#content.site-content div.ast-container div#primary.content-area.primary main#main.site-main div.ast-row article#post-2650.post-2650.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-musik.ast-col-sm-12.ast-article-post div.ast-post-format-.blog-layout-1 div.post-content.ast-col-md-12 header.entry-header h2.entry-title a

Det er den (meget lange) definitive CSS-sti til netop dette element; et link i en h2-overskrift med CSS-klassen "entry-title". Derudover er der en masse andre informationer med, såsom udgivelsesstatus, indholdstype, navn på tema, konfigurationer af visningen etc. Der er meget, vi ikke skal bruge.

Det kan vi heldigvis korte lidt ned, så vi har noget, vi kan arbejde med:

html body.home article.category-musik h2.entry-title

Så bruger vi CSS til at "gribe" h2-overskrifter med klassen "entry-title", der bor i en article med klassen "category-musik" (den information skal vi bruge) på forsiden af vores website (body har CSS-klassen "home").

Kort fortalt: Vi har nu fat i overskrifter på artikler med kategorien "Musik", som de bliver vist på forsiden af vores WordPress-website.

Find et ikon

Nu skal vi så have markeringerne sat ind. I CSS kan man gøre det ved at bruge selektorerne ::after og ::before. Igen, du kan indsætte forskellige ting, men lad os bruge emojis i dette eksempel. Her bruger vi ::before.

Jeg er glad for Emojipedia, så lad os tage noderne derfra og kopiere dem:



Og det indsætter via så i CSS:

html body.home article.category-musik h2.entry-title a::before {
	content: "🎵 "!important;
}

(Bemærk: Noden er sort ligesom baggrunden i kodeviseren herover, så den kan være svær at se – men den er er altså.)

Sæt det ind

Nu skal du sætte det ind i WordPress, så derfor går du til "Redigér CSS":

I højre side af vinduet får du en visuel bekræftelse på, at det virker:



Tryk 'Udgiv' øverst.

Nu kan du, hvis du har lyst, tilpasse ikonerne lidt. Som du kan se, har jeg gjort dem mindre tydelige, så de træder lidt i baggrunden. Det har jeg gjort via CSS' opacity (gennemsigtighed), som du også kan se på billedet herover.

html body.home article h2.entry-title a::before {
	opacity: 0.6;
    }

Bemærk at jeg her udelader sektionsklassen på article, fordi jeg i så fald ville skulle gøre det på alle sektioner på mit website.

Nå, så langt så godt. Hvis du gerne vil prøve med andre markeringer, kan du se nogle muligheder hos CSS-Tricks.

Indsæt et billede

Hvis du vil have et billede ind, skal du indsætte det således:

content: url(url-adresse-til-billede.jpg);

Så langt så godt. Nu har du fundet ud af, hvordan du kan detektere sektionen på dine artikler på WordPress' forside. Det kræver selvfølgelig, at du bruger et WordPress-tema, der inkluderer kategorien (eller tags, hvis du hellere vil bruge dem) i HTML'en.

Det er muligt, det også virker i andre CMS'er. Jeg har kigget i Ghost (som denne artikel er udgivet med), og der var det ikke muligt med det tema, jeg bruger – netop fordi sektionen ikke er inkluderet i koden. Buhu.

Jeg kan dog se, at den andre steder trækket tagget fra Ghost ud, så hvis jeg virkelig ville, kunne jeg selv redigere tema-filen, hvilket der angiveligt er et let mere løst forhold til i Ghost.

Anyways, jeg håber, du fandt, hvad du søgte. Pøjpøj med markeringerne.

Lars K Jensen
Forfatter

Lars K Jensen

Jeg rådgiver, taler og skriver om digitale medier og produkter og har en baggrund i journalistikken.

Vis kommentarer
Næste artiklere

Ordforklaringer i artikler på DR.dk

Forrige artikel

Velkommen til backloggen

Succes! Dit medlemskab er nu aktivt.