Hva du skal skape

I den forrige veiledningen viste jeg deg hvordan du stiler innleggene på hovedbloggsiden din i henhold til deres kategori, og skaper fargekoding etter kategori.

Mange nettsteder som bruker denne teknikken, tar også det videre ved å legge til tydelig styling til hver del av deres side, på en måte som koordinerer med stylingen på hovedbloggsiden eller hjemmesiden. Du kan bare bruke en enkel fargevalg eller legge til helt annen styling til hver seksjon, kanskje med en annen logo eller merkevarebygging for ulike deler av organisasjonen, eller til og med en annen layout.

Et eksempel er London Times nettside, som bruker en annen farge for hver del av nettstedet. Forsiden bruker disse fargene i et banner over hvert innlegg, som vist på skjermbildet:

Og når du navigerer videre inn på nettstedet, har hver seksjon sin egen farge:

I denne opplæringen jobber vi med stylingen lagt til hjemmesiden i den forrige opplæringen og legger til lignende styling i hvert kategoriarkiv. Vi vil endre fargen på posttitler og selve arkivtittelen.

Hva du trenger

For å følge denne opplæringen må du:

• en utviklingsinstallasjon av WordPress
• en kodeditor

Hvis du allerede har et tema du vil bruke denne teknikken på, jobber du på temaets stilark. Jeg skal lage et tema for temaet Twenty Fifteen og redigere stilarket i barnetemaet mitt.

Nettstedet ditt vil trolig allerede være fylt med innlegg; slik at nettstedet mitt har noen innlegg jeg skal laste ned WordPress tematestdataene.

Hvis du allerede har fulgt den tidligere opplæringen, og legger til kategoribasert styling på hovedblogg siden, kan du også bruke temaet fra den opplæringen som utgangspunkt - dette er hva jeg skal gjøre. Alternativt kan du jobbe med ditt eksisterende tema eller opprette et nytt barn tema på tjue femten.

Opprette temaet

Hvis du jobber med ditt eget tema eller den fra den forrige opplæringen, kan du hoppe over denne delen, men her er det du trenger å gjøre for å lage et barn tema på tjue femten.

På nettstedet ditt wp-content / themes mappe, opprett en ny mappe og gi den et navn. Jeg ringer til min tutsplus-style-innlegg-by-kategorien.

Inne i den mappen, opprett en tom CSS-fil som heter style.css og legg til følgende for det:

/ * Tema Navn: Tuts + Stil Innlegg etter Kategori Tema URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beskrivelse: Tema å støtte tutter + veiledning på styling innlegg etter kategori. Barn tema for Twenty Fifteen tema. Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.co.uk/ Mal: ​​twentyfifteen Versjon: 1.0 * / @import url ("... /twentyfifteen/style.css");

Dette forteller WordPress alt det trenger å vite for å lage et barn tema og importerer stilarket fra tjue femten. Du vil nok legge til eget navn og detaljer i stedet for min, men dette gir deg en ide.

Aktiver nå temaet ditt.

Importere dataene

Hvis nettstedet ditt allerede har innlegg, kan du hoppe over denne delen, men her kan du importere testenhetene til temaenheten til nettstedet ditt.

1. Gå til Tema Enhets Test siden og last ned xml fil som er koblet til.
2. På nettstedet ditt, gå til Verktøy> Importer. Klikk på WordPress link.
3. Klikk på Velg Fil knappen og velg filen du nettopp har lastet ned. Klikk på Last opp fil og import knapp.
4. Følg instruksjonene og vent på WordPress for å importere dataene.

Identifisere stiler til mål

WordPress har et par maletiketter som utfører klasser for sidene dine og innlegg når de vises i nettleseren. Disse er:

• body_class (), som du legger til i kropp tag i et tema header.php fil: den legger til klasser i kropp element i henhold til hvilken type side som vises.
• post_class (), som fungerer på en lignende måte, men brukes med innlegg i løkken.

