Så här stylar du enskilda kategorier på olika sätt i WordPress

Har du någonsin velat få dina WordPress-kategorier att sticka ut? Du kanske vill att avsnittet ”Nyheter” ska se annorlunda ut än kategorierna ”Handledning” eller ”Recensioner”.

I ärlighetens namn är det inte en viktig fråga för de flesta bloggar att utforma kategorier på olika sätt. Vi gör det inte ens själva på WPBeginner.

Men vi förstår att varje blogg har unika behov och hur viktigt det är att engagera dina läsare. Och för vissa webbplatser kan olika stilar och funktioner för varje kategorisida verkligen hjälpa läsarna att hitta innehållet lättare.

Den goda nyheten är att det faktiskt är ganska enkelt att styla kategorisidor individuellt. Vi har tagit fram flera kodfria sätt att göra det: med den fullständiga webbplatsredigeraren, en sidbyggare och en visuell CSS-redigerare.

När du ska utforma dina kategorisidor i WordPress på olika sätt

Även om det inte är nödvändigt för alla WordPress-webbplatser finns det vissa situationer där anpassade kategorier verkligen kan förbättra dina läsares upplevelse.

Om dina WordPress-inläggsämnen varierar mycket kanske du vill utforma enskilda kategorier på ett unikt sätt.

Om din WordPress-blogg till exempel innehåller både nyheter och handledning kan du utforma dessa kategorier på olika sätt. På så sätt vet läsarna direkt vilken typ av innehåll de har framför sig.

Eller ta en webbplats för recensioner. Du kan utforma en enda kategori för produktrecensioner på ett annat sätt än din jämförelsekategori. Detta gör det lättare för besökare att hitta vad de vill ha på din WordPress-webbplats.

Vissa webbplatser kanske också vill utforma vissa kategorier så att de sticker ut mer för att betona deras betydelse. På en nyhetssajt kanske du vill ge din kategori ”Breaking News” en mer uppseendeväckande stil jämfört med dina vanliga nyhetskategorier i WordPress.

Kom ihåg att det främsta skälet till att utforma kategorier i WordPress på olika sätt är att göra din webbplats enklare att använda. Om du tror att det skulle hjälpa dina läsare att hitta vad de vill snabbare, kan det vara en bra idé.

Med detta i åtanke, låt oss ta en titt på 3 sätt att utforma enskilda kategorier i WordPress. Du kan använda snabblänkarna nedan för att hoppa till den metod du föredrar:

Metod 1: Använd en sidbyggare för att utforma kategorisidor (anpassade teman)

Om du är villig att byta tema eller skapa ett eget WordPress-tema från grunden kan en sidbyggare vara ett utmärkt sätt att utforma kategorier i WordPress.

Denna metod är idealisk för dem som vill ha mer kontroll över webbplatsens design och är bekväma med att använda verktyg från tredje part.

Efter att ha testat olika alternativ har vi kommit fram till att Thrive Architect är en av de bästa sidbyggarna för styling av enskilda kategorier.

Det erbjuder ett användarvänligt dra-och-släpp-gränssnitt, så att du kan skapa anpassade kategorier och utforma dem unikt utan kodningskunskap. Du kan lära dig mer om pluginet i vår Thrive Architect-recension.

Det är dock viktigt att notera att detta tillvägagångssätt inte är lämpligt för alla.

Om du är nöjd med ditt nuvarande WordPress-tema och inte vill byta, kanske du vill överväga metod 2 med den fullständiga webbplatsredigeraren eller metod 3 med den visuella CSS-redigeraren (som vi kommer att ta upp senare).

Men om du vill ändra ditt tema rekommenderar vi att du läser vår guide om hur du ändrar WordPress-teman på rätt sätt.

En annan sak att notera är att Thrive Architect inte har någon gratisversion. Men du kan använda vår Thrive Themes kupongkod för att få upp till 50% rabatt på ditt första köp.

Steg 1: Installera Thrive Architect

Låt oss börja med att konfigurera Thrive Architect. När du har köpt en plan kan du gå och logga in på Thrive Themes webbplats.

