Snygga till ditt etikettmoln
etiketterFlikr

Etikettmoln (Tag Clouds) är de där högarna med ord i blandad ordning där vissa oftast är större än andra. Orden i högen, eller molnet, representerar nyckelord som antingen har sökts på en hemsida, etiketter till inlägg eller något liknande som har med hemsidan att göra. Ju större orden är, desto viktigare eller populärare är orden.

WordPress Tag Cloud

WordPress har en funktion för att visa etiketterna som du har lagt till dina inlägg, men självklart är inte standardinställningarna någonting att ha, men med lite enkla variabler kan vi lätt göra den lite snyggare.

Funktionen heter enkelt nog:

<?php wp_tag_cloud( $args ); ?>

Och istället för $args fyller du i alla olika argument du vill ha.

Standardinställningarna är som följer:

<?php $args = array(
    'smallest'  => 8, 
    'largest'   => 22,
    'unit'      => 'pt', 
    'number'    => 45,  
    'format'    => 'flat',
    'separator' => '\n',
    'orderby'   => 'name', 
    'order'     => 'ASC',
    'exclude'   => , 
    'include'   => , 
    'link'      => 'view', 
    'taxonomy'  => 'post_tag', 
    'echo'      => true ); ?>

Dessa inställningar gör att etiketten som minst antal inlägg är taggade med har storlek 8 pt (punkter) och den med mest inlägg taggade med sig har storlek 22 pt. Maximalt visas 45 st etiketter och gör så i bokstavsordning från A-Ö med ett mellanrum (\n betyder endast radmatning i php-koden alltså ingen förändring i det som skrivs ut) mellan varje. Och slutligen skrivs det ut så fort funktionen körs igenom.

Egna inställningar

Många av dessa inställningar fungerar väldigt bra, men andra inte. Säg till exempel att du har 100 olika etiketter och du visar 45 av dessa. Din mest populära etikett är WordPress vilket är ett ord som kommer väldigt sent i alfabetet, så troligtvis kommer inte ens den etiketten att finnas med när molnet visas.

Så först och främst bör vi ändra orderby till ‘count’ . Vilket gör att de 45 populäraste etiketterna kommer att synas istället för de 45 första i bokstavsordning.

Dessa 45 etiketter kommer nu att visas efter minst populär etikett först (nummer ordning från 1 och uppåt), vilket man kanske vill, detta kommer att få den första raden att stå med microbokstäver och ju längre ner man kommer i etikettmolnen ju större blir bokstäverna. Men om du har etikettmolnet i din sidopanel kan detta ställa till problem, då du antagligen inte har så mycket plats att leka med, och ord kommer att avstavas och hoppa ner på nästa rad, vilket inte kommer att bli så snyggt. Så för att förhindra detta kan vi ändra order till antingen DESC eller RAND (från ASC). DESC skulle göra precis samma sak, fast baklänges, vilket skulle föra med sig samma problem, bara tvärt om. Så jag skulle rekommendera RAND vilket kommer att skriva ut de 45 etiketterna i slumpmässig ordning varje gång sidan laddas. Förhoppningsvis kommer inte alla populära etiketter att hamna bredvid varandra på så vis.

Som standard skrivs som sagt de 45 första etiketterna ut, men det kan du ändra genom argumentet number. Ange ett högre eller lägre tal beroende på vad du är intresserad av, eller sätt den till 0 (noll) om du vill att alla etiketter ska skrivas ut.

Om du har några speciella etiketter du inte vill visa i ditt moln, använd dig av exclude och gör en komma separerad lista med alla term_id:n till etiketterna du inte vill ska visas. Till exempel ‘exclude’ => ’7,26,53′.

Du kan hitta dina etiketters id nummer i administrationspanelen Inlägg > Inläggsetiketter, genom att klicka på en av etiketterna och sedan titta i adressfältet:

/wp-admin/edit-tags.php?action=edit&taxonomy=post_tag&tag_ID=54

Sedan version 2.8 har WordPress lagt till argumentet taxonomy vilket talar om vad som ska visas i molnet. Du kan välja på ‘post_tag’, ‘category’ eller ‘link_category’ vilka betyder vad de låter som. Standard valet är ‘post_tag’ vilket visar ett moln av etiketterna använda i inläggen (posts). Om du väljer ‘category’ får du ett moln bestående av dina kategorier (categorys) där ju fler inlägg en kategori har, ju större blir etiketten. Slutligen kan du välja ‘link_category’ som kommer att skapa ett etikettsmoln bestående av dina länkkategorierer (link category).

Sedan version 2.9 av WordPress introducerades separator vilket specificerar vad som skall vara mellan varje kategori. Genom att ange värdet ‘<br />’ kommer du t.ex. få en radmatning mellan varje etikett och genom att skriva ‘, ‘ så får du ett komma med ett mellanrum efter. Som standard har den värdet ‘\n’ vilket kommer att göra en radmatning i php-koden (så att det blir snyggt när du läser källkoden) men endast ett mellanrum i den riktiga html-koden.

Tips: För att göra koden lite kortare kan du placera argumenten direkt i funktionen med & emellan:
<?php wp_tag_cloud(‘smallest=8&largest=22&orderby=count’); ?>

Slutligen om du inte är riktigt nöjd med vad du kan göra med dessa standard inställningar kan du från version 2.8 av WordPress använda dig av echo vilken talar om ifall du vill att hela listan av etiketter ska skrivas ut eller returneras för att kunna tas om hand i en variabel. Värdena är 1 (true) ifall du vill att molnet ska skrivas ut, eller 0 (false) ifall du vill att listan endast ska returneras.

