Stikkordskyer: den greia i sidepanelet mange installerer og glemmer. Mekanisk, «bare for å ha den». Det er en feil: en godt utformet sky samler interne navigasjonsklikk like effektivt som en navigasjonsmeny. Særlig på nettsteder med hundrevis av innlegg, der kategorinavigasjon ikke lenger strekker til.

Problemet er at standardwidgeten «Stikkordsky» er minimalt konfigurerbar. Skriftstørrelse, i beste fall. Farger, ingen. Form, en flat liste med lenker som er flau å vise frem. Hvis temaet ikke har skrevet stiler for den, blir resultatet nedslående.

Heldigvis tilbyr WordPress to veier: manuelt kall av wp_tag_cloud() direkte i temafiler og den innebygde «Stikkordsky»-blokken i Gutenberg. Den første gir full kontroll over markup, den andre fungerer når du trenger noe raskt og kodefritt. Vi dekker begge nedenfor med live kodeutdrag, skjermbilder og video.

💡 Rask oversikt:

• Sett inn wp_tag_cloud() i sidebar.php eller footer.php for å få en stikkordsky hvor som helst
• Style utdataene via CSS: knapper med bakgrunn, avrundede hjørner og hover-effekter
• Bruk «Stikkordsky»-blokken i Gutenberg-redigereren (tre klikk, null kode)
• Se videoopplæringen om oppsett rett fra WordPress-administrasjonspanelet

Manuell utdata via wp_tag_cloud()

WordPress har inkludert funksjonen wp_tag_cloud() siden versjon 2.3. Den samler alle nettstedets stikkord, teller bruksfrekvens og genererer en sky der hvert stikkords skriftstørrelse er proporsjonal med antall innlegg som inneholder det. Kallet settes inn direkte i en temafil, der skyen skal vises.

Grunnleggende kodeutdrag for sidebar.php, footer.php eller en egendefinert mal:

1
<?php
2
wp_tag_cloud( array(
3
    'smallest' => 8,
4
    'largest'  => 22,
5
    'unit'     => 'pt',
6
    'number'   => 45,
7
    'orderby'  => 'name',
8
    'order'    => 'ASC',
9
    'taxonomy' => 'post_tag',
10
    'format'   => 'flat',
11
) );

Hva parameterne betyr (fullstendig liste i WordPress-dokumentasjonen):

smallest og largest: minimum og maksimum skriftstørrelse. Standard er 8 og 22 punkter. Hvis spennet ser skjærende ut, snevr det inn (for eksempel 10 og 18).

unit: måleenhet. Standard er pt, men den godtar enhver CSS-enhet: px, em og rem. For skjermer er piksler mer vanlig.

number: hvor mange stikkord som skal vises. Null betyr «alle». I praksis er 45-50 rikelig; ellers blir skyen et kaos av hundrevis av lenker i ulik størrelse.

orderby: sorteringsmetode. name gir alfabetisk rekkefølge, count viser de mest brukte først. Å kombinere orderby => 'count' med order => 'DESC' plasserer populære stikkord øverst.

taxonomy: taksonomien. Standard er post_tag, men du kan erstatte med category eller en egendefinert taksonomi fra en nettbutikk for å få en sky av kategorier eller produktstikkord.

format: utdataformat. flat (lenker adskilt med mellomrom), list (punktliste) eller array (en matrise for videre PHP-behandling).

Funksjonen kan trygt plasseres hvor som helst i temaet. Hvis du trenger en egen sidemal med skyen, opprett page-tagcloud.php, legg til wp_tag_cloud()-kallet mellom get_header() og get_footer(), og tilordne deretter denne malen til en side i administrasjonspanelet.

Styling av stikkord via CSS

Funksjonen sender ut rå HTML: stikkord inni <a>-elementer, pakket inn i <div class="tagcloud">. Uten CSS er det en røre av lenker i ulik størrelse. Stilene nedenfor gjør dem om til ryddige knapper:

1
.tagcloud a {
2
    display: inline-block;
3
    padding: 4px 10px;
4
    margin-right: 7px;
5
    margin-bottom: 7px;
6
    background: #f0f0f0;
7
    color: #555;
8
    font-size: 11px;
9
    font-weight: bold;
10
    text-transform: lowercase;
11
    border-radius: 5px;
12
    border: 1px solid #ccc;
13
    text-decoration: none;
14
}
15
.tagcloud a:hover {
16
    background: #e0e0e0;
17
    color: #000;
18
    text-decoration: none;
19
}

CSS-en er minimal og målrettet: inline-block holder knappene på linje, margin-bottom kompenserer for linjeskift, og border-radius runder hjørnene. Den grå bakgrunnen og dempede teksten krasjer ikke med noen merkevarepalett. Ved hover mørkner knappen mykt.

Legg denne koden til barne-temaets style.css eller i feltet «Tilleggs-CSS» i tilpasseren («Utseende» → «Tilpass» → «Tilleggs-CSS»). Det andre alternativet er tryggere: stiler forsvinner ikke etter neste temaoppdatering.

Tips: hvis skyen i sidepanelet og i en egendefinert mal skal se forskjellig ut, pakk kallet inn i en ekstra <div class="custom-tagcloud"> og sett stiler med dobbel spesifisitet: .custom-tagcloud .tagcloud a { ... }.