Där hittar du plugin-programmet Thrive Product Manager. Ladda bara ner filen och installera den i din WordPress-admin. Om du inte är säker på hur du gör detta, kolla in vår guide om installation av WordPress-plugins för nybörjare.

När du har aktiverat plugin-programmet öppnar du menyposten Product Manager i WordPress instrumentpanel.

Klicka på ”Logga in på mitt konto” för att ansluta din WordPress-webbplats till ditt Thrive Themes-konto.

Nu bör du se en lista över Thrive Themes-produkter som du kan använda.

Hitta ”Thrive Architect” och kryssa i rutan bredvid ”Installera produkt”.

Bläddra ner tills du ser ”Thrive Theme Builder” och välj alternativet ”Install Theme”.

Tryck sedan på ”Installera utvalda produkter”. Vi måste göra detta eftersom Thrive Architect fungerar tillsammans med Thrive Theme Builder.

På nästa sida visas Thrive Product Manager som konfigurerar Thrive Architect och Thrive Theme Builder.

När det är klart klickar du på knappen ”Gå till Theme Builder Dashboard”.

Nu är det dags att välja en startdesign för din webbplats från Thrives temakollektion.

Om du är osäker på vilket du ska välja kan du använda knappen ”Förhandsgranska” för att se hur varje tema ser ut. När du har hittat ett som du gillar klickar du på ”Välj”.

Därefter startar du guiden Theme Builder Wizard. Den här guiden hjälper dig att lägga till din logotyp, välja dina varumärkesfärger och konfigurera olika delar av ditt tema.

Se till att du är klar med installationsguiden innan du går vidare till nästa steg.

Steg 2: Skapa en mall för ett kategoriarkiv

När temat har konfigurerats går vi över till fliken ”Mallar”. Det är här du ser de standardmallar som används av ditt tema för att designa dina webbsidor. I det här fallet kallas den mall som används för kategoriarkiv för ”Alla arkiv”.

Eftersom vi vill styla enskilda WordPress-kategorier måste vi först skapa en ny arkivmall för kategorin. För att göra detta klickar du på ”+ Lägg till ny”.

Ett nytt popup-fönster kommer att visas. Ange först namnet på din nya kategorimall. Du kan använda något enkelt och inkludera kategorinamnet där.

Välj sedan ”List”, eftersom vi vill skapa en sida som listar alla inlägg i en viss kategori.

I List Type väljer du ”Archives” och väljer ”Categories” i ”Archive Type”.

I fältet Defined for väljer du namnet på den kategori som du skapar mallen för. För exemplets skull valde vi ”Blogg”.

I slutet kan du antingen välja ”Börja från början” eller ”Välj mall”.

Vi kommer att gå med det andra alternativet eftersom många av de färdiga Thrive Themes-mallarna redan ser väl utformade ut.

I nästa popup-fönster kan du välja en av de tillgängliga mallarna. För illustrationen väljer vi ”Grid Layout – Featured Post”.

När du har gjort ditt val klickar du på knappen ”Skapa mall”.

Du bör nu se att din nya mall har lagts till i listan över mallar.

Håll muspekaren över den och klicka på ”Redigera” för att börja anpassa den.

Steg 3: Anpassa din kategorimallsida

Thrive Architect erbjuder många sätt att anpassa din sida.

Den fungerar på samma sätt som blockredigeraren genom att du kan dra och släppa element på din sida, välja ett att anpassa och sedan är du igång. Skillnaden är att det finns mycket fler anpassningsalternativ att leka med.

Låt oss ta en titt på ett exempel. I vår kategoriarkivmall finns det ett stort utvalt inlägg högst upp, med resten av inläggen i samma kategori under det. Som standard är det utvalda inlägget det senaste inlägget som publicerats i den kategorin.

Om du vill ändra layouten för detta element klickar du på elementet ”Featured List 01”. Klicka sedan på knappen med den externa ikonen längst upp i den vänstra sidofältet.

En popup-ruta visas där du ombeds välja en annan design för det utvalda inlägget.

Det finns flera att välja mellan, och du kan alltid ändra den igen om du inte är nöjd med ditt nuvarande val. Klicka bara på önskad layout så kommer Thrive Architect automatiskt att implementera den i din sidmall.

