DIY WordPress Framework Partea 4 Utilizarea cadrului ca placă de boiler

Ultima dată când am folosit cadrul nostru ca temă copil, creăm o temă complet nouă, care depinde de cadru. Astăzi vom folosi cadrul nostru ca o placă de bord, copiind dosarul și făcând modificări corecte.

Acum, unii oameni ar putea pune la îndoială raționamentul din spatele acestei situații și este corect. De ce am schimba cadrul în sine? Intenția mea inițială pentru acest cadru a fost de fapt să fie doar o boilerplate - ceva pe care l-aș putea copia, lipi și modifica - la placa de bază HTML5. Din cauza asta, de cele mai multe ori îmi folosesc boilerplate-ul, de fapt, o copiez și o lipesc.

Există, de asemenea, unele merite pentru această metodă. Dacă, de exemplu, aveți de-a face cu un design foarte diferit din punct de vedere structural, veți termina oricum rescrierea majorității paginilor șablonului. Principalul raționament din spatele creării cadrului a fost de a reutiliza funcțiile CSS și funcțiile mai comune. A urmat exemplul pentru a crea un antet, subsol, index etc. pentru a obține tema de lucru. În timp ce am încercat să-l fac cât mai generic posibil, am vrut să-l păstrez ușor. Din acest motiv, nu există un motor care să injecteze codul în diferite părți ale temei, cum ar fi în tema sau alte cadre mai mari, pe care le prefer. După cum am spus în Partea 1, nu am vrut să creez un API complet nou pentru ca oamenii să învețe când există deja API-ul WordPress.

Noțiuni de bază

Înainte de a începe, ar trebui să evidențiem câteva obiective pentru folosirea cadrului ca o placă de boiler. Primul este că ar trebui să schimbăm doar fișierele care trebuie schimbate. Rețineți că, în afara antetului și subsolului nostru, am încercat să facem celelalte pagini generice cu putință. Asta inseamna ca daca CSS poate fi folosit pentru a aranja ceea ce este deja acolo, am putea sa o folosim si pentru ca este mai putin de lucru (editeze) pentru noi. De asemenea, ar trebui să fim atenți la ce se află în fișierele tematice. Avem 2 zone widget (unul în subsol) și câteva funcții destinate reutilizării. Ar trebui să le folosim dacă putem. Acestea fiind spuse, iată un mic memento la ce începem cu:

Cadrul nostru

Primul lucru este primul: să copiem și să ne căutăm cadrul și să îl pregătim pentru utilizare. Tocmai am copiat / wp-boilerplate / folderul și l-am redenumit / wp-boilerplate-copy / (acolo mă duc din nou cu numele creativ). Ca întotdeauna, vom modifica fișierul stil.css:

 / * Tema Nume: URI-ul temei copie cadru: http: //example.com/ Descriere: Copie a temei dvs. cadru Autor: Numele dvs. Autor URI: http: //your-site.com/ Versiune: 1.0 * /

Amintiți-vă, nu avem nevoie de șablon line din acest moment, deoarece aceasta este o copie directă a cadrului.

Modificări structurale

Înainte de a ne arunca cu capul în CSS, să analizăm ce schimbări structurale vrem să facem. Aș dori să fac câteva lucruri pentru design-ul general al site-ului. Primul este plasarea navigației deasupra numelui site-ului și a barei de căutare (pe care o vom adăuga și noi). Aș dori, de asemenea, să fac așa încât barele de antet și footer să prelungească lățimea ecranului utilizatorului, păstrând în același timp conținutul la o lățime stabilită de 960 de pixeli. Acesta este produsul final la care vom lucra:

Produsul nostru final

Ce vom face mai departe este modificarea antetului. Aici este totul în header.php după etichetă:

       "Principală")); ?> 
 „>

Ar trebui să observați câteva lucruri. Am schimbat ID-ul principal al containerului în "wrapper" și am adăugat o clasă "contain". Aceasta este pentru ca noi să nu confundăm cele două. #Wrapperul este încă aplicat pe întreaga pagină, dar din moment ce dorim ca antetul și subsolul să extindă întreaga lățime a ecranului utilizatorului, trebuie să eliminăm definiția lățimii. Cu toate acestea, deoarece încă ne dorim ca conținutul propriu să fie păstrat la lățimea originală de 960px, trebuie să creați o clasă separată pe care o vom folosi pentru mai multe secțiuni de conținut. Iată ce arată CSS-ul pentru #wrapper și .contain:

 #wrapper text-align: left; fundal: #FFFFFF; culoare: # 333333;  .cu width: 960px; marja: 0 auto;

După cum puteți vedea, am mutat informațiile referitoare la lățimea și alinierea la .contain. Vom modifica acum footer.php pentru a se potrivi cu header.php:

Puteți vedea că, în plus față de potrivirea divs noastre de la header.php, am adăugat, de asemenea, un .contain div în jurul conținutului nostru subsol. De asemenea, am mutat bara laterală în subsol. Așa cum au arătat unii dintre cititorii noștri în Partea a 2-a, acest lucru este un pic mai mult SEO prietenos.

Acum că am modificat structura principală a site-ului, să aruncăm o privire la modificarea uneia dintre paginile noastre de șabloane.

Modificarea paginilor de șablon

De fapt, nu vom face prea multe aici. Vreau doar să fac o mică schimbare (code-wise) în index.php. În bucla în care ne plasăm titlul și data:

  j ')?> 
  "rel =" bookmark "title =" Legătură permanentă la „>
  „); ?> Postat în  |

Aici, am inversat liniile de titlu și date și le-am atribuit clasei .date la paragraful cu datele despre dată în el. De asemenea, am pus toate informațiile post în cadrul clasei .entry. Așadar, aș putea să creez câte un pătrat pentru fiecare post, în stânga postului.

Notă: După cum am menționat mai devreme, acesta este un proiect viu, care se schimbă în mod constant. În construcțiile viitoare, probabil voi păstra clasa de date, astfel încât să pot mai ușor stilul acelei secțiuni.

Piața noastră de date

Restul modificărilor planificate putem face cu CSS din cauza modului în care paginile au fost codificate (despre care voi vorbi în secțiunea următoare). Cu toate acestea, folosindu-ne cadrul ca o placă de bază, permiteți-ne să modificăm mai ușor tema noastră decât o temă copilă când este vorba de rearanjarea sau recrearea anumitor șabloane.

Modelarea temei noi

Acum că am făcut modificările structurale, să aruncăm o privire la o parte din CSS. Voi scoate în evidență părțile importante aici. Toate CSS sunt incluse în fișierele tematice care însoțesc această postare. În primul rând, să aruncăm o privire la CSS pentru antetul nostru, care a trecut prin cea mai mare transformare.

 header background: #fafaed; text-aliniere: drept; frontieră de fund: 1px solid # 999999; margin-bottom: 15px;  antet nav ul, antetul h1, forma antetului margin-top: 0;  header h1 float: left; culoare: # 08034d; font-size: 2.8cm;  antetul h1 a, antetul h1 a: vizitat culoare: # 333333; text-decoration: nici unul;  formularul antet text-align: right;  formularul antetului de intrare padding: 5px; font-size: 1.4;  nav text-aliniere: centru; fundal: # 333333; lățime: 800px; marja: 0 auto;  nav ul padding: 10px; nav ul li afișare: inline; padding: 0 15px;  nav ul li a, nav ul li a: vizitat font-size: 1.4em; culoare: #FFFFFF; font-weight: bold; text-decoration: nici unul;  nav ul li a: hover culoare: # CFCFCF;

Aici puteți vedea că am aplicat culorile de fundal și stilizarea fontului în elementele antetului nostru, precum și unele destinații de plasare strategice. Rezultatul nostru este un antet foarte diferit de cel din cadrul nostru original.

Antetul nostru nou

Cealaltă parte a CSS pe care am vrut să o subliniez a fost modul în care am fixat bara laterală:

 #wrapper deoparte margin-left: 675px;  #content width: 660px; plutește la stânga; font-size: 1.25;

După cum știți, CSS-ul nostru a fost mai mult sau mai puțin aici pentru această secțiune - a trebuit să luăm inversul a ceea ce am avut de când am schimbat ordinea codului nostru. Curată și destul de simplă!

Restul CSS este destul de drept, și așa cum am menționat, inclus în sursa pentru acest post. Am schimbat postul CSS și am aplicat câteva stiluri implicite la etichetele HTML referitoare la culori, dimensiuni și umplutură / margine

Concluzie

Am vrut să închei această serie cântărind meritele acestei metode și să creez o temă a copilului, deoarece acest post a fost mai mult o dovadă a conceptului de post (de a face tema completă să se desfășoare într-adevăr mult timp, dar aș putea face mai detaliat unul dacă este cerut). Aș spune că metoda de copiere și lipire ar fi cea mai bună dacă faceți modificări majore ale cadrului. Încă obțineți codul pe care l-am stabilit, dar veți petrece mai puțin timp pentru a reconstrui ceea ce am construit deja într-o temă a copilului. Deși am făcut mici modificări aici, s-ar putea să întâlnim un design care ne cere să schimbăm mai multe pagini și să avem codul de bază acolo, este deja un ajutor important atât pentru referință, cât și pentru reutilizare. În general, merg în ruta copie și paste, deoarece încerc să nu fac toate modelele mele să pară la fel.

Și tu? Ce crezi că faci mai mult?

Cod