Crearea unui cadru pentru teme WordPress cu practica lor mâini
Tema și CSS sale
Pentru a începe, trebuie să facem codul de comanda în CSS. În cadrul meu, exista 2 componente CSS de bază: un fișier numit fișier style.css (obligatoriu) și director / css /. care este tot ceea ce este „legat“ la CSS pentru cadru meu. Fișierul style.css conține două secțiuni: definiția de subiecte și întrebări actuale de aspect și CSS parametrii mei. Vedere de ansamblu a fișierului style.css - adică:
După determinarea parametrilor temei vedeți trei linii cu @import. Aici, în această parte începe cele mai importante schimbări în CSS. fișier reset.css seturi „curate“ setările CSS. Am schimbat numele pentru a normalize.css din mai multe motive.
În primul rând. în loc de toate setările de afișare pentru a „benă“ pe stil neformatate, acest fișier creează un stil care este setat implicit în browser. De exemplu, standardul - acest lucru nu este tipul de font, și stabilește normalize.css caractere aldine.
Și în al doilea rând. acesta conține stilurile implicite pentru elemente bazate pe HTML5. că este necesar pentru a sprijini browsere mai vechi, în cazul în care nu există nici un suport pentru noi funcții.
Notă: În acest subiect, eu folosesc HTML5. Acesta funcționează în Firefox, Chrome, Safari, IE7-9.
Crearea CSS. Am stabilit stilul, care de obicei rămân aceleași de la site la site-ul: cum ar fi lățimea totală a containerului, stilurile mele de navigare, așa cum am loc bara laterală, etc. De asemenea, folosesc de obicei o frontieră și marjele care sunt multipli de 15, pentru punctele mele și lista de articole, asa ca pentru ei am prea o definiție de bază.
Ultimul lucru pe care am adăuga la master.css. - o clasă care face straturile de „auto-curățare“. Astfel, se elimină necesitatea de strat .clearfix.
Odată numit master.css. Eu numesc ultima piesă de puzzle noastre - ie.css. Aici vom avea tot felul de ajustări IE. În momentul de față, este doar un amendament la .group, și PNG. Amintiți-vă că secvența de import este foarte importantă, deoarece unele lucruri pot fi ignorate, iar modificările ulterioare pot crea confuzie în stilurile pe care le-am identificat deja.
functions.php
fișier functions.php este important, cu toate acestea, decât CSS. Aici vom adăuga toate caracteristicile comune pe care intenționăm să utilizăm întregul subiect, precum și toate definițiile pentru barele laterale, meniuri, etc. Am început cu două linii:
Aceasta este - două constante pe care le folosesc destul de des pe parcursul temei.
Primul - calea spre șablon; este convenabil să se refere la o temă fișiere. Eu folosesc „stylesheet_directory“ în loc de „template_directory“, pentru că dacă vom folosi tema ca părinte, „template_directory“ ia calea greșită (și anume, că, în loc de un mod subordonat).
A doua linie utilizează TEMPPATH. pentru a crea o cale spre folderul / imagini /, pe care le folosim, de asemenea, foarte des, fie în acest subiect sau temă, generate pe baza pe ea.
După aceste două linii pot adăuga suport pentru meniuri dinamice și 2 bare laterale cu widget-uri: prima - primar și secundar - Sidebar „doar în cazul“ (în cele mai multe cazuri, am folosi în subsol mea temă). În cele din urmă, am creat alte două funcții pe care le place găsit în mod regulat folosesc:
Primul afișează navigarea pe posturi, și care urmează să fie utilizate în afara buclei. Asta este, putem folosi pe orice pagină cu o listă de posturi (pagina de start, de căutare, orice model specific cu posturi).
A doua funcție creează o regiune de „Postul nu este găsit“, pe care le folosesc pe aproape fiecare șablon de pagină.
Desigur, nu există restricții privind numărul de funcții create. Aici este o simplă funcție pe care o folosesc de multe ori.
pagini șabloane
Aceasta este urmată de șablonul de pagină. Ne vom uita la pagina 4: header.php. footer.php. single.php și page.php. Restul - în pagini de fapt derivate sau șabloane individuale.
Antet și subsol
Se pare că fișierul nostru header.php:
Vei vedea că nu sunt prea multe lucruri în plus față de anunțurile noastre standard
pentru a vă asigura că tema noastră este compatibil cu HTML5, etc în corpul paginii a creat un antet de bază cu numele site-ului și bara de navigare laterală numit și a început „conținut“ parte, încheiat într-un #container strat predeterminat. Puteți vedea că modul meu de marcare corespunde cu cea dată CSS meu.
Notă: Nu vorbesc despre șablon sidebar.php. pentru că este la fel ca orice bara laterală standard: a verifica dacă o zonă de widget-uri este definită; - în cazul în care nu imprimă unele widget-uri implicite.
Același lucru este valabil și pentru footer nostru:
Am adus, practic 2 sfârșiturile de linie pentru a face codul mai frumoasă, închis stratul de conținut, apoi a început de subsol. Am inclus o bara laterală minor în subsol, așa cum fac eu de obicei, apoi a dat informații generale despre drepturile de autor, și a ajuns subiectul, acoperind toate etichetele deschise. Din nou, încerc să nu fac prea mult cu un subsol, deoarece acest cadru, ci pentru a crea o oportunitate de a adăuga informații în subsol, în cazul în care am nevoie.
Cod pentru unică și Page
Aceste fișiere sunt, de asemenea, destul de simplu. În fiecare dintre ele am încercat să elimine toate inutile, lăsând doar ceea ce vă așteptați să vedeți.
În single.php codul de fișier este:
Observați că nu folosesc navigație pentru posturi, am scris în functions.php. pentru că este un ciclu de „intern“, iar această funcție se poate comporta imprevizibil.
page.php șablon un pic mai scurt:
Din nou: am scris numai ceea ce este necesar. Nu există clase care nu sunt necesare sau informații. Paginile site-uri se concentreze pe conținut, așa că am încercat să simplifice acest model.
alte șabloane
Evident, nu pot descrie aici toate șabloanele de pagini; Vă sugerez să se uite la codul sursă atașat. Fiecare șablon am încercat să-l eliminați, eu nu folosesc, în unele cazuri, am plecat de la același șablon ca implicit în WordPress.
Tema Gata, după cum urmează: cadru WordPress șabloane
Sursa: WP.TutsPlus.com