Du kan också göra samma sak med listan över inlägg nedan.

Välj bara elementet ”Blogglista”. Därefter klickar du på den externa ikonen längst upp i vänster sidofält, så hittar du andra mallar för att visa din lista över inlägg som tidigare.

Om du vill ändra kategorilistans design ytterligare, bläddrar du nedåt i sidofältet.

Där hittar du inställningar för att ändra visningstyp (som att göra den till en karusell), inaktivera det utvalda inlägget, byta pagineringstyp (som från numerisk till ”Ladda mer”), öka/minska antalet inlägg som visas och mycket mer.

Du kan också lägga till andra element, till exempel en stor rubrik som talar om för besökarna vilken kategorisida de befinner sig på och en beskrivning tillsammans med den.

För att göra detta kan du klicka på ”+”-knappen till höger i byggaren. Välj sedan elementet ”Text” och släpp det där det passar bäst på sidan.

Klicka på ikonen för dynamisk text längst till höger i textverktygsfältet på textelementet. När du har gjort det väljer du ”Arkiv” i fältet Dynamisk text och sedan ”Arkivnamn” i fältet under det.

Klicka nu på ”Infoga”. Thrive Architect kommer då att lägga till ditt kategorinamn. Eftersom den här funktionen lägger till dynamiskt innehåll kommer kategorinamnet att justeras automatiskt om du någonsin ändrar det i framtiden.

Härifrån kan du ändra textens stil, format, justering och mycket mer.

För att lägga till en beskrivning av kategorin klickar du bara på ”+”-knappen igen.

Därefter väljer du elementet ”Taxonomy Term Description”.

Om du har lagt till en beskrivning till din kategori i WordPress-admin ” Inlägg ” Kategorier, bör beskrivningen automatiskt visas här.

Annars kan du gå tillbaka till den sidan och uppdatera den senare. Mer information hittar du i vår handledning om hur du visar kategoribeskrivningar i WordPress.

En cool sak med att utforma dina kategorier på olika sätt i WordPress är att du kan lägga till olika element som är specifikt anpassade till varje kategori.

Om du till exempel har en lead magnet eller ett opt-in-formulär som bara är lämpligt för ett visst ämne är det ett bra sätt att rikta in sig på intresserade läsare genom att lägga till det på den här kategorisidan.

Tack och lov har Thrive Architect block som är särskilt avsedda för detta ändamål.

Du kan till exempel klicka på ”+”-knappen och lägga till ”Call to Action”-elementet var som helst på sidan. Det är en utmärkt taktik för att bryta upp en lång lista med inlägg på en kategorisida.

Härifrån kan du välja en mall för uppmaning till handling.

Om du inte gillar någon av de befintliga designerna kan du välja den du tycker bäst om och ändra stilen senare.

Nu kan du ändra texten i uppmaningselementen.

Om du vill lägga till mål-URL:en för knappen för uppmaning till handling klickar du bara på själva knappen. Infoga sedan URL:en och välj om den ska öppnas i en ny flik och om den ska vara nofollow.

Efter det är du välkommen att ändra uppmaningselementet ytterligare genom att ändra dess typografi, lägga till en bakgrundsfärg, infoga animationer och så vidare.

När du är nöjd med hur kategorisidan ser ut klickar du på ”Spara arbete”.

När kategorisidan är klar kan du nu förhandsgranska din webbplats på mobil, dator eller surfplatta för att se till att allt ser bra ut .

Sedan kan du antingen upprepa samma steg som tidigare för att skapa enskilda kategorisidor med sina egna stilar. Eller så kan du bara utforma dina huvudkategorier och låta resten använda standardmallen för kategoriarkiv från Thrive Themes.

Så här ser vår ut på vår demosajt:

Metod 2: Använd den fullständiga webbplatsredigeraren för att utforma kategorisidor (blockteman)

Den här andra metoden är för användare av blockteman. Den fullständiga webbplatsredigeraren ger ett enkelt sätt att skapa en anpassad WordPress-mall för kategoriarkivsidor och utforma enskilda kategorier på olika sätt.

