I den tidigare handledningen visade jag dig hur du stal inläggen på din huvudblogsida enligt deras kategori, vilket skapar färgkodning per kategori.

Många webbplatser som använder den här tekniken tar det vidare genom att lägga till distinkt styling till varje del av deras webbplats, på ett sätt som samordnar stilen på huvudblogsidan eller hemsidan. Du kan bara använda ett enkelt färgschema eller lägga till helt annan stil till varje avsnitt, kanske med en annan logotyp eller branding för olika delar av din organisation, eller till och med en annan layout.

Ett 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:

I denna handledning arbetar vi med stilen som läggs till på hemsidan i föregående handledning och lägger till liknande styling i varje kategori arkiv. Vi ändrar färgen på posttitel och själva arkivtiteln.

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 arbetar du 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.

Om du redan har följt den tidigare handledningen och lägger till kategoribaserad styling på din huvudblogsida kan du också använda temat från den handledningen som utgångspunkt - det här är vad jag ska göra. Alternativt kan du arbeta med ditt befintliga tema eller skapa ett nytt barntema av tjugo femton.

Skapa teman

Om du arbetar med ditt eget tema eller den som har hämtats från föregående handledning kan du hoppa över det här avsnittet, men här är vad du behöver göra för att skapa ett barntema på tjugo 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 en av sidans kategori sidor i en webbläsare och använder utvecklingsverktyg för att inspektera HTML-utmatningen ser du att body_class () malltagg har lagt till en massa klasser till din sida.

Här kropp tagg har klasser som berättar vilken sorts sida det här är:

Dessa klasser berättar för oss att vi bland annat finns på en kategoris arkivsida för bland annat kategorin. Den klass vi ska rikta är den kategori-markup klass.

Stil in posttitel i arkivlistan

Vi börjar med att lägga till en färg i posttitlarna enligt deras kategori. Lägg till följande i ditt temans stilark:

/ * posttitlar i arkivsidor * / .archive.category-markup .entry-title a: länk, .blog .category-markup .entry-title a: besökte färg: # 6cd2c8;  .archive.category-markup .entry-title a: svävar, .blog .category-markup .entry-title a: aktiv färg: # 120e5b;  .archive.category-template-2 .entry-title a: länk, .archive.category-template-2 .entry-title a: besökte färg: # e5572f;  .archive.category-template-2 .entry-title a: svävar, .archive.category-template-2 .entry-title a: aktiv färg: # 120e5b;  .archive.category-media-2 .entry-title a: länk, .archive.category-media-2 .entry-title a: besökte färg: # 933bbe;  .archive.category-media-2 .entry-title a: svävar, .archive.category-media-2 .entry-title a: aktiv färg: # 120e5b; 

Du kanske vill ändra färgerna så att de fungerar med din design.

Spara nu ditt stilark och öppna en kategorisida i din webbläsare. My Markup category page har nu färgade posttitlar:

Och mitt mediearkiv har posttitlar med en annan färg:

Observera att i skärmdumpar finns ett inlägg som visas i båda arkiven, eftersom det finns många kategorier. Därför är det viktigt att rikta in sig på klassen för kategorin i kroppsnamnet på din arkivsida, och inte bara inrikta kategoriklasser för inlägg i loop.

Låt oss nu lägga till en kant. Lägg till detta i ditt stilark:

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

Detta lägger till en del padding ovanför posttitlarna samt en kant i samma färg som texten. Så här ser det ut på min Mall arkivsida:

Styling Arkiv Titel

Förutom att utforma de enskilda postförteckningarna, vill jag lägga till min färg till titeln på arkivet själv.

Först ska jag identifiera de element och klasser som ska riktas mot, med hjälp av utvecklingsverktyg:

Arkivtiteln produceras enligt följande:

 
Kategori: Mall
 
 
Inlägg med mallrelaterade tester
 
 

Så vi måste rikta in mot sidhuvud och sidans titel klasser, samt klasserna på kropp tagg för arkivet.

Lägg till följande i ditt stilark:

.archive.category-markup .page-header .page-title color: # 6cd2c8;  .archive.category-template-2 .page-header .page-title color: # e5572f;  .archive.category-media-2 .page-header .page-title color: # 933bbe; 

Detta lägger till färgen till arkivets titel:

Låt oss nu ändra gränsen för att matcha. Lägg till detta i ditt stilark:

.archive.category-markup .page-header border-left: 7px solid # 6cd2c8;  .archive.category-template-2 .page-header border-left: 7px solid # e5572f;  .archive.category-media-2 .page-header border-left: 7px solid # 933bbe; 

Detta ändrar färgen på gränsen för att matcha:

Sammanfattning

Med hjälp av klasserna som genereras av WordPress för att rikta in kategorier arkivsidor och stil innefattar dem att identifiera utmatningsklasserna och sedan skriva CSS för att rikta dem.

I den här handledningen har du lärt dig hur du gör detta för att skapa färgkodade delar av din webbplats per kategori.

Du kan ta detta vidare, till exempel av:

• Använda dina sektionsfärger för andra element på sidan, såsom webbplatsens titel och navigationsmenyn
• Lägger till bakgrunder i sektionsfärger, till exempel på sidfoten
• Använda olika bakgrundsbilder för varje sektion på nyckelplatser
• ändra layout för olika delar av webbplatsen
  

Det finns många möjligheter, och om du tar den här tekniken till sin längsta gräns kan du skapa olika delar av din webbplats som ser helt annorlunda ut, vilket ger intrycket att du har helt separata webbplatser.