Share
Wat je gaat creërenGrote op nieuws gebaseerde sites gebruiken soms een vorm van styling om onderscheid te maken tussen de secties van hun site. Vaak heeft dit de vorm van verschillende kleuren voor elke sectie.
Een goed voorbeeld is de London Times-website, die voor elke sectie van zijn 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:
Het gebruik van styling voor de secties van uw site, zoals deze, kan uw startpagina aantrekkelijker maken en bezoekers helpen inhoud te vinden in categorieën die zij regelmatig lezen. In deze tutorial laat ik je zien hoe je stijlen aanpast die door WordPress worden geboden om dit te doen, door de posts op je hoofdblog-pagina te stylen op categorie.
Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:
Als u al een thema heeft waarin 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 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-berichten-by-categorie.
Maak in die map een leeg CSS-bestand met de naam style.css en voeg het volgende toe:
Accentsconagua
/ * 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.
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.
xml bestand dat is gekoppeld aan.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 de startpagina van uw site opent in een browser en ontwikkelaarstools gebruikt om de uitvoer-HTML te inspecteren, ziet u dat deze tags een aantal klassen aan uw pagina hebben toegevoegd.
Dit is wat ik krijg als ik de startpagina van mijn site bekijk:
De body-tag wordt uitgevoerd als:
De huis en blog klassen vertellen me dat dit de startpagina van de site is en dat dit de belangrijkste blogpagina is. Ik kan deze klassen gebruiken om CSS op mijn startpagina te targeten.
Iets soortgelijks gebeurt met berichten:
Het artikel dat ik heb geselecteerd, is getagd als:
Dat zijn veel klassen! Deze vertellen ons een paar dingen over de post: zijn ID, berichttype, status, formaat, categorie en tags. U kunt al deze gebruiken om uw styling te richten. Wat we hier gaan gebruiken is de categorie-markup klasse.
Nu ik heb vastgesteld welke klassen ik moet targeten, is het tijd om wat styling toe te voegen. Ik ga het subtiel houden en alleen de tekstkleur van de titel van elke post wijzigen, die in een link in a staat label.
Open de stylesheet van je thema en voeg deze toe:
.blog .category-markup .entry-title a: link, .blog .category-markup .entry-title a: visited color: # 6cd2c8; .blog .category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;
Ik heb een schaduw van cyaan gebruikt voor de link en bezocht staten, en een marine voor de zweven en actief Staten: u kunt deze wijzigen in kleuren die passen bij uw ontwerp.
Sla nu uw stylesheet op en vernieuw uw blogpagina. U ziet dat berichten met de categorie die u heeft getarget, nu een andere kleurkop hebben:
Voeg nu nog meer kleuren toe voor de andere categorieën in je blog:
.blog .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: visited color: # e5572f; .blog .category-template-2 .entry-title a: hover, .blog .category-template-2 .entry-title a: active color: # 120e5b; .blog .category-media-2 .entry-title a: link, .blog .category-media-2 .entry-title a: visited color: # 933bbe; .blog .category-media-2 .entry-title a: hover, .blog .category-media-2 .entry-title a: active color: # 120e5b;
Pas opnieuw de kleuren aan uw merk aan. Je hebt nu een reeks kleuren voor je posttitels.
Als je wilt kun je randen toevoegen, in plaats van of net zo goed als het veranderen van de kleur van de titels:
.blog .category-markup .entry-title padding-top: 0.5em; border-top: 2px # 6cd2c8 vast; .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 solide;
Nu hebben mijn berichten een subtiele rand en de kleurverandering voor de berichttitel:
Dit leidt bezoekers naar verschillende categorieën op mijn site zonder te opzichtig te zijn.
Omdat WordPress ons de body_class () en post_class () sjabloontags is het mogelijk om een specifieke pagina op uw site te targeten en vervolgens in elke categorie berichten te targeten en ze anders in te delen.
In deze tutorial heb je geleerd om te bepalen welke klassen je wilt targeten en om styling toe te voegen voor elke categorie, om bezoekers visuele aanwijzingen te geven over de structuur van je site.
In de volgende tutorial laat ik je zien hoe je dit kunt uitbreiden en het gebruiken om de verschillende secties van je site anders in te richten.