Om du väljer att ta hand om listan själv, är det att rekommendera att ändra format från ‘flat’ (vilket gör returnerar etiketterna i en lång rad med separatorn mellan sig) till ‘array’ som returnerar en array med varje etikett i varje fält. Format har också alternativet ‘list’ ifall du är intresserad av att få en ul-lista av dina etiketter.

Exempel

Med mina rekommenderade inställningar hade koden sett ut så här:

1
2
3
4
5
6
7
8
<?php if ( function_exists('wp_tag_cloud') ) : ?>
    <li>
        <h2>Populära Etiketter</h2>
        <ul>
            <?php wp_tag_cloud('orderby=count&order=RAND'); ?>
        </ul>
    </li>
<?php endif; ?>
Tänk på: Funktionen wp_tag_cloud lades till i WordPress i version 2.3 så om du vill ha din kod bakåtkompatibel glöm inte att använda villkorssatsen if ( function_exists(‘wp_tag_cloud’))

Tag Cloud Plugins

Det finns ett hav av tillägg där ute som kan hjälpa dig att hotta upp ditt etikettmoln ytterligare. Jag använder mig tex av WP Colorful Tag Cloud där jag genom ett enkelt interface kan ändra färgen på mina etiketter beroende på storleken av etiketterna.

Ett annat populärt plugin är WP-Cumulus som skapar en sfär av dina etiketter som du kan integrera med genom flash.

Om du inte finner ett plugin som passar dig, varför inte sätta echo till 0 och experimentera själv?

1
2
3
4
5
6
7
8
9
10
11
<?php if ( function_exists('wp_tag_cloud') ) : ?>
    <li>
        <h2>Populära Etiketter</h2>
        <ul>
            <?php $tags = wp_tag_cloud('orderby=count&order=RAND&format=array&echo=0');
            foreach($tags AS $tag){
                echo $tag;
            }
        </ul>
    </li>
<?php endif; ?>

Koden kommer att resultera i samma sak som tidigare, men nu är det du som har kontrollen, placera lite andra taggar emellan, använd dig av all blandad kunskap du har och hitta på någonting ”out of the box”. Om det blir bra, gör ett eget plugin av det, och skriv om det här. För mer inspiration kolla in etikettsmolnet på Nationalencyklopedin.

Inspiration


15 kommentarer till 'Snygga till ditt etikettmoln' »»

  • Ha ha!! Jag som inte har svenska som modersmål hittade en liten ”glitch” i texten!! :-)

    ”Du kan hittade etikett id:t i administrationspanelen Inlägg > Inläggsetiketter, genom att klicka på en av etiketterna och sedan titta i adress fältet:”


  • Härligt, drog in tillägget på min blogg. Valde samma färg på alla tagglänkarna och det är sorteringen som jag gillar bäst.


  • Jag kanske är blind, men i vilken fil är det jag hittar funktionen? kanske är en newbie fråga, men wtf, jag är en newbie ;-)


    • Alla är vi nybörjare någon gång. wp_tag_cloud() är en WordPress-byggd standard funktion, så den är bara att använda när och hur du vill. Så antingen sätter du in den i valfri templet mall (till exempel sidebar.php) eller så sätter du in den i en egen byggd funktion i functions.php.


  • Och jag blir alltid lika frustreade av att ständigt stötta på patrul direkt i början av nåt nytt Va F___n betydet det här:

    ”Och istället för $args fyller du i alla olika argument du vill ha.”


    • Sorry… ersätt ordet $args mot en kombination av nycklarna och värdena som beskrivs nedan den texten i formatet nyckel=värde&nyckel=värde. Ringa in detta med apostrofer (‘) eller citationstecken (”).

      Du kan alltså tex skriva så här:

      <?php wp_tag_cloud('smallest=8&largest=22&orderby=count'); ?>


  • 9. Pingback: Varför bloggar man? | Magnus Thörnblad

  • 10. Katarina skriver: |

    Hej
    Jag undrar i vilken php-fil man kan göra ändringarna för etikettmoln??
    Hälsn.Kattis


    • Du gör dem i den filen där du vill använda etikett molnen, förslagsvis sidopanelen. Så troligtvis har du en fil som heter sidebar.php där du vill göra dina ändringar.

      (märk dock att du talar om med php koden att du ska skriva ut ett etikettmoln och INTE genom widgets i adminpanelen)


  • 12. Camilla skriver: |

    Hej, jag har försökt med ovan men är helt ny & vet inte vart jag klistrar in funktionen.

    Jag har Graphene & har hittat följande under Redigera: Mall för etiketter (tag.php) & tror att det är här allt skall in men vart i den befintliga funktionen?

    Tack för hjälpen!


    • Du vill placera koden i din sidebar.php fil. Alternativt placera den i functions.php som en funktion som du kallar från en annan fil. Men det lättaste att att gå in i filen sidebar.php och sen klistra in koden någonstans på sidan. Så borde ditt ettiketts moln dyka upp i sidopanelen.


  • Tack för snabbt svar! Klistrade in allt via Utseende/Redigerare & Sidopanel men då försvann allt från min hemsida som jag valt att ha i min sidopanel! Provade att klistra in först längst ner & sedan i början. Vad gör jag för fel?!


    • Hej Camilla,
      Du kommer hitta kod som ser ut ungefär så här i sidan du precis var inne på:

      &tl;?php dynamic_sidebar(); ?>

      Lägg koden precis före den koden, så borde det fungera bättre. Eller om du hittar en ”if-sats” testa att lägga koden precis före. Testa lite här och där, så kommer du snart att förstå var och hur det fungerar.


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>