Det som är bra med den här metoden är att den inte behöver något plugin. Med detta sagt måste du se till att du är nöjd med de anpassningsalternativ som tillhandahålls av ditt WordPress-tema och den fullständiga webbplatsredigeraren eftersom det är allt du kommer att arbeta med.

Låt oss först öppna hela webbplatsredigeraren genom att gå till Utseende ” Redaktör i din WordPress-admin.

Du kommer nu att se de viktigaste inställningarna för att anpassa ditt blocktema.

För att skapa en anpassad kategorimall klickar du på ”Mallar”.

Nu kommer du att se flera standardmallar som ditt tema erbjuder. Detta varierar beroende på WordPress-tema, men vanligtvis kommer ett tema att innehålla en mall som används för alla dina kategoriarkivsidor. Temautvecklaren skulle ange vad det är i beskrivningen.

I vårt fall heter standardmallen för arkivsidor för kategorier ”Alla arkiv”. Förutom kategorier används den här mallen också för andra typer av arkiv som taggar, anpassade taxonomier, anpassade inläggstyper och så vidare.

Om du vill skapa en ny mall för dina arkivsidor för kategorier klickar du på ”Lägg till ny mall” i det övre högra hörnet.

Nu visas ett popup-fönster där du kan välja vilken typ av mall du vill skapa.

Här väljer du bara ”Kategoriarkiv”.

I det här skedet kan du välja om du vill skapa en ny anpassad arkivmall för alla kategorier eller bara för en viss kategori.

Eftersom vi försöker utforma enskilda kategorier på olika sätt väljer vi ”Kategori för ett specifikt objekt”.

Allt du behöver göra nu är att välja den kategori du vill skapa en mall för.

I det här fallet kommer vi att välja kategorin ”Blogging”.

Du kommer nu in i den fullständiga webbplatsredigeraren. En popup-fönster visas där du ombeds välja ett blockmönster som ska användas för kategorins arkivsida.

Du kan antingen välja ett mönster eller hoppa över det här steget om du vill börja från början.

För exemplets skull börjar vi från början och ger dig exempel på hur du på olika sätt kan utforma din kategorisida i WordPress.

Om du nu inte vill börja helt från början och hitta andra mönster att använda, kan du göra så här.

Du kan klicka på det svarta ”+”-tecknet i det övre vänstra hörnet för att lägga till ett block. Gå sedan till fliken ”Patterns” och scrolla ner till alternativet ”Posts”. Du bör nu se några mönster för att visa flera WordPress-inlägg.

Om du är missnöjd med standardalternativen kan du bara skapa din egen design. Processen är enkel med den fullständiga webbplatsredigeraren, eftersom du bara drar och släpper block som vanligt i blockredigeraren.

Med det sagt rekommenderar vi att du använder Group-blocket först så att du kan hantera delar av mallen som ett block. Gå vidare och klicka på ”+” -knappen var som helst på sidan och välj ”Grupp”.

Nu ska du välja en layout för gruppblocket.

Det finns fyra att välja mellan och du kan välja den som passar bäst för din WordPress-webbplats.

Vi föreslår att du först lägger till blocket Arkivtitel i gruppblocket. Detta kommer automatiskt att visa titeln på din kategori.

Så om du ändrar kategorinamnet i framtiden kommer titeln också att justeras automatiskt. Du hittar den genom att klicka på ”+”-knappen var som helst på sidan och välja ”Arkivtitel”.

Som standard kommer detta block att visa titeln i formatet ”Archive Type: Arkivtitel”-format.

Men du kan inaktivera arkivtypen i titeln genom att gå till sidofältet för blockinställningar och avaktivera knappen ”Visa arkivtyp i titeln”.

En annan sak du bör lägga till är ett block som visar alla inlägg i kategorin.

För att göra detta klickar du på ”+”-knappen och väljer ”Posts List”.

Nu kan du välja om du vill använda en färdig design eller börja på noll.

För att illustrera detta använder vi alternativet ”Starta tomt”.

I det här skedet kan du välja en layout för att visa inläggen.

Det finns 4 alternativ: Titel & datum; Titel & utdrag; Titel, datum & utdrag; och Imagely, datum & titel.

När du har valt en layout bör du nu se en lista över alla dina inlägg.

Du bör nu filtrera inläggen baserat på kategori. För att göra detta växlar du till fliken ”Block” i sidofältet för blockinställningar. Bläddra sedan ner till avsnittet ”Filter” och klicka på menyn med tre punkter.

Här väljer du ”Taxonomier”.

Ange bara kategorinamnet för att filtrera listan över inlägg i lämpligt fält.

Se till att trycka på ”Enter” efter detta.

För att ändra hur många inlägg som ska visas kan du klicka på blocket ”Inläggslista” och välja ikonen ”Inställningar”.

Nu kan du ändra antalet i fältet ”Artiklar per sida”.

Om du vill ändra utseendet på sidan kan du välja ett av blocken på sidan. Gå sedan till fliken ”Block” i sidofältet för inställningar och navigera till fliken ”Stil”.

Du kommer nu att se de tillgängliga stylingalternativen för det specifika blocket. Du kan ändra textfärgen eller länkfärgen, ändra teckensnitt, justera utfyllnad och marginal och så vidare.

Nu kan du flytta dig ner på sidan och leta reda på blocket där det står ”Lägg till text eller block som visas när en fråga inte ger några resultat”.

Här kan du skriva in lite text eller lägga till block som visas om kategorin inte har några inlägg i sig ännu.

Och det är allt för grunderna i att redigera en kategorisida i den fullständiga webbplatsredigeraren. Du kan nu lägga till fler block för att göra den mer distinkt från de andra kategorisidorna i arkivet.

Sedan klickar du bara på ”Spara”.

Därefter kan du upprepa samma steg som tidigare för att skapa anpassade WordPress-sidor för alla dina kategorier. Du kan också bara redigera dina huvudkategorier, och resten kommer att använda standardmallen för arkiv i ditt tema.

Om du vill ha fler tips och tricks om hur du använder redigeraren för hela webbplatsen kan du läsa vår kompletta nybörjarguide till WordPress redigering av hela webbplatsen.

Vi rekommenderar också att du kollar in vår lista över de bästa Gutenberg-blockpluginsen så att du kan lägga till mycket fler element på din kategorisida.

Så här ser vår enkla kategorisida ut:

Metod 3: Använd CSS Hero för att utforma kategorisidor (alla teman)

Denna tredje metod rekommenderas för användare av WordPress klassiska tema, men även användare av blockteman kan göra det.

Anledningen är att inte många klassiska teman erbjuder möjligheten att individuellt utforma dina kategoriarkivsidor. Och om du inte vill gå med metod 1, är alternativet att använda anpassad CSS.

Tricket med CSS är att du måste veta hur du kodar. Om du är helt nybörjare utan teknisk bakgrund är kodning kanske inte det mest användarvänliga alternativet för dig.

Tack och lov har vi hittat ett enkelt sätt att anpassa ditt tema med hjälp av CSS utan att koda alls, nämligen med CSS Hero.

CSS Hero är ett plugin som låter dig anpassa ditt befintliga tema med en visuell CSS-redigerare. Allt du behöver göra är att välja ett element på din webbplats, ändra dess stil, och CSS Hero kommer att ändra CSS-koden för det elementet.

Jämfört med de tidigare metoderna rekommenderar vi dock att du använder CSS endast om du vill göra mindre ändringar i dina kategoriarkivsidor. Även om en översyn är möjlig kan det ta längre tid.

Pluginet kommer inte heller med en gratisversion, men du kan använda vår CSS Hero kupongkod för att få 40% rabatt.

För mer information kan du kolla in vår fullständiga CSS Hero-recension.

När du har köpt och laddat ner CSS Hero kan du installera och aktivera det i din WordPress-admin. Steg-för-steg-instruktioner hittar du i vår nybörjarguide för installation av WordPress-plugins.

Sedan bör du se en CSS Hero-knapp högst upp i adminfältet. Klicka på den för att börja redigera din webbplats.

Skärmbilden nedan visar hur din sida ska se ut nu.

På vänster sida finns ett sidofält där du kan ändra de enskilda elementen på din sida. Längst upp hittar du knappar för att visa sidan på olika enheter, växla till navigeringsläget och ångra ändringar.

Längst ner kan du spara ditt arbete.

Som standard ser du din startsida.

Om du vill anpassa en arkivsida för en kategori växlar du från läget ”Redigera” till läget ”Navigera” längst upp till höger på sidan. Gå sedan till den kategori som du vill anpassa.

När du har kommit till rätt sida kan du gå tillbaka till redigeringsläget.

För att se till att dina ändringar bara påverkar den här specifika kategorisidan och inte resten, ändra inställningen ”Selection Mode” till ”Category”.

Nu kan du gå vidare och välja ett element som du vill redigera.

I det här exemplet har vi klickat på den grupp av block som visar kategorititel och beskrivning. Det vänstra sidofältet har nu inställningar för att ändra det elementet.

Låt oss prova ett exempel. Om du vill ändra bakgrundsfärgen klickar du på alternativet ”Bakgrund”.

Sedan kan du klicka på färgväljarikonen och välja den färg som passar din smak. Det är också möjligt att lägga till en gradient eller en bild som bakgrund.

Eftersom vi valde en ganska mörk färg är texten inte läsbar nu. Tack och lov låter CSS dig klicka på de enskilda textelementen i den här gruppen av block.

Om du vill ändra textfärgen kan du gå till inställningen ”Typografi” och välja önskad färg. Du kan också anpassa teckenstorlek, radhöjd och till och med teckensnittsfamiljen.

En annan cool sak du kan göra är att lägga till en boxskugga till dina element så att de sticker ut ännu mer.

Det gör du genom att klicka på det element som du vill lägga till en skugga på. Navigera sedan till fliken ”Extra” och klicka på ”Skapa skugga”.

Börja nu dra punkten till den plats där du vill att skuggan ska visas. Du kommer automatiskt att se en skugga under elementet.

När du har gjort det kan du justera skuggans oskärpa, spridning, position och färg.

Om du tycker att elementen ligger för nära varandra (t.ex. om du behöver lägga till radbrytningar) eller för långt ifrån varandra kan du justera dem i inställningarna för ”Spacings”.

Här kan du ändra utfyllnad och marginal för varje element så att de ser mer proportionerliga ut .

Det finns faktiskt mycket mer som du kan göra med CSS Hero. Om du vill lära dig mer kan du kolla in de här guiderna:

• Så här lägger du till anpassade stilar i WordPress Widgets
• Så här stylar du navigeringsmenyer i WordPress (Uppdaterad)
• Så här lägger du till överflygningseffekter för bilder i WordPress (steg för steg)
• Så här ändrar du sidofältets sida i WordPress

När du är nöjd med hur kategorisidan ser ut klickar du bara på ”Spara”.

Nu är det klart. Nu kan du upprepa samma steg med de andra kategorisidorna så att de ser mer unika ut.

Här är slutresultatet av vår kategorisida, skapad med CSS Hero:

Bonus tips: Använd ett annat tema för specifika kategorisidor

Vill du göra en stor förändring av hur vissa av dina kategorier ser ut? Du kan överväga att använda ett helt annat tema för vissa kategorier.

Detta kan vara bra om du vill att en grupp kategorisidor ska se likadana ut men skilja sig från alla andra.

Tänk dock på att du inte kan styla varje kategori. Istället skapar du två olika utseenden för din webbplats.

Även om detta ger dig stor frihet att ändra på saker och ting, kom ihåg att det fortfarande är viktigt att hålla din webbplats någorlunda konsekvent. Även om vissa kategorier ser annorlunda ut, försök att behålla några gemensamma element.

Detta hjälper besökarna att känna sig bekväma när de rör sig runt på din webbplats. Du kan hålla din WordPress-webbplats engagerande och lättanvänd genom att hitta en balans mellan unik design och konsekvens.

Mer information om hur du gör detta finns i vår guide om hur du använder flera teman på din WordPress-webbplats.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du utformar enskilda kategorier på olika sätt i WordPress. Du kanske också vill kolla in våra expertval av de bästa temabyggarna för WordPress och vår ultimata guide om hur du redigerar en WordPress-webbplats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.