Style Posts efter kategori på din huvudsakliga blogg sida

Stora nyhetsbaserade webbplatser använder ibland någon form av styling för att skilja mellan sektionerna på deras webbplats. Ofta har detta formen av olika färger för varje sektion.

Ett bra exempel är London Times hemsida, som använder en annan färg för varje avsnitt på webbplatsen. Framsidan använder dessa färger i en banner ovanför varje inlägg, som visas i skärmdumpen:

Och när du navigerar längre in på webbplatsen har varje sektion sin egen färg:

Använda styling för sektionerna på din webbplats så här kan göra din hemsida mer engagerande och hjälpa besökare att hitta innehåll i kategorier som de regelbundet läser. I denna handledning visar jag dig hur du riktar in stilar som tillhandahålls av WordPress för att göra just detta, styling inläggen på din huvudblogsida efter kategori.

Vad du behöver

För att följa denna handledning behöver du:

• en utvecklingsinstallation av WordPress
• en kodredigerare

Om du redan har ett tema som du vill använda den här tekniken ska du arbeta med temat stilark. Jag ska skapa ett barntema för temat tjugo femton och redigera stilarket i mitt barntema.

Din webbplats kommer förmodligen redan att fyllas med inlägg. så att min webbplats har några inlägg jag ska hämta WordPress-tematestdata.

Skapa teman

Om du arbetar med ditt eget tema kan du hoppa över det här avsnittet, men var är vad du behöver göra för att skapa ett barntema på tjugofem femton.

På din webbplats wp-content / teman mapp, skapa en ny mapp och ge den ett namn. Jag ringer min tutsplus-style-inlägg-by-kategori.

Inne i den mappen skapar du en tom CSS-fil som heter style.css och lägg till följande till det:

/ * Tema Namn: Tuts + Stil Inlägg efter kategori Tema URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beskrivning: Tema att stödja tutor + handledning om styling inlägg per kategori. Barn tema för tjugo femton temat. Författare: Rachel McCollin Författare URI: http://rachelmccollin.co.uk/ Mall: twentyfifteen Version: 1.0 * / @import url ("... /twentyfifteen/style.css");

Detta berättar WordPress allt som behövs för att skapa ett barntema och importera stilarket från tjugo femton. Du kommer noga att lägga till ditt eget namn och detaljer istället för mina, men det här ger dig en idé.

Aktivera nu ditt tema.

Importera data

Om din webbplats redan har inlägg kan du hoppa över det här avsnittet, men här kan du importera testenhetens temanhet till din webbplats.

1. Gå till temanhetstestsidan och ladda ner xml fil som är länkad till.
2. På din webbplats, gå till Verktyg> Importera. Klicka på Wordpress länk.
3. Klicka på Välj FIL knappen och välj den fil du just har laddat ner. Klicka på Ladda upp fil och importera knapp.
4. Följ anvisningarna och vänta på WordPress för att importera data.

Identifiera stilar till mål

WordPress har ett par malltaggar som utmatar klasser för dina sidor och inlägg när de ses i webbläsaren. Dessa är:

• body_class (), som du lägger till i kropp tagga i ett temas header.php fil: den lägger till klasser till kropp element beroende på vilken typ av sida som visas.
• post_class (), som fungerar på ett liknande sätt men används med inlägg i slingan.

Om du arbetar med ditt eget tema och inte har lagt till dessa malltaggar måste du göra det. Denna handledning om att arbeta med klasser och ID-er som genereras av WordPress visar hur.

Om du arbetar med ett barn i tjugo femton-temat, kommer dessa taggar redan att läggas till i tjugo femton temat, så du behöver inte göra någonting.

Om du öppnar webbplatsens hemsida i en webbläsare och använder utvecklingsverktyg för att inspektera HTML-utmatningen ser du att dessa taggar har lagt till en massa klasser på din sida.

Det här är vad jag får när jag ser min hemsida:

Kroppsetiketten matas ut som:

De Hem och blog klasser berätta för mig att det här är webbplatsens hemsida och att det är huvudblogsidan. Jag kan använda dessa klasser för att rikta in CSS på min hemsida.

Något liknande händer med inlägg:

Artikeln jag har valt är taggad som: 

Det är många klasser! Dessa berättar några saker om posten: dess ID, posttyp, status, format, kategori och taggar. Du kan använda alla dessa för att rikta din styling. Vad vi ska använda här är kategori-markup klass.

Styling inläggen

Nu när jag har identifierat vilka klasser jag behöver rikta in, är det dags att lägga till lite styling. Jag håller på att hålla den subtil och ändrar bara textfärgen på varje inläggets titel, som ligger inuti en länk i en

märka.

Öppna ditt temas stilark och lägg till det här:

.blogg .category-markup .entry-title a: länk, .blog .category-markup .entry-title a: besökte färg: # 6cd2c8;  .blog .category-markup .entry-title a: sväva, .blog .category-markup .entry-title a: aktiv färg: # 120e5b; 

Jag har använt en nyans av cyan för länk och besökt stater och en marin för sväva och aktiva stater: du kan ändra dessa till färger som passar din design.

Spara nu ditt stilark och uppdatera din bloggsida. Du ser att inlägg med den kategori du har riktat nu har en annan färgrubrik:

Lägg nu till några fler färger för de andra kategorierna i din blogg:

.blogg .category-template-2 .entry-title a: länk, .blog .category-template-2 .entry-title a: besökte färg: # e5572f;  .blog .category-template-2 .entry-title a: svävar, .blog. category-template-2 .entry-title a: aktiv färg: # 120e5b;  .blog .category-media-2 .entry-title a: länk, .blog .category-media-2 .entry-title a: besökte färg: # 933bbe;  .blog .category-media-2 .entry-title a: svävar, .blog .category-media-2 .entry-title a: aktiv färg: # 120e5b; 

Återigen, justera färgerna för att passa din branding. Du kommer nu ha en rad färger för dina posttitlar.

Om du gillar dig kan du lägga till gränser, antingen istället för eller lika bra som att ändra titlarna:

.blogg .category-markup .entry-title padding-top: 0.5em; border-top: 2px # 6cd2c8 solid;  .blog. category-template-2 .entry-title padding-top: 0.5em; border-top: 2px # e5572f solid;  .blog. category-media-2 .entry-title padding-top: 0.5em; border-top: 2px # 933bbe solid; 

Nu har mina inlägg en subtil gräns samt färgförändringen för posttiteln:

Detta guidar besökare mot olika kategorier på min webbplats utan att vara för galen.

Sammanfattning

Eftersom WordPress ger oss body_class () och post_class () malltaggar är det möjligt att rikta in en specifik sida på din webbplats och sedan rikta inlägg i varje kategori och utforma dem på olika sätt.

I den här handledningen har du lärt dig hur du identifierar vilka klasser som ska riktas mot och lägg till styling för varje kategori, för att ge besökarna några visuella ledtrådar om strukturen på din webbplats.

I nästa handledning visar jag dig hur du kan expandera på detta och använda det för att utforma olika delar av din webbplats på olika sätt.