Taggmoln: den där grejen i sidofältet som många installerar och glömmer bort. Mekaniskt, "bara för att ha den." Det är ett misstag: ett väldesignat moln samlar interna navigeringsklick lika effektivt som en navigeringsmeny. Särskilt på sajter med hundratals inlägg, där kategorinavigering inte längre räcker till.

Problemet är att standardwidgeten "Taggmoln" är knappt konfigurerbar. Teckenstorlek, på sin höjd. Färger, inga. Form, en platt lista med länkar som är pinsam att visa upp. Om temat inte har skrivit stilar för den blir resultatet nedslående.

Lyckligtvis erbjuder WordPress två vägar: att manuellt anropa wp_tag_cloud() direkt i temafiler och det inbyggda "Taggmoln"-blocket i Gutenberg. Den första ger fullständig kontroll över märkspråket, den andra fungerar när du behöver något snabbt och kodfritt. Vi går igenom båda nedan med levande kodsnuttar, skärmdumpar och video.

💡 Snabb översikt:

• Infoga wp_tag_cloud() i sidebar.php eller footer.php för att få ett taggmoln var som helst
• Styla utdatan via CSS: knappar med bakgrunder, rundade hörn och hover-effekter
• Använd "Taggmoln"-blocket i Gutenberg-redigeraren (tre klick, noll kod)
• Se videohandledningen om installation direkt från WordPress adminpanel

Manuell utmatning via wp_tag_cloud()

WordPress har inkluderat funktionen wp_tag_cloud() sedan version 2.3. Den samlar in alla sajtens taggar, räknar användningsfrekvens och genererar ett moln där varje taggs teckenstorlek är proportionell mot antalet inlägg som innehåller den. Anropet infogas direkt i en temafil, där molnet ska visas.

Grundläggande kodsnutt för sidebar.php, footer.php eller en anpassad mall:

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
) );

Vad parametrarna betyder (fullständig lista i WordPress dokumentation):

smallest och largest: minsta och största teckenstorlek. Standard är 8 och 22 punkter. Om spannet ser skärande ut, smalna av det (till exempel 10 och 18).

unit: måttenhet. Standard är pt, men den accepterar vilken CSS-enhet som helst: px, em och rem. För skärmar är pixlar vanligare.

number: hur många taggar som ska visas. Noll betyder "alla." I praktiken räcker 45-50 gott; annars förvandlas molnet till en röra av hundratals olika stora länkar.

orderby: sorteringsmetod. name ger alfabetisk ordning, count visar de mest frekventa först. Att kombinera orderby => 'count' med order => 'DESC' placerar populära taggar överst.

taxonomy: taxonomin. Standard är post_tag, men du kan ersätta med category eller en anpassad taxonomi från en webbutik för att få ett moln av kategorier eller produkt taggar.

format: utdataformat. flat (länkar separerade med mellanslag), list (punktlista) eller array (en array för vidare PHP-bearbetning).

Funktionen kan säkert placeras var som helst i temat. Om du behöver en separat sidmall med molnet, skapa page-tagcloud.php, lägg till wp_tag_cloud()-anropet mellan get_header() och get_footer(), och tilldela sedan denna mall till en sida i adminpanelen.

Styla taggar via CSS

Funktionen matar ut rå HTML: taggar inuti <a>-element, omslutna av <div class="tagcloud">. Utan CSS är det en enda röra av olika stora länkar. Stilarna nedan förvandlar dem till prydliga knappar:

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 är minimal och målinriktad: inline-block håller knapparna inline, margin-bottom kompenserar för radbrytningar, och border-radius rundar hörnen. Den grå bakgrunden och dämpade texten krockar inte med någon varumärkespalett. Vid hover mörknar knappen mjukt.

Lägg till denna kod i ditt barntemas style.css eller i fältet "Ytterligare CSS" i anpassaren ("Utseende" → "Anpassa" → "Ytterligare CSS"). Det andra alternativet är säkrare: stilar försvinner inte efter nästa temauppdatering.

Tips: om molnet i sidofältet och i en anpassad mall ska se olika ut, omslut anropet i en extra <div class="custom-tagcloud"> och sätt stilar med dubbel specificitet: .custom-tagcloud .tagcloud a { ... }.

Inbyggt "Taggmoln"-block i Gutenberg

När du inte har någon lust att redigera temafiler erbjuder WordPress en inbyggd lösning. Från och med version 5.8 innehåller blockredigeraren ett "Taggmoln"-block som kan infogas i vilket inlägg eller vilken sida som helst utan en enda rad kod.

