Wat je gaat creëren

In de vorige zelfstudie heb ik je laten zien hoe je de berichten op je hoofdpagina op basis van hun categorie vormgeeft, waarbij je kleurcodering per categorie maakt.

Veel sites die deze techniek gebruiken, gaan ook door met het toevoegen van verschillende stijlen aan elk gedeelte van hun site, op een manier die overeenkomt met de vormgeving op de hoofdblogpagina of startpagina. U kunt gewoon een eenvoudig kleurenschema gebruiken of een geheel andere stijl toevoegen aan elke sectie, misschien met een ander logo of huisstijl voor verschillende delen van uw organisatie, of zelfs een andere lay-out.

Een voorbeeld is de London Times-website, die voor elk gedeelte van de site een andere kleur gebruikt. De voorpagina gebruikt deze kleuren in een banner boven elk bericht, zoals weergegeven in de schermafbeelding:

En als u verder de site induikt, heeft elke sectie zijn eigen kleur:

In deze zelfstudie werken we met de stijl die is toegevoegd aan de startpagina in de vorige zelfstudie en voegt een vergelijkbare stijl toe aan elk categoriearchief. We zullen de kleur van de posttitels en de archieftitel zelf aanpassen.

Wat je nodig hebt

Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:

• een ontwikkelingsinstallatie van WordPress
• een code-editor

Als u al een thema heeft waarop u deze techniek wilt gebruiken, werkt u aan de stylesheet van uw thema. Ik ga een kindthema maken van het Twenty Fifteen-thema en de stylesheet bewerken in mijn kindthema.

Uw site zal waarschijnlijk al gevuld zijn met berichten; zodat mijn site wat berichten bevat. Ik ga de testgegevens van WordPress-thema downloaden.

Als je de eerdere zelfstudie al hebt gevolgd en ook op categorieën gebaseerde styling toevoegt aan je hoofdblogpagina, kun je het thema uit die zelfstudie als uitgangspunt gebruiken - dit is wat ik ga doen. Je kunt ook werken met je bestaande thema of een nieuw kindenthema van Twenty Fifteen maken.

Het thema maken

Als u werkt met uw eigen thema of die uit de vorige zelfstudie, kunt u dit gedeelte overslaan, maar hier is wat u moet 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-berichten-by-categorie.

Maak in die map een leeg CSS-bestand met de naam style.css en voeg het volgende toe:

/ * Theme Name: Tuts + Style Posts per Category Theme URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beschrijving: Theme om tuts te ondersteunen + tutorial over het stijlen van posts per categorie. 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.

De gegevens importeren

Als uw site al berichten bevat, kunt u deze sectie overslaan, maar hier ziet u hoe u de testgegevens van de themafunctie importeert in uw site.

1. Ga naar de Theme Unit Test-pagina en download de xml bestand dat is gekoppeld aan.
2. Ga op uw site naar Hulpmiddelen> Importeren. Klik op de WordPress link.
3. Klik op de Kies bestand knop en selecteer het bestand dat u zojuist hebt gedownload. Klik op de Upload bestand en importeer knop.
4. Volg de aanwijzingen en wacht tot WordPress de gegevens importeert.

Stijlen identificeren om te targeten

WordPress heeft een aantal sjabloontags die klassen voor uw pagina's en berichten uitvoeren wanneer ze in de browser worden bekeken. Dit zijn:

• body_class (), welke u toevoegt aan de lichaam tag in een thema's header.php bestand: het voegt klassen toe aan de lichaam element volgens het type pagina dat wordt bekeken.
• post_class (), die op een vergelijkbare manier werkt, maar wordt gebruikt met berichten in de lus.

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 categoriepagina'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 de lichaam tag heeft klassen die ons vertellen wat voor soort pagina dit is:

Deze klassen vertellen ons dat we onder meer op een categoriearchiefpagina voor de opmaakcategorie staan. De klas die we gaan targeten is de categorie-markup klasse.

Styling van posttitels in de archiveringslijst

We beginnen met het toevoegen van een kleur aan de berichttitels op basis van hun categorie. Voeg dit toe aan de stylesheet van je thema:

/ * titels in archiefpagina's plaatsen * / .archive.category-markup .entry-title a: link, .blog .category-markup .entry-title a: visited color: # 6cd2c8;  .archive.category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: visited color: # e5572f;  .archive.category-template-2 .entry-title a: hover, .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: visited color: # 933bbe;  .archive.category-media-2 .entry-title a: hover, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Misschien wilt u de kleuren wijzigen zodat ze werken met uw ontwerp.

Bewaar nu uw stylesheet en open een categoriepagina in uw browser. De pagina Mijn markup-categorie bevat nu gekleurde berichttitels:

En mijn Media-archief heeft posttitels van een andere kleur:

Merk op dat in de screenshots er één bericht is dat in beide archieven wordt weergegeven, omdat het in veel categorieën staat. Daarom is het belangrijk om de klasse te targeten voor de categorie in de body-tag van je archiefpagina, en niet alleen om categorieklassen te targeten voor posts in de lus.

Laten we nu ook een rand toevoegen. Voeg dit toe aan je stylesheet:

.archive.category-markup .entry-title padding-top: 0.5em; border-top: 2px # 6cd2c8 vast;  .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 solide; 

Dit voegt wat opvulling boven de berichttitels toe, evenals een rand in dezelfde kleur als de tekst. Zo ziet het eruit op mijn pagina Sjabloonarchief:

De archieftitel stylen

Naast het stylen van de afzonderlijke berichtvermeldingen, wil ik mijn kleur toevoegen aan de titel van het archief zelf.

Eerst identificeer ik de elementen en klassen om te targeten, met behulp van ontwikkelaarstools:

De archieftitel wordt als volgt uitgevoerd:

 
Categorie: sjabloon
 
 
Posts met sjabloongerelateerde tests
 
 

Dus we moeten ons richten op de pagina hoofd en pagina titel klassen, evenals de klassen op de lichaam tag voor het archief.

Voeg in uw stylesheet het volgende toe:

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

Dit voegt de kleur toe aan de archieftitel:

Laten we nu de kleur van de te matchen rand aanpassen. Voeg dit toe aan je stylesheet:

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

Hiermee wijzigt u de kleur van de rand die overeenkomt:

Samenvatting

Het gebruik van de klassen die door WordPress zijn gegenereerd om categoriearchiefpagina's te targeten en ze te stijlen, omvat het identificeren van de uitvoerklassen en vervolgens het schrijven van CSS om ze te targeten.

In deze zelfstudie hebt u geleerd hoe u dit kunt doen om met kleur gecodeerde gedeelten van uw site per categorie te maken.

Je zou dit verder kunnen nemen, bijvoorbeeld door:

• gebruik van uw sectiekleuren voor andere elementen op de pagina, zoals de titel van de site en het navigatiemenu
• achtergronden toevoegen in sectiekleuren, bijvoorbeeld op de voettekst
• gebruik van verschillende achtergrondafbeeldingen voor elke sectie op belangrijke plaatsen
• wijzigen van de lay-out voor verschillende delen van de site
  

Er zijn veel mogelijkheden, en als je deze techniek tot het uiterste toepast, kun je verschillende secties van je site maken die er compleet anders uitzien, waardoor je de indruk hebt volledig afzonderlijke sites te hebben.