Share
In een eerdere zelfstudie heb ik je laten zien hoe je de categorieën in je site anders vormgegeven, zodat als je site secties voor elke categorie berichten heeft, je ze er heel anders uit kunt laten zien.
Maar wat als uw site is gebaseerd op statische pagina's? Het is niet ongebruikelijk om grote sites te zien die zijn gebaseerd op een hiërarchische paginastructuur, dus kunt u deze technieken gebruiken voor een site als deze?
Het antwoord is ja. WordPress geeft u een aantal CSS-klassen met betrekking tot de paginastructuur van uw site die u kunt gebruiken om op stijlen te richten en secties te maken voor uw pagina-gebaseerde site die er heel anders uitzien.
In deze tutorial werken we met een site op basis van hiërarchische pagina's en stylen we elke sectie van de site met een andere kleur voor elke sectie. We zullen ook kijken naar een alternatieve techniek gebaseerd op het toevoegen van categorieën aan pagina's.
Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:
Als u al een thema heeft waarop u deze techniek wilt gebruiken, werkt u aan het stylesheet- en functiedossier van uw thema. Ik ga een kindthema van het Twenty Fifteen-thema maken en het bestand met stijlbladen en functies in mijn kindthema bewerken.
Uw site zal waarschijnlijk al gevuld zijn met berichten; zodat mijn site wat berichten bevat. Ik ga de testgegevens van WordPress-thema downloaden.
Als u met uw eigen thema werkt, kunt u dit gedeelte overslaan, maar wat moet u doen om een kindthema van Twenty Fifteen te maken?.
In uw site's wp-content / themes map, maak een nieuwe map en geef deze een naam. Ik bel de mijne tutsplus-style-pages-by-sectie.
Maak in die map een leeg CSS-bestand met de naam style.css en voeg het volgende toe:
Accentsconagua
/ * Theme Name: Tuts + Style Pages op Section Theme URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beschrijving: Theme om tuts + tutorial over stylingpagina's anders te ondersteunen in elke sectie van een site. Kindthema voor het Twenty Fifteen-thema. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Sjabloon: twentyfifteen Versie: 1.0 * / @import url ("... /twentyfifteen/style.css");Hierdoor weet WordPress alles wat het moet weten om een kindthema te maken en importeert het de stylesheet van Twenty Fifteen. U wilt waarschijnlijk uw eigen naam en gegevens toevoegen in plaats van de mijne, maar dit geeft u een idee.
Activeer nu uw thema.
Als er al pagina's zijn ingesteld op uw site, kunt u deze sectie overslaan, maar hier ziet u hoe u de testgegevens van de themafunctie importeert in uw site.
xml bestand dat is gekoppeld aan.WordPress wijst standaard een navigatiemenu toe met alle blogcategorieën naar het hoofdmenu en stelt de blogpagina in als de startpagina. Omdat we werken met statische pagina's, moet u dat wijzigen in de WordPress-beheerder.
WordPress gebruikt de body_class () sjabloon tag naar output klassen volgens het type pagina dat wordt weergegeven. U voegt deze tag toe aan uw thema's header.php bestand: het voegt klassen toe aan de lichaam element volgens het type pagina dat wordt bekeken.
Als u met uw eigen thema werkt en deze sjabloontags nog niet hebt toegevoegd, moet u dit doen. Deze zelfstudie over het werken met klassen en ID's gegenereerd door WordPress laat zien hoe.
Als je werkt met een kind van het Twenty Fifteen-thema, zijn deze tags al toegevoegd aan het Twenty Fifteen-thema zelf, dus je hoeft niets te doen.
Als u een van de pagina's van uw site opent in een browser en ontwikkelaarstools gebruikt om de uitvoer-HTML te inspecteren, ziet u dat body_class () sjabloon tag heeft een aantal klassen toegevoegd aan je pagina. Hier heb ik een onderliggende pagina geopend:
De lichaam element wordt uitgevoerd met een aantal klassen:
Deze geven de browser aan dat we op een statische pagina staan, de ID van de pagina, het feit dat het een kind is en wat het een kind is, en de paginasjabloon, onder andere.
We gebruiken twee van deze klassen om pagina's in verschillende delen van de site te targeten: de pagina's die betrekking hebben op pagina-ID en paginabericht.
Om pagina's in een sectie van een hiërarchische site te targeten, gebruiken we twee klassen: de pagina-ID voor de pagina op het hoogste niveau en de pagina-bovenliggende ID voor de onderliggende pagina's.
Eerst moet u de ID's van uw topniveau-pagina's identificeren. Doe dit door ze allemaal beurtelings te openen in de beheerdersschermen en de URL te controleren op hun bewerkingsscherm. De URL bevat de tekst 'post = X', waarbij X de unieke ID van de pagina is. Negeer het feit dat er staat 'post' niet 'pagina' (pagina's zijn eigenlijk een soort bericht) en gebruik die ID om je stijl te richten.
In mijn site zijn de ID's van de pagina's op het hoogste niveau met kinderen 5 en 17, en de pagina's zonder kinderen hebben ID's van 146, 701, 703, 733 en 735. Ik ga één kleur gebruiken voor elk van de twee hiërarchische secties en een andere voor de pagina's zonder kinderen. Als uw pagina's allemaal in secties zijn, kunt u voor elke sectie een andere kleur gebruiken.
Open de stylesheet van je thema en voeg de volgende CSS toe:
.page-id-5 h1, .parent-pageid-5 h1 color: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 color: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Opmerking: u moet de post- en bovenliggende ID's aanpassen aan uw eigen site en wellicht wilt u de kleuren aanpassen aan uw ontwerp.
Bewaar nu uw stylesheet en bekijk uw site. Mijn site gebruikt de kleuren in elke sectie. Hier is een pagina zonder een hiërarchie:
En een pagina op het hoogste niveau:
Dit is een kind van die pagina op het hoogste niveau:
Er zijn echter een aantal problemen met deze aanpak. De eerste is dat ik handmatig klassen moest toevoegen voor elk van de pagina's op het hoogste niveau, wat betekent dat iemand in de toekomst meer secties of pagina's op het hoogste niveau aan mijn site toevoegt, of een van mijn pagina's op het hoogste niveau verplaatst naar een andere plaats in het hiërarchie, zal er geen stijl voor hen zijn. De tweede is dat dit alleen werkt voor directe kinderen van mijn pagina's op het hoogste niveau. Geen van mijn styling wordt toegepast op kleinkinderen van de pagina's.
Dit betekent dat als uw site een hiërarchische structuur op meerdere niveaus heeft, deze benadering zeer moeilijk te implementeren is, omdat u kinderen van alle kinderen van uw hoogste-niveaupagina's moet targeten. Onmogelijk als er regelmatig nieuwe pagina's worden toegevoegd!
Dus ik heb een alternatieve methode nodig, dit is om categorieën te gebruiken.
WordPress wijst standaard geen categorieën toe aan pagina's, maar u kunt eenvoudig categorieën toevoegen aan pagina's met een functie. Om dit te doen gebruikt u de register_taxonomy_for_object_type () functie, die in deze zelfstudie wordt onderzocht over het toewijzen van categorieën aan bijlagen.
Open uw thema's functions.php bestand, of als het nog geen bestand heeft, maak er dan een aan. Voeg het volgende toe:
function tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Hiermee wordt de 'categorie' taxonomie voor de 'pagina' objecttype, wat betekent dat u categorieën aan pagina's kunt toewijzen.
Dit betekent echter niet dat de body_class () tag voert de categorie uit als een van de klassen op een pagina met categorieën, omdat pagina's standaard geen categorieën hebben.
U kunt dit wijzigen door een functie te schrijven en deze te koppelen aan de body_class filterhaak. Nogmaals in uw functiesbestand, voeg dit toe:
function tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ categorieën als $ categorie) $ classes [] = 'category-'. $ Category-> slug; retourneer $ klassen; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Hiermee wordt een functie gemaakt met de naam tutsplus_add_categories_to_body_class () met de variabele $ klassen als object. Het controleert of we op een pagina staan en zo ja, wordt een variabele aangemaakt $ categorieën die alle categorieën bevat waarin de pagina zich bevindt. Vervolgens wordt voor elke categorie de categorie slug toegevoegd (voorafgegaan door 'categorie-' voor consistentie) naar de $ klassen array en geeft die terug. Eindelijk door de functie aan de te koppelen body_class filter, het voegt de uitvoerarray van slugs toe aan de klassen die worden uitgevoerd door de body_class () sjabloon tag.
Probeer nu enkele categorieën toe te voegen aan de pagina's van uw site om deze secties te geven. Ik voeg een sectie 1, sectie 2 en sectie 3 toe. Zorg ervoor dat elke pagina in slechts één sectie staat.
Hier ziet u hoe mijn pagina's in de beheerdersschermen worden weergegeven met toegevoegde categorieën:
De volgende stap is om een stijl toe te voegen aan doelpagina's in elke sectie. Ik ga de kopkleur niet veranderen zoals ik dat al deed met de paginahiërarchie. In plaats daarvan voeg ik een rand toe.
Voeg in het stylesheet van uw thema het volgende toe (of iets dergelijks met behulp van de slugs voor uw categorieën en de kleuren die u gebruikt):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; opvulling: 0,5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; opvulling: 0,5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; opvulling: 0,5em;
Bewaar nu uw stylesheet en controleer uw pagina's.
Hier is een pagina in deel 1:
Als u uw site controleert, ziet u dat elke pagina waaraan u een van de categorieën met een gerichte stijl heeft toegewezen, de juiste stijl heeft, ongeacht waar deze zich in de paginahiërarchie bevindt. Dit geeft u meer controle over de vormgeving en de mogelijkheid om secties van een site te stijlen met een hiërarchie op meerdere niveaus.
Het andere voordeel van deze op categorieën gebaseerde aanpak is dat u deze kunt gebruiken voor pagina's en berichten op uw site: dus als u al op categorieën gebaseerde styling voor uw blogberichten hebt gebruikt, kunt u dit ook eenvoudig op uw statische pagina's toepassen.
Als uw site is gebaseerd op een hiërarchische structuur van pagina's, heeft deze waarschijnlijk secties die u mogelijk een andere identiteit wilt geven..
In deze zelfstudie hebt u twee manieren geleerd om op stijlen in verschillende secties van uw site te targeten.
Eerst gebruikte je de paginahiërarchie, wat het voordeel heeft dat je werkt met standaard WordPress-instellingen, maar het nadeel van niet werken met een hiërarchie die meer dan twee niveaus diep is.
Eindelijk heb je geleerd om categorieën toe te passen op pagina's, categorieën toe te voegen aan de body_class () tag voor pagina's en schrijf vervolgens CSS-targeting op de klassen die WordPress uitvoert.