Att lägga till det är standard: i redigeraren, klicka på "+", sök efter "Taggmoln" och dra det till önskad plats. Blocket hämtar automatiskt alla sajtens taggar, sorterar dem alfabetiskt och skalar teckenstorleken proportionellt mot användningsfrekvensen. Sidofältspanelen erbjuder dessa inställningar:

• antal taggar (standard 45, max 100)
• aktivering av en inläggsräknare bredvid varje tagg
• växling mellan taggar och kategorier via taxonomi-rullgardinsmenyn

Blocket fungerar i alla moderna teman, stöder grupper och kolumner, och stylas via samma CSS-regler från första avsnittet. Detta är det enklaste sättet att få ett taggmoln på en sida: öppna redigeraren, lägg till blocket, publicera. Inga tillägg, ingen functions.php.

📺 Video: konfigurera ett taggmoln i WordPress

En kort handledning om att lägga till och konfigurera ett taggmoln direkt från WordPress adminpanel:

⁉️🤔 Vanliga frågor

Kan jag visa ett taggmoln utan att redigera PHP-filer?

Ja, på flera sätt. Det enklaste är det inbyggda "Taggmoln"-blocket i Gutenberg-redigeraren: lägg till det med tre klick via "+", utan krav på tillägg eller functions.php. Ett annat alternativ är standardwidgeten "Taggmoln" under "Utseende" → "Widgetar", som fungerar i alla teman med ett sidofält eller sidfotsområde. Båda metoderna använder samma wp_tag_cloud()-funktion under huven.

Var ska jag placera wp_tag_cloud()-anropet: i functions.php eller i en temafil?

Direkt i en temafil: sidebar.php, footer.php, page-tagcloud.php, eller vilken annan fil som helst som ansvarar för märkspråk. Funktionen wp_tag_cloud() anropas inte i functions.php, vilket är där du definierar logik; utmatning sker i mallar. Om du behöver anpassa funktionens beteende, använd wp_tag_cloud-filtret i functions.php.

Vad är skillnaden mellan taggar och kategorier i ett moln?

Kategorier är en hierarkisk taxonomi, taggar är platta. Visuellt försvinner skillnaden, men tekniskt skiljer sig anropet: för taggar använd taxonomy => 'post_tag', för kategorier använd taxonomy => 'category'. Funktionen förblir densamma: wp_tag_cloud(), skicka bara med rätt nyckel.

Hur begränsar jag antalet visade taggar?

Med parametern number i wp_tag_cloud()-arrayen. Ett värde på 0 visar alla taggar; för de flesta sajter är 30-50 rimligt (molnet förblir läsbart och förvandlas inte till en ändlös ström av länkar).

Kan jag lägga till en inläggsräknare bredvid varje tagg?

Ja, parametern show_count => 1 (tillgänglig sedan WordPress 4.8) visar inläggsantalet inom parentes efter taggnamnet. Till exempel: "wordpress (42)". I Gutenberg-blocket aktiveras detta alternativ via en växlingsknapp i sidofältspanelen.

Vad gör jag om standardwidgeten är för tråkig?

Du har två alternativ för ökad kontroll. För det första, anropa wp_tag_cloud() manuellt med anpassade parametrar och din egen CSS-styling, som i avsnitt 1. För det andra, använd Gutenberg-blocket med samma CSS-regler om du inte vill röra temafiler. Båda tillvägagångssätten ger fullständig frihet: färger, mellanrum, rundade hörn, hover-effekter (allt ligger i dina händer).

Manuell metod eller block: vilket ska du välja för din uppgift?

Om din sajt tar fart och antalet taggar har överskridit tre dussin, lönar sig ett anpassat moln. Det håller besökarna engagerade: någon klickar på en tagg, hamnar på en kurerad samling inlägg om det ämnet och läser en eller två artiklar till. Sidvisningsdjupet växer utan extra kostnader.

Tillvägagångssättet är enkelt. Om du behöver ett moln direkt utan att krångla med kod, öppna redigeraren, infoga "Taggmoln"-blocket och publicera. Tre klick, och resultatet är inte beroende av temat. När du vill finslipa varje detalj och få full kontroll över märkspråket, kopiera PHP-kodsnutten från första avsnittet, styla den via CSS, så blir molnet en del av designen snarare än en standardplatshållare. Båda tillvägagångssätten fungerar i alla moderna teman och står inte i konflikt med varandra.

Om det här inlägget hjälpte dig att reda ut saker, spara det i dina bokmärken. Och i kommentarerna, berätta hur du visar taggmolnet på din sajt: widget, block eller manuellt anrop?