Innebygd «Stikkordsky»-blokk i Gutenberg

Når du ikke har lyst til å redigere temafiler, tilbyr WordPress en innebygd løsning. Fra og med versjon 5.8 inkluderer blokkredigereren en «Stikkordsky»-blokk som kan settes inn i ethvert innlegg eller side uten en eneste linje kode.

Å legge den til er standard: i redigereren klikker du «+», finner «Stikkordsky» og drar den til ønsket plassering. Blokken plukker automatisk opp alle nettstedets stikkord, sorterer dem alfabetisk og skalerer skriftstørrelsen proporsjonalt med bruksfrekvens. Sidepanelet tilbyr disse innstillingene:

• antall stikkord (standard 45, maksimum 100)
• aktivering av en innleggsteller ved siden av hvert stikkord
• bytting mellom stikkord og kategorier via taksonomi-nedtrekksmenyen

Blokken fungerer i ethvert moderne tema, støtter grupper og kolonner, og styles gjennom de samme CSS-reglene fra første seksjon. Dette er den enkleste måten å få en stikkordsky på en side: åpne redigereren, legg til blokken, publiser. Ingen utvidelser, ingen functions.php.

📺 Video: konfigurering av en stikkordsky i WordPress

En kort opplæring i å legge til og konfigurere en stikkordsky direkte fra WordPress-administrasjonspanelet:

⁉️🤔 Ofte stilte spørsmål

Kan jeg vise en stikkordsky uten å redigere PHP-filer?

Ja, på flere måter. Den enkleste er den innebygde «Stikkordsky»-blokken i Gutenberg-redigereren: legg den til med tre klikk via «+», uten behov for utvidelser eller functions.php. Et annet alternativ er standardwidgeten «Stikkordsky» under «Utseende» → «Widgeter», som fungerer i ethvert tema med et sidepanel- eller bunntekstområde. Begge metodene bruker den samme wp_tag_cloud()-funksjonen under panseret.

Hvor bør jeg plassere wp_tag_cloud()-kallet: i functions.php eller i en malfil?

Direkte i en malfil: sidebar.php, footer.php, page-tagcloud.php eller en hvilken som helst annen fil som er ansvarlig for markup. Funksjonen wp_tag_cloud() kalles ikke i functions.php, som er der du definerer logikk; utdata skjer i maler. Hvis du trenger å tilpasse funksjonens oppførsel, bruk wp_tag_cloud-filteret i functions.php.

Hva er forskjellen mellom stikkord og kategorier i en sky?

Kategorier er en hierarkisk taksonomi, stikkord er flat. Visuelt forsvinner forskjellen, men teknisk er kallet forskjellig: for stikkord bruk taxonomy => 'post_tag', for kategorier bruk taxonomy => 'category'. Funksjonen forblir den samme: wp_tag_cloud(), bare send inn riktig nøkkel.

Hvordan begrenser jeg antall viste stikkord?

Med parameteren number i wp_tag_cloud()-matrisen. En verdi på 0 viser alle stikkord; for de fleste nettsteder er 30-50 fornuftig (skyen forblir lesbar og blir ikke en endeløs strøm av lenker).

Kan jeg legge til en innleggsteller ved siden av hvert stikkord?

Ja, parameteren show_count => 1 (tilgjengelig siden WordPress 4.8) viser antall innlegg i parentes etter stikkordnavnet. For eksempel: «wordpress (42)». I Gutenberg-blokken aktiveres dette alternativet via en bryter i sidepanelet.

Hva hvis standardwidgeten er for kjedelig?

Du har to alternativer for å øke kontrollen. For det første, kall wp_tag_cloud() manuelt med egendefinerte parametere og din egen CSS-styling, som i seksjon 1. For det andre, bruk Gutenberg-blokken med de samme CSS-reglene hvis du ikke vil røre temafiler. Begge tilnærmingene gir full frihet: farger, mellomrom, avrundede hjørner, hover-effekter (alt er i dine hender).

Manuell metode eller blokk: hva skal du velge for din oppgave?

Hvis nettstedet ditt får fart og antall stikkord har passert tre dusin, lønner en tilpasset sky seg. Den holder besøkende engasjert: noen klikker et stikkord, havner på en kuratert samling innlegg om det emnet, og leser én eller to artikler til. Sidedybden vokser uten ekstra kostnader.

Tilnærmingen er enkel. Hvis du trenger en sky akkurat nå uten å styre med kode, åpne redigereren, sett inn «Stikkordsky»-blokken og publiser. Tre klikk, og resultatet avhenger ikke av temaet. Når du vil finpusse hver detalj og få full kontroll over markup, kopier PHP-utdraget fra første seksjon, style det via CSS, og skyen blir en del av designet i stedet for en standard plassholder. Begge tilnærmingene fungerer i ethvert moderne tema og kommer ikke i konflikt med hverandre.

Hvis dette innlegget hjalp deg med å finne ut av ting, lagre det i bokmerkene dine. Og i kommentarfeltet, fortell oss hvordan du viser stikkordskyen på nettstedet ditt: widget, blokk eller manuelt kall?