Mesaje de stil pe categorii pe blogul tau principal

Ce veți crea

Site-urile mari de știri folosesc uneori un anumit stil pentru a face diferența între secțiunile site-ului lor. Adesea aceasta are forma unor culori diferite pentru fiecare secțiune.

Un exemplu bun este site-ul London Times, care folosește o culoare diferită pentru fiecare secțiune a site-ului său. Prima pagină folosește aceste culori într-un banner deasupra fiecărei postări, după cum se arată în captura de ecran:

Și pe măsură ce navigați mai departe în site, fiecare secțiune are propria culoare:

Folosirea stilului pentru secțiunile de pe site-ul dvs. poate face ca pagina dvs. de pornire să devină mai atrăgătoare și să ajute vizitatorii să găsească conținut în categoriile pe care le citesc în mod regulat. În acest tutorial vă voi arăta cum să vizați stilurile furnizate de WordPress pentru a face acest lucru, stilizând postările din pagina principală de blog după categorie.

Ce ai nevoie

Pentru a urma acest tutorial, veți avea nevoie de:

o instalare de dezvoltare a WordPress
un editor de cod

Dacă aveți deja o temă în care doriți să utilizați această tehnică, veți lucra la foaia de stil a temei. Am de gând să creez o temă de copil a temei Douăzeci și cincisprezece și să editez foaia de stil în tema copilului meu.

Site-ul dvs. probabil va fi deja populat cu postări; astfel încât site-ul meu are unele posturi am de gând să descarce WordPress tematice date de testare.

Crearea temei

Dacă lucrați cu tema proprie, puteți sări peste această secțiune, dar unde este ceea ce trebuie să faceți pentru a crea o temă de copil a lui Twenty Fifteen.

În site-ul dvs. wp-content / teme folder, creați un dosar nou și dați-i un nume. Îi sun pe a mea tutsplus-style-posturi-by categorii.

În interiorul acelui dosar, creați un fișier gol CSS numit style.css și adăugați următoarele:

/ * Tema Nume: Tuts + Mesaje de stil pe categorii URI temă: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descriere: Tema pentru a sprijini tuts + tutorial la posturile de styling pe categorii. Tema copilului pentru tema Twenty Fifteen. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Format: twentyfifteen Versiune: 1.0 * / @import url ("... /twentyfifteen/style.css");

Acest lucru îi spune WordPress tot ce trebuie să știe pentru a crea o temă copil și a importa foaia de stil de la Twenty Fifteen. Probabil doriți să adăugați propriul dvs. nume și detalii în locul mea, dar asta vă oferă o idee.

Acum activați tema.

Importul datelor

Dacă site-ul dvs. are deja postări, puteți trece peste această secțiune, dar iată cum puteți importa datele de testare a unității tematice în site-ul dvs..

Accesați pagina de testare a unității tematice și descărcați xml fișierul la care se face legătura.
În site-ul dvs., mergeți la Instrumente> Import. Faceți clic pe WordPress legătură.
Faceți clic pe Alege fișierul și selectați fișierul pe care tocmai l-ați descărcat. Apasă pe Încărcați fișierul și importați buton.
Urmați instrucțiunile și așteptați ca WordPress să importe datele.

Identificarea stilurilor pentru a viza

WordPress are câteva etichete de șabloane care oferă clase de ieșire pentru paginile dvs. și postări atunci când sunt vizualizate în browser. Acestea sunt:

body_class (), pe care îl adăugați la corp etichetă într-o temă header.php fișier: adaugă clase la corp element în funcție de tipul de pagină vizionat.
post_class (), care funcționează într-un mod similar, dar este utilizat cu posturi în buclă.

Dacă lucrați cu propria temă și nu ați adăugat încă aceste etichete șablon, va trebui să faceți acest lucru. Acest tutorial despre lucrul cu clasele și ID-urile generate de WordPress vă arată cum.

Dacă lucrați cu un copil din tema Douăzeci și cincisprezece, aceste etichete vor fi fost deja adăugate la tema Twenty Fifteen, deci nu trebuie să faceți nimic.

Dacă deschideți pagina de pornire a site-ului într-un browser și utilizați instrumentele de dezvoltator pentru a inspecta HTML-ul de ieșire, veți vedea că aceste etichete au adăugat o mulțime de clase în pagina dvs..

Iată ce obțin atunci când văd pagina de pornire a site-ului meu:

Eticheta corporală este afișată ca:

Acasă și blogul clasele îmi spun că aceasta este pagina de pornire a site-ului și că este pagina principală de blog. Pot folosi aceste clase pentru a viza CSS în pagina de pornire.

Ceva similar se întâmplă cu postările:

Articolul pe care l-am selectat este etichetat ca:

Sunt multe clase! Acestea ne spun câteva lucruri despre post: ID-ul, tipul postului, statutul, formatul, categoria și etichetele. Puteți utiliza toate acestea pentru a viza stilul tău. Ce vom folosi aici este categorie-markup clasă.

Modelarea posturilor

Acum că am identificat ce clase trebuie să țintesc, este timpul să adăugați ceva stil. Mă voi păstra subtil și voi schimba doar culoarea textului titlului fiecărei postări, care se află în interiorul unui link într-un

etichetă.

Deschideți foaia de stil a temei și adăugați aceasta:

.blog .category-markup .entry-title a: link, .blog .categorizare-marcare .entry-title a: vizitat culoare: # 6cd2c8;  .blog .categoria-marcaj .entry-title a: hover, .blog .categorizare-marcaj .entry-title a: activ culoare: # 120e5b;

Am folosit o nuanță de cyan pentru legătură și vizitat state, și un marin pentru planare și activ afirmă: puteți schimba aceste culori în funcție de designul dvs..

Acum salvați foaia de stil și actualizați pagina de blog. Veți vedea că postările din categoria pe care ați vizat-o acum au o altă culoare:

Acum adăugați alte culori pentru celelalte categorii din blogul dvs.:

.blog .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: vizitat culoare: # e5572f;  .blog .category-template-2 .entry-title a: hover, .blog .categorie-șablon-2. titlu-titlu a: activ culoare: # 120e5b;  .blog .category-media-2 .entry-title a: link, .blog .category-media-2. titlu-titlu a: vizitat culoare: # 933bbe;  .blog .category-media-2 .entry-title a: hover, .blog .category-media-2. titlu-titlu a: activ culoare: # 120e5b;

Din nou, reglați culorile pentru a se potrivi brandului dvs. Veți avea acum o gamă de culori pentru titlurile dvs. postale.

Dacă doriți, puteți adăuga frontiere, fie în loc sau ca și schimbarea culorii titlurilor:

.blog .category-markup. titlu-titlu padding-top: 0.5em; frontieră: 2px # 6cd2c8 solid;  .blog .category-template-2. titlu-titlu padding-top: 0.5em; frontală de sus: 2px # e5572f solid;  .blog .category-media-2. titlu-titlu padding-top: 0.5em; frontieră: 2px # 933bbe solid;

Acum postările mele au o limită subtilă, precum și schimbarea culorilor pentru titlul postului:

Acest lucru ghidează vizitatorii spre diferite categorii de pe site-ul meu, fără a fi prea fricos.

rezumat

Deoarece WordPress ne dă body_class () și post_class () șabloanele șablonului, este posibil să vizați o anumită pagină pe site-ul dvs. și apoi să vizați postările din fiecare categorie și să le stylizați în mod diferit.

În acest tutorial ați învățat cum să identificați ce clase să vizați și să adăugați stil pentru fiecare categorie, pentru a oferi vizitatorilor câteva indicii vizuale despre structura site-ului dvs..

În următorul tutorial vă voi arăta cum să extindeți acest aspect și să îl utilizați pentru a modela diferit secțiunile diferite ale site-ului dvs..

Cod