Share
Într-un tutorial mai devreme, i-am arătat cum să modelați categoriile în site-ul dvs. în mod diferit, astfel încât dacă site-ul dvs. are secțiuni pentru fiecare categorie de post, le puteți face să arate destul de diferite.
Dar ce se întâmplă dacă site-ul dvs. se bazează pe pagini statice? Nu este neobișnuit să vedeți site-uri mari care se bazează pe o structură ierarhică a paginii, astfel încât să puteți utiliza aceste tehnici pentru un astfel de site?
Raspunsul este da. WordPress vă va oferi câteva clase CSS referitoare la structura paginii site-ului dvs. pe care o puteți utiliza pentru a viza stilul și pentru a crea secțiuni pentru site-ul dvs. bazate pe pagină care arată foarte diferit.
În acest tutorial vom lucra cu un site bazat pe pagini ierarhice și va modela fiecare secțiune a site-ului folosind o culoare diferită pentru fiecare secțiune. Vom analiza, de asemenea, o tehnică alternativă bazată pe adăugarea de categorii în pagini.
Pentru a urma acest tutorial, veți avea nevoie de:
Dacă aveți deja o temă pe care doriți să utilizați această tehnică, veți lucra la fișierul de stiluri și funcții al temei. Am de gând să creez o temă pentru copil a temei Twenty Fifteen și să editez fișierul de stil și fișierele de funcții î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ă 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-pagini-cu-secțiune.
În interiorul acelui dosar, creați un fișier gol CSS numit style.css și adăugați următoarele:
Accentsconagua
/ * Tema Nume: Tuts + Stil Pagini pe Tema URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Descriere: Tema pentru a sprijini tuts + tutorial pe paginile de styling diferit în fiecare secțiune a unui site. 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 setate pagini, puteți sări 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.Implicit, WordPress va atribui un meniu de navigare care conține toate categoriile de bloguri în meniul principal și va seta pagina de blog ca pagină de pornire. Pe măsură ce lucrăm cu pagini statice, trebuie să le schimbați în administratorul WordPress.
WordPress utilizează body_class () șablon pentru etichete în funcție de tipul paginii afișate. Adăugați această etichetă în tema proprie header.php fișier: adaugă clase la corp element în funcție de tipul de pagină vizionat.
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 una dintre paginile site-ului dvs. într-un browser ș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 am o pagină copil deschisă:
corp elementul se transmite cu un număr de clase:
Acestea spun browser-ului că suntem pe o pagină statică, ID-ul paginii, faptul că este un copil și de ce este copil și șablon de pagină, printre altele.
Vom folosi două din aceste clase pentru a viza pagini din diferite părți ale site-ului: cele referitoare la ID-ul paginii și pagina părinte.
Pentru a viza pagini dintr-o secțiune a unui site ierarhic, folosim două clase: ID-ul paginii pentru pagina de nivel superior și codul părintelui paginii pentru paginile copil.
Mai întâi trebuie să identificați codurile paginilor dvs. de nivel superior. Faceți acest lucru prin deschiderea fiecăruia pe rând în ecranele de administrare și verificând adresa URL pentru ecranul de editare. Adresa URL va conține textul "post = X", unde X este codul unic al paginii. Ignorați faptul că se afișează "post" nu "pagină" (paginile sunt de fapt un tip de postare) și utilizați acel cod pentru direcționarea stilului.
În site-ul meu ID-urile paginilor de nivel superior cu copii sunt de 5 și 17, iar paginile fără copii au ID-uri de 146, 701, 703, 733 și 735. Voi folosi o singură culoare pentru fiecare dintre cele două secțiuni ierarhice și altul pentru paginile fără copii. Dacă paginile dvs. sunt toate în secțiuni, puteți utiliza o culoare diferită pentru fiecare secțiune.
Deschideți foaia de stil a temei și adăugați următoarea CSS la ea:
.pagina-id-5 h1, .parent-pageid-5 h1 culoare: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 culoare: # e5572f; .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 culoare: # 933bbe;
Notă: va trebui să schimbați ID-urile de postare și părinte în conformitate cu site-ul dvs. și este posibil să doriți să schimbați culorile pentru a se potrivi designului dvs..
Acum salvați foaia de stil și aruncați o privire la site-ul dvs. Site-ul meu utilizează culorile din fiecare secțiune. Iată o pagină fără o ierarhie:
Și o pagină de nivel superior:
Iată un copil al acestei pagini de nivel superior:
Cu toate acestea, există o serie de probleme cu această abordare. Primul este că trebuie să adaug manual clase pentru fiecare dintre paginile de nivel superior, ceea ce înseamnă că dacă cineva adaugă mai multe secțiuni sau pagini de nivel superior pe site-ul meu în viitor sau dacă mișcă una dintre paginile mele de nivel superior într-un alt loc în ierarhia, nu va exista stil pentru ei. Al doilea este că acest lucru funcționează numai pentru copiii direcți ai paginilor mele de nivel superior. Nici unul din stilul meu nu este aplicat nepoților paginilor.
Aceasta înseamnă că, dacă site-ul dvs. are o ierarhie pe mai multe niveluri, această abordare va fi foarte dificil de implementat, deoarece ar trebui să vizați copiii fiecăruia dintre copiii de pe paginile dvs. de nivel superior. Imposibilă dacă se adaugă periodic noi pagini!
Așadar, am nevoie de o metodă alternativă, care este de a folosi categorii.
Implicit, WordPress nu atribuie categorii paginilor, dar puteți adăuga cu ușurință categorii în pagini cu o funcție. Pentru a face acest lucru, utilizați register_taxonomy_for_object_type () care este explorată în acest tutorial privind atribuirea categoriilor atașamentelor.
Deschideți tema functions.php fișier, sau dacă nu are deja unul, creați unul. Adăugați următoarele:
funcția tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('categoria', 'pagina'); add_action ('init', 'tutsplus_add_categories_to_pages');Aceasta va adăuga 'categorie' taxonomia la 'pagină' tipul de obiect, ceea ce înseamnă că puteți atribui categorii paginilor.
Cu toate acestea, acest lucru nu înseamnă că body_class () tag va scoate categoria ca fiind una dintre clasele unei pagini cu categorii, deoarece paginile nu au categorii în mod implicit.
Puteți schimba acest lucru scriind o funcție și atașând-o la body_class cârlig de filtrare. Din nou în fișierul de funcții, adăugați aceasta:
funcția tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach (categoriile $ ca categorie $) $ classes [] = = 'category-'. $ Categoria-> Slug; returnează clasele $; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Aceasta creează o funcție numită tutsplus_add_categories_to_body_class () cu variabila clase de $ ca obiect al său. Verifică dacă suntem pe o pagină și, dacă da, creează o variabilă numită categorii $ care deține toate categoriile în care se află pagina. Apoi, pentru fiecare categorie, se adaugă categoria slug (prefixată cu 'categorie-' pentru consecvență) clase de $ și le returnează. În final, prin cuplarea funcției la body_class filtru, acesta adaugă matricea de ieșiri de iepuri la ieșirile de clase de către body_class () șablon de șablon.
Încercați să adăugați câteva categorii în paginile site-ului dvs. pentru a le oferi secțiuni. Adăugez o categorie din secțiunea 1, secțiunea 2 și secțiunea 3. Asigurați-vă că fiecare pagină se află într-o singură secțiune.
Iată cum arată paginile mele în ecranele de administrare cu categorii adăugate:
Următorul pas este să adăugați un stil pentru paginile țintă din fiecare secțiune. Nu voi schimba culoarea titlului așa cum am făcut deja folosind ierarhia paginilor. În schimb, voi adăuga o frontieră.
În foaia de stil a temei dvs., adăugați următoarele (sau ceva similar folosind gogoșii pentru categoriile dvs. și culorile pe care le utilizați):
.page.category-section-1 h1 margin-bottom: 2px solid # 933bbe; umplutură: 0,5 mm; .page.category-section-2 h1 margin-bottom: 2px solid # 6cd2c8; umplutură: 0,5 mm; .page.category-section-3 h1 margin-bottom: 2px solid # e5572f; umplutură: 0,5 mm;
Acum salvați foaia de stil și verificați paginile.
Iată o pagină în secțiunea 1:
Dacă verificați site-ul dvs., veți descoperi că fiecare pagină pe care ați atribuit una dintre categoriile cu stil orientat va avea stilul corect, indiferent de locul în care se află în ierarhia paginilor. Acest lucru vă oferă un control mai bun asupra stilului și a capacității de a modela secțiunile unui site cu o ierarhie pe mai multe niveluri.
Celălalt avantaj al acestei abordări bazate pe categorii este că îl puteți utiliza pentru pagini și postări de pe site-ul dvs. Deci, dacă ați utilizat deja stilul bazat pe categorii pentru postările dvs. de pe blog, puteți să o aplicați cu ușurință și în paginile dvs. statice.
Dacă site-ul dvs. se bazează pe o structură ierarhică de pagini, atunci probabil va avea secțiuni pe care ați putea dori să le dați o identitate distinctă.
În acest tutorial ați învățat două moduri de a viza stilul la paginile din diferite secțiuni ale site-ului dvs..
Mai întâi ai folosit ierarhia paginilor, care are avantajul de a lucra cu setările WordPress implicite, dar dezavantajul de a nu lucra cu o ierarhie mai mare de două niveluri profunde.
În sfârșit, ați învățat cum să aplicați categorii în pagini, să adăugați categorii la pagini body_class () eticheta pentru pagini și apoi scrieți CSS care vizează clasele pe care le dă WordPress.