Hvis du jobber med ditt eget tema og ikke har lagt til disse malene ennå, må du gjøre det. Denne opplæringen om å jobbe med klasser og IDer generert av WordPress, viser deg hvordan.

Hvis du jobber med et barn i Twenty Fifteen-temaet, har disse taggene allerede blitt lagt til temaet for tjuefemteminen selv, så du trenger ikke å gjøre noe.

Hvis du åpner et av nettstedets kategorisider i en nettleser og bruker utviklerverktøy til å inspisere utdata-HTML, vil du se at body_class () mal tag har lagt til en haug med klasser til siden din.

Her kropp tag har klasser som forteller oss hvilken type side dette er:

Disse klassene forteller oss at vi er blant annet på en kategoris arkivside for merkingskategorien. Klassen vi skal målrette mot er kategori-markering klasse.

Stil inn posttitler i arkivlisten

Vi starter med å legge til en farge på posttittene i henhold til deres kategori. I temaet stilark, legg til dette:

/ * posttitler i arkivsidene * / .archive.category-markup .entry-title a: link, .blog .category-markup .entry-title a: besøkt farge: # 6cd2c8;  .archive.category-markup .entry-title a: svever, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: besøkt farge: # e5572f;  .archive.category-template-2 .entry-title a: svever, .archive.category-template-2 .entry-title a: active color: # 120e5b;  .archive.category-media-2 .entry-title a: link, .archive.category-media-2 .entry-title a: besøkt farge: # 933bbe;  .archive.category-media-2 .entry-title a: svever, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Du vil kanskje endre fargene slik at de fungerer med ditt design.

Lagre stilarket ditt nå og åpne en kategoriside i nettleseren din. Min Markup-kategoriside har nå fargede posttitler:

Og mitt mediearkiv har posttitler med en annen farge:

Legg merke til at i skjermbildene er det ett innlegg som vises i begge arkivene, fordi det er i mange kategorier. Dette er grunnen til at det er viktig å målrette klassen for kategorien i kroppsmerket til arkivsiden din, og ikke bare målkategorier for innlegg i løkken.

La oss legge til en ramme også. Legg dette til stilarket ditt:

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

Dette legger til noe polstring over posttitlene, så vel som en kantlinje i samme farge som teksten. Slik ser det ut på min malarkivside:

Stiler arkivtittelen

I tillegg til å utforme de enkelte postoppføringene, vil jeg legge til fargen min til tittelen på arkivet selv.

Først skal jeg identifisere elementene og klassene som skal målrettes, ved hjelp av utviklerverktøy:

Arkiv tittelen er utført som følger:

 
Kategori: Mal
 
 
Innlegg med mal-relaterte tester
 
 

Så vi må målrette mot side-header og side tittel klasser, samt klassene på kropp tag for arkivet.

I stilarket legger du til følgende:

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

Dette legger til fargen til arkiv tittelen:

La oss nå endre fargen på grensen for å matche. Legg dette til stilarket ditt:

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

Dette endrer fargen på grensen for å matche:

Sammendrag

Bruk av klassene generert av WordPress til å målrette kategori arkivsidene og stil dem innebærer å identifisere utgangsklassene og deretter skrive CSS for å målrette dem.

I denne opplæringen har du lært hvordan du gjør dette for å lage fargekodede deler av nettstedet ditt etter kategori.

Du kan ta dette videre, for eksempel av:

• bruker avsnittets farger for andre elementer på siden, for eksempel nettstedets tittel og navigasjonsmenyen
• legger bakgrunner i seksjonsfarger, for eksempel på bunnteksten
• bruker forskjellige bakgrunnsbilder for hver seksjon på viktige steder
• endrer layoutet for ulike deler av nettstedet
  

Det er mange muligheter, og hvis du tar denne teknikken til sin ytterste grense, kan du opprette forskjellige deler av nettstedet ditt som ser helt forskjellig fra hverandre, noe som gir inntrykk av å ha helt separate sider.