Stilinnlegg etter kategori på hovedbloggsiden din

Hva du skal skape

Store nyhetsbaserte nettsteder bruker noen ganger styling for å skille mellom delene av nettstedet deres. Ofte tar dette formen av forskjellige farger for hver seksjon.

Et godt 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:

Bruke styling for seksjonene på nettstedet ditt slik som dette, kan gjøre hjemmesiden mer engasjerende og hjelpe besøkende å finne innhold i kategorier de regelmessig leser. I denne veiledningen vil jeg vise deg hvordan du målretter stiler som tilbys av WordPress for å gjøre nettopp dette, styling innleggene på hovedbloggsiden din etter kategori.

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 i, vil du jobbe med 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.

Opprette temaet

Hvis du jobber med ditt eget tema, kan du hoppe over denne delen, men hvor 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 nettstedets hjemmeside i en nettleser og bruker utviklerverktøy til å inspisere utdata-HTML, ser du at disse kodene har lagt til en rekke klasser på siden din.

Her er hva jeg får når jeg ser på hjemmesiden min hjemmeside:

Kroppsmerket er utført som:

De hjem og blog klasser forteller meg at dette er nettstedets hjemmeside og at det er den viktigste bloggsiden. Jeg kan bruke disse klassene til å målrette CSS på hjemmesiden min.

Noe lignende skjer med innlegg:

Artikkelen jeg har valgt er merket som: 

Det er mange klasser! Disse forteller oss noen ting om innlegget: dets ID, posttype, status, format, kategori og koder. Du kan bruke alle disse til å målrette din styling. Det vi skal bruke her er kategori-markering klasse.

Styling innleggene

Nå som jeg har identifisert hvilke klasser jeg må målrette, er det på tide å legge til noen styling. Jeg skal holde den subtil og bare endre tekstfargen på hvert innleggs tittel, som er inne i en lenke i en

stikkord.

Åpne temaets stilark og legg til dette:

.blogg .category-markup .entry-title a: link, .blog .category-markup .entry-title a: besøkt farge: # 6cd2c8;  .blog .category-markup .entry-title a: svever, .blog .category-markup .entry-title a: active color: # 120e5b; 

Jeg har brukt en nyanse av cyan for link og besøkt stater, og en marine for sveve og aktiv stater: du kan endre disse til farger som passer med designen din.

Lagre nå stilarket ditt og oppdater bloggen din. Du ser at innlegg med kategorien du har målrettet nå har en annen fargeoverskrift:

Legg nå noen flere farger for de andre kategoriene i bloggen din:

.blogg .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: besøkt farge: # e5572f;  .blog .category-template-2 .entry-title a: svever, .blog .category-template-2 .entry-title a: aktiv farge: # 120e5b;  .blog .category-media-2 .entry-title a: link, .blog .category-media-2 .entry-title a: besøkt farge: # 933bbe;  .blog .category-media-2 .entry-title a: svever, .blog .category-media-2 .entry-title a: active color: # 120e5b; 

Igjen, juster fargene for å passe merkevaren din. Du vil nå ha en rekke farger for dine posttitler.

Hvis du liker deg, kan du legge til grenser, enten i stedet for eller i tillegg til å endre farge på titlene:

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

Nå har innleggene mine en subtil grense, samt endringen i farge for posttittelen:

Dette veileder besøkende mot forskjellige kategorier på nettstedet mitt uten å være for garish.

Sammendrag

Fordi WordPress gir oss body_class () og post_class () maltekoder, er det mulig å målrette mot en bestemt side på nettstedet ditt, og deretter målrette innlegg i hver kategori, og stil dem annerledes.

I denne opplæringen har du lært hvordan du identifiserer hvilke klasser som skal målrettes og legg til styling for hver kategori, for å gi besøkende noen visuelle ledetråder om strukturen til nettstedet ditt.

I neste veiledning vil jeg vise deg hvordan du kan utvide på dette og bruke den til å utforme de forskjellige delene av nettstedet ditt annerledes.