Share
I en tidligere opplæring viste jeg deg hvordan du stiler kategoriene på nettstedet ditt annerledes, slik at hvis nettstedet ditt har seksjoner for hver kategori av innlegg, kan du få dem til å se ganske annerledes ut.
Men hva om nettstedet ditt er basert på statiske sider? Det er ikke uvanlig å se store nettsteder som er basert på en hierarkisk sidestruktur, så kan du bruke disse teknikkene til et nettsted som dette?
Svaret er ja. WordPress vil gi deg noen CSS klasser knyttet til sidestrukturen på nettstedet ditt, som du kan bruke til å målrette styling og lage seksjoner for ditt sidebaserte nettsted som ser ganske annerledes ut.
I denne opplæringen jobber vi med et nettsted basert på hierarkiske sider og utformer hver seksjon av nettstedet ved hjelp av en annen farge for hver seksjon. Vi vil også se på en alternativ teknikk basert på å legge til kategorier på sider.
For å følge denne opplæringen må du:
Hvis du allerede har et tema du vil bruke denne teknikken på, jobber du på temaets stilark og funksjonsfil. Jeg skal lage et tema for temaet Twenty Fifteen og redigere stilarket og funksjonsfilen 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 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-sider-by-seksjonen.
Inne i den mappen, opprett en tom CSS-fil som heter style.css og legg til følgende for det:
Accentsconagua
/ * Tema Navn: Tuts + Stilsider etter Seksjon Tema URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beskrivelse: Tema å støtte tips + veiledning på styling sider annerledes i hver del av et nettsted. 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.
Hvis nettstedet ditt allerede har sider opprettet, kan du hoppe over denne delen, men her er hvordan du importerer testenhetene til temaenheten til nettstedet ditt.
xml fil som er koblet til.Som standard vil WordPress tilordne en navigasjonsmeny som inneholder alle bloggkategorier til hovedmenyen, og den vil sette bloggsiden som startside. Når vi jobber med statiske sider, må du endre det i WordPress-administrasjonen.
WordPress bruker body_class () mal tag til utgangsklasser etter hvilken type side som vises. Du legger til denne taggen i temaet ditt header.php fil: den legger til klasser i kropp element i henhold til hvilken type side som vises.
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 sidens sider i en nettleser og bruker utviklerverktøy til å inspisere utdata-HTML, ser du at body_class () mal tag har lagt til en haug med klasser til siden din. Her har jeg en barneside åpen:
De kropp elementet er utført med en rekke klasser:
Disse forteller nettleseren at vi er på en statisk side, sidenes ID, det faktum at det er et barn og hva det er et barn av, og sidenes mal, blant annet.
Vi skal bruke to av disse klassene til å målrette sider i ulike deler av nettstedet: de som gjelder side-ID og sideforelder.
For å målrette mot sider i en del av et hierarkisk nettsted bruker vi to klasser: sidens ID for toppnivåsiden og sidens overordnede ID for barnesidene.
Først må du identifisere IDene på toppnivå sidene dine. Gjør dette ved å åpne hver av dem igjen i administrasjonsskjermene og sjekke nettadressen for deres redigeringsskjerm. Nettadressen vil inneholde teksten 'post = X', der X er den unike IDen til siden. Ignorer det faktum at det står 'post' ikke 'side' (sider er faktisk en type post), og bruk den IDen for å målrette styling.
På siden min er IDene på toppnivå sidene med barn 5 og 17, og sidene uten barn har ID på 146, 701, 703, 733 og 735. Jeg skal bruke en farge for hver av de to hierarkiske seksjonene og en annen for sidene uten barn. Hvis sidene dine er i seksjoner, kan du bruke en annen farge for hver seksjon.
Åpne temaets stilark og legg til følgende CSS til det:
.side-id-5 h1, .parent-pageid-5 h1 farge: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 farge: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Merk: Du må endre innleggs- og foreldre-IDene i tråd med ditt eget nettsted, og du vil kanskje endre fargene for å matche designen din.
Lagre stilarket ditt og ta en titt på nettstedet ditt. Mitt nettsted bruker fargene i hver seksjon. Her er en side uten et hierarki:
Og en toppnivåside:
Her er et barn på den øverste siden:
Det er imidlertid et par problemer med denne tilnærmingen. Den første er at jeg måtte legge til klasser manuelt for hver av toppsidene, noe som betyr at hvis noen legger til flere seksjoner eller toppnivå sider til nettstedet mitt i fremtiden, eller flytter et av toppsidene til et annet sted i hierarki, det vil ikke være noen styling for dem. Det andre er at dette bare fungerer for direkte barn på mine toppnivå sider. Ingen av min styling er brukt på barnebarn på sidene.
Dette betyr at hvis nettstedet ditt har et flernivåhierarki, vil denne tilnærmingen bli svært vanskelig å implementere, ettersom du må målrette barn for hver av barna på toppnivå-sidene dine. Umulig hvis nye sider legges til regelmessig!
Så jeg trenger en alternativ metode, som er å bruke kategorier.
Som standard tilordner WordPress ikke kategorier til sider, men du kan enkelt legge til kategorier på sider med en funksjon. For å gjøre dette bruker du register_taxonomy_for_object_type () funksjon, som utforskes i denne opplæringen om tildeling av kategorier til vedlegg.
Åpne temaet ditt functions.php fil, eller hvis den ikke allerede har en, opprett en. Legg til følgende for det:
funksjon tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Dette vil legge til 'kategori' taksonomi til 'side' objekttype, noe som betyr at du kan tilordne kategorier til sider.
Men dette betyr ikke at body_class () tag vil utgjøre kategorien som en av klassene på en side med kategorier, fordi sidene ikke har kategorier som standard.
Du kan endre dette ved å skrive en funksjon og legge den til body_class filterkrok. Igjen i funksjonsfilen din, legg til dette:
funksjon tutsplus_add_categories_to_body_class ($ klasser) hvis (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ kategorier som $ kategori) $ classes [] = 'category-'. $ Category-> slug; returnere $ klasser; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Dette skaper en funksjon som kalles tutsplus_add_categories_to_body_class () med variabelen $ klasser som objekt. Det kontrollerer om vi er på en side og i så fall oppretter en variabel som heter $ kategorier som inneholder alle kategoriene siden er i. Deretter for hver kategori legger den til kategorien slug (prefixed av 'kategori-' for konsistens) til $ klasser array og returnerer dem. Endelig ved å hekte funksjonen til body_class filter, legger det utgangsserien til snegler til klassene som utføres av body_class () mal tag.
Prøv nå å legge til noen kategorier på sidene på nettstedet ditt for å gi det seksjoner. Jeg legger til en kategori 1, 2 og 3 kategori. Pass på at hver side er i bare en seksjon.
Slik ser sidene mine på administrasjonsskjermene med kategorier lagt til:
Det neste trinnet er å legge til noen styling for å målrette sider i hver seksjon. Jeg kommer ikke til å endre overskriften farge som jeg allerede gjorde det ved hjelp av siden hierarkiet. I stedet legger jeg til en kantlinje.
I temaets stilark, legg til følgende (eller noe lignende ved hjelp av sneglene for kategoriene dine og farger du bruker):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; polstring: 0.5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; polstring: 0.5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; polstring: 0.5em;
Lagre stilarket ditt og sjekk sidene dine.
Her er en side i avsnitt 1:
Hvis du sjekker nettstedet ditt, finner du at hver side du har tildelt en av kategoriene med målrettet styling, vil ha riktig styling, uansett hvor det er i sidens hierarki. Dette gir deg finere kontroll over stylingen og muligheten til å stilere deler av et nettsted med et multi-level hierarki.
Den andre fordelen med denne kategoribaserte tilnærmingen er at du kan bruke den til sider og innlegg på nettstedet ditt: så hvis du allerede har brukt kategoribasert styling for blogginnleggene dine, kan du enkelt bruke dette på dine statiske sider også.
Hvis nettstedet ditt er basert på en hierarkisk struktur av sider, vil det trolig ha seksjoner som du kanskje vil gi noen tydelig identitet til.
I denne opplæringen har du lært to måter å målrette styling på sider i ulike deler av nettstedet ditt.
Først brukte du sidenhierarkiet, som har fordelen av å arbeide med standard WordPress-innstillinger, men ulempen med at det ikke fungerer med et hierarki mer enn to nivåer dypt.
Til slutt lærte du å søke kategorier på sider, legge til kategorier i body_class () tag for sider, og skriv deretter CSS rettet mot klassene som WordPress output.
