Share
I en tidigare handledning visade jag dig hur du stilar kategorierna på din webbplats annorlunda så att om din webbplats har sektioner för varje kategori av inlägg kan du se dem ganska annorlunda ut.
Men vad händer om din webbplats är baserad på statiska sidor? Det är inte ovanligt att se stora webbplatser som är baserade på en hierarkisk sidstruktur, så kan du använda dessa tekniker för en webbplats så här?
Svaret är ja. WordPress ger dig några CSS klasser relaterade till sidstrukturen på din webbplats som du kan använda för att rikta in styling och skapa sektioner för din sidbaserade webbplats som ser ganska annorlunda ut.
I denna handledning arbetar vi med en webbplats baserad på hierarkiska sidor och utformar varje avsnitt på webbplatsen med en annan färg för varje avsnitt. Vi tittar också på en alternativ teknik baserad på att lägga till kategorier på sidor.
För att följa denna handledning behöver du:
Om du redan har ett tema som du vill använda den här tekniken på, arbetar du med temat stilark och funktionsfil. Jag ska skapa ett barntema för temaet Tjugo Femton och redigera stilarket och funktionsfilen 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 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-sidor-by-sektionen.
Inne i den mappen skapar du en tom CSS-fil som heter style.css och lägg till följande till det:
Accentsconagua
/ * Tema Namn: Tuts + Stilsidor genom Sektion 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 på styling sidor annorlunda i varje avsnitt på en webbplats. 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.
Om din webbplats redan har sidor konfigureras kan du hoppa över det här avsnittet, men här importerar du testdata till temanheten till din webbplats.
xml fil som är länkad till.Som standard kommer WordPress att tilldela en navigeringsmeny som innehåller alla bloggkategorier till huvudmenyn, och den kommer att ställa in bloggsidan som hemsida. När vi arbetar med statiska sidor måste du ändra det i WordPress-administratören.
WordPress använder body_class () malltaggen till utmatningsklasser beroende på vilken typ av sida som visas. Du lägger till den här taggen i ditt tema header.php fil: den lägger till klasser till kropp element beroende på vilken typ av sida som visas.
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 sidas 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 har jag en barnsida öppen:
De kropp elementet matas ut med ett antal klasser:
Dessa berättar för webbläsaren att vi är på en statisk sida, sidans ID, det faktum att det är ett barn och vad det är ett barn till och dess sidmall, bland annat.
Vi ska använda två av dessa klasser för att rikta in sidor på olika delar av webbplatsen: de som gäller sid-ID och sidförälder.
För att rikta in sidor i en sektion av en hierarkisk webbplats använder vi två klasser: sid ID för toppnivån och sidförälder-ID för barnsidorna.
Först måste du identifiera ID: er på dina högsta sidor. Gör detta genom att öppna var och en av dem i tur och ordning på adminskärmen och kolla på webbadressen för deras redigeringsskärm. URL-adressen kommer att innehålla texten "post = X", där X är det unika ID-numret på sidan. Ignorera det faktum att det står "post", inte "sida" (sidor är faktiskt en typ av inlägg) och använd det ID för att rikta in din styling.
På min sida är ID-erna på sidorna med högsta nivå med barn 5 och 17 och sidorna utan barn har ID på 146, 701, 703, 733 och 735. Jag ska använda en färg för var och en av de två hierarkiska sektionerna och en annan för sidorna utan några barn. Om dina sidor är alla i sektioner kan du använda en annan färg för varje avsnitt.
Öppna ditt temas stilark och lägg till följande CSS till det:
.sid-id-5 h1, .parent-pageid-5 h1 färg: # 6cd2c8; .sida-id-17 h1, .parent-pageid-17 h1 färg: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 färg: # 933bbe;
Obs! Du måste ändra post- och föräldra ID-er i linje med din egen webbplats, och du kanske vill ändra färgerna för att matcha din design.
Spara nu ditt stilark och kolla på din webbplats. Min sida använder färgerna i varje avsnitt. Här är en sida utan hierarki:
Och en högsta sida:
Här är ett barn på den högsta sidan:
Det finns emellertid ett par problem med detta tillvägagångssätt. Det första är att jag var tvungen att manuellt lägga till klasser för var och en av sidorna på toppnivå, vilket innebär att om någon lägger till fler sektioner eller sidor på toppnivå till min webbplats i framtiden eller flyttar en av mina toppnivåsidor till en annan plats i hierarki, det kommer inte att finnas någon styling för dem. Det andra är att detta bara fungerar för direkta barn på mina högsta sidor. Ingen av mina stylingar tillämpas på barnbarn på sidorna.
Detta innebär att om din webbplats har en hierarki med flera nivåer, kommer det här sättet att bli mycket svårt att genomföra, eftersom du måste rikta barn till var och en av barnen på dina högsta sidor. Omöjligt om nya sidor läggs till regelbundet!
Så jag behöver en alternativ metod, som är att använda kategorier.
Som standard tilldelar WordPress inte kategorier till sidor, men du kan enkelt lägga till kategorier på sidor med en funktion. För att göra detta använder du register_taxonomy_for_object_type () funktion, som utforskas i denna handledning om att tilldela kategorier till bilagor.
Öppna ditt temas functions.php filen, eller om den inte redan har en, skapa en. Lägg till följande för det:
funktion tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Detta kommer att lägga till 'kategori' taxonomi till 'sida' objekttyp, vilket innebär att du kan tilldela kategorier till sidor.
Men det betyder inte att body_class () taggen kommer att mata ut kategorin som en av klasserna på en sida med kategorier, eftersom sidorna inte har kategorier som standard.
Du kan ändra detta genom att skriva en funktion och bifoga den till body_class filterkrok. Återigen i din funktionsfil lägg till följande:
funktion tutsplus_add_categories_to_body_class ($ klasser) om (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ kategorier som $ kategori) $ classes [] = 'category-'. $ Kategori-> slug; returnera $ klasser; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Detta skapar en funktion som heter tutsplus_add_categories_to_body_class () med variabeln $ klasser som dess syfte. Det kontrollerar om vi är på en sida och i så fall skapar vi en variabel som heter $ kategorier som innehåller alla kategorier som sidan är i. Sedan för varje kategori lägger den till kategorin slug (prefixed av 'kategori-' för konsekvens) till $ klasser array och returnerar dem. Slutligen genom att koppla funktionen till body_class filter, lägger det till utgångssystemet av sniglar till de klasser som utmatas av body_class () mall tagg.
Försök nu lägga till några kategorier på sidorna på din webbplats för att ge det avsnitt. Jag lägger till en kategori 1, 2 och 3 kategori. Se till att varje sida finns i bara ett avsnitt.
Så här ser mina sidor på adminskärmarna med de tillagda kategorierna:
Nästa steg är att lägga till en styling för att rikta in sidor i varje avsnitt. Jag tänker inte ändra rubrikfärgen som jag redan gjorde med sidhierarkin. I stället lägger jag till en gräns.
Lägg till följande (i ditt tema stilark, eller använd något liknande med sniglarna för dina kategorier och färgerna du använder):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; vaddering: 0,5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; vaddering: 0,5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; vaddering: 0,5em;
Spara nu ditt stilark och kolla dina sidor.
Här är en sida i avsnitt 1:
Om du kontrollerar din webbplats kommer du att upptäcka att varje sida du har tilldelat en av kategorierna med målinriktad styling har rätt styling, oavsett var den befinner sig i sidhierarkin. Detta ger dig finare kontroll över styling och möjligheten att stifta delar av en webbplats med en multi-level hierarki.
Den andra fördelen med den här kategoribaserade metoden är att du kan använda den för sidor och inlägg på din webbplats: så om du redan har använt kategoribaserad styling för dina blogginlägg kan du enkelt använda det på dina statiska sidor också.
Om din webbplats är baserad på en hierarkisk struktur på sidor, kommer det förmodligen att ha sektioner som du kanske vill ge någon särskild identitet till.
I den här handledningen har du lärt dig två sätt att rikta in styling på sidor i olika delar av din webbplats.
Först använde du sidhierarkin, som har fördelen att du arbetar med standard WordPress-inställningar men nackdelen med att du inte arbetar med en hierarki mer än två nivåer djupt.
Slutligen lärde du dig att tillämpa kategorier på sidor, lägga till kategorier i body_class () tagga för sidor, och skriv sedan CSS som riktar sig mot klasserna som WordPress utmatar.
