Share
Ce veți creaÎn tutorialul anterior i-am arătat cum să modelați postările de pe pagina dvs. principală de blog în funcție de categoria lor, creând codarea culorilor pe categorii.
O mulțime de site-uri care utilizează această tehnică o ia și mai mult prin adăugarea unui stil distinct pentru fiecare secțiune a site-ului lor, într-un mod care colaborează cu stilul pe pagina principală de blog sau pe pagina principală. Puteți folosi doar o schemă de culori simplă sau puteți adăuga un stil complet diferit fiecărei secțiuni, poate cu un logo sau cu un brand diferit pentru diferite părți ale organizației dvs. sau chiar cu un alt aspect.
Un exemplu este site-ul London Times, care utilizează 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:
În acest tutorial vom lucra cu styling-ul adăugat la pagina de pornire din tutorialul anterior și vom adăuga un stil asemănător arhivelor din fiecare categorie. Vom modifica culoarea titlurilor postului și titlul arhivei în sine.
Pentru a urma acest tutorial, veți avea nevoie de:
Dacă aveți deja o temă pe care doriți să folosiț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.
Dacă ați urmat deja tutorialul anterior și adăugați styling bazat pe categorii și pe pagina principală de blog, puteți folosi ca temă tema din acest tutorial - asta voi face. Alternativ, puteți să lucrați cu tema existentă sau să creați o temă nouă a copilului din Twenty Fifteen.
Dacă lucrați cu propria temă sau cu cea a tutorialului anterior, puteți trece peste această secțiune, dar iată ce trebuie să faceți pentru a crea o temă copilărească de douăzeci și cincizeci.
Î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:
Accentsconagua
/ * 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.
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..
xml fișierul la care se face legătura.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 într-un browser o pagină a categoriilor site-ului dvs. și utilizați instrumentele de dezvoltator pentru a inspecta HTML-ul de ieșire, veți vedea că body_class () șablonul de șablon a adăugat o mulțime de clase la pagina dvs..
Aici corp eticheta are clase care ne spun ce fel de pagină este:
Aceste clase ne spun că, printre altele, suntem pe o pagină de arhivă a categoriei pentru categoria de marcare. Clasa pe care o vom viza este categorie-markup clasă.
Vom începe prin adăugarea unei culori la titlurile posturilor în funcție de categoria lor. În foaia de stil a temei, adăugați aceasta:
/ * postarea titlurilor în paginile de arhivă * / .archive.category-markup .entry-title a: link, .blog .categorie-markup .entry-title a: vizitat culoare: # 6cd2c8; . arhivă.categoria-marcaj .entry-title a: hover, .blog .categorizare-marcaj .entry-title a: activ culoare: # 120e5b; .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: vizitat culoare: # e5572f; .archive.category-template-2 .entry-title a: hover, .archive.category-template-2 .entry-title a: activ culoare: # 120e5b; .archive.category-media-2 .entry-title a: link, .archive.category-media-2. titlu-titlu a: vizitat culoare: # 933bbe; .archive.category-media-2. titlu-titlu: hover, .archive.category-media-2 .entry-title a: activ culoare: # 120e5b;
S-ar putea să doriți să schimbați culorile astfel încât acestea să funcționeze cu designul.
Acum salvați foaia de stil și deschideți o pagină de categorii în browserul dvs. Pagina mea de categorii de marcaj are acum titluri colorate:
Și arhiva mea media are titluri de post cu o altă culoare:
Rețineți că în capturile de ecran există o postare care apare în ambele arhive, deoarece este în multe categorii. De aceea este important să vizați clasa pentru categoria din eticheta corporală a paginii dvs. de arhivă și nu doar clasele de categorii țintă pentru posturile din buclă.
Acum, să adăugăm și o frontieră. Adăugați acest lucru în foaia dvs. de stil:
.arhiva.categoria-marcaj .entry-title padding-top: 0.5em; frontieră: 2px # 6cd2c8 solid; .archive.category-template-2 .entry-title umplutură-top: 0.5em; frontală de sus: 2px # e5572f solid; .archive.category-media-2. titlu-titlu padding-top: 0.5em; frontieră: 2px # 933bbe solid;
Acest lucru adaugă o umplutură deasupra titlurilor postului, precum și o margine în aceeași culoare ca și textul. Iată cum arată în pagina mea de arhivă Template:
Pe lângă stilizarea înregistrărilor postale individuale, vreau să adaug culoarea mea la titlul arhivei în sine.
Mai întâi, voi identifica elementele și clasele pe care să le vizați, utilizând instrumentele de dezvoltator:
Titlul arhivării se emite după cum urmează:
Categorie: Șablon
Postări cu teste legate de șablon
Așa că va trebui să vizăm Pagina-header și titlul paginii clase, precum și cursurile de la corp tag pentru arhiva.
În foaia dvs. de stil, adăugați următoarele:
.arhiva.categoria-marcare .page-header .page-title culoare: # 6cd2c8; .archive.category-template-2 .page-header .page-title culoare: # e5572f; .archive.category-media-2 .page-header .page-title culoare: # 933bbe;
Aceasta adaugă culoarea titlului de arhivă:
Acum, haideți să schimbați culoarea frontierei pentru a se potrivi. Adăugați acest lucru în foaia dvs. de stil:
.arhiva.categoria-marcare .page-header border-left: 7px solid # 6cd2c8; .archive.category-template-2 .page-header frontieră-stânga: 7px solid # e5572f; .archive.category-media-2 .page-header margine-stanga: 7px solid # 933bbe;
Aceasta schimbă culoarea frontierei astfel:
Folosind clasele generate de WordPress pentru a viza paginile de arhivă din categorie și stilul acestora implică identificarea claselor de ieșire și apoi scrierea CSS pentru a le direcționa.
În acest tutorial ați învățat cum să faceți acest lucru pentru a crea secțiuni codate în culori ale site-ului dvs. pe categorii.
Puteți lua acest lucru în continuare, de exemplu prin:
Există o mulțime de posibilități și, dacă luați această tehnică la limita cea mai îndepărtată, puteți să creați diferite secțiuni ale site-ului dvs. care arată complet diferite unul de celălalt, dând impresia de a avea site-uri complet separate.
