Share
Anul trecut am facut un sondaj mic (si adesea foarte ne-stiintific) printre alti dezvoltatori WordPress.
Ceea ce am vrut să știu a fost acesta: Când au construit prima temă WordPress, cum au făcut-o? Au hacked o temă existentă sau au început cu propriul HTML static și transformă-o într-o temă?
Majoritatea celor cărora le-am vorbit folosesc cea de-a doua abordare - toți au fost dezvoltatori frontieri cu experiență care au construit site-uri folosind HTML și CSS și au considerat că este mai ușor să le ia fișierele HTML existente și să le transforme într-o temă. Două dintre persoanele cu care am vorbit au fost lectori sau profesori și mi-au spus că aceasta este abordarea pe care o folosesc cu elevii.
Deci, în această serie îți voi arăta cum să faci asta.
Veți începe cu un singur fișier HTML (cu o foaie de stil separată) și transformați-l într-o temă WordPress cu mai multe fișiere șablon și cu o varietate de cârlige, funcții și etichete șablon incluse pentru a utiliza bucle, meniuri, widget-uri și multe altele.
În acest prim tutorial, vă voi arăta cum să vă pregătiți codul HTML înainte de ao converti în PHP pentru a crea o temă, ceea ce vom acoperi mai târziu în serie.
Pentru acest tutorial, tot ce veți avea nevoie este instrumentele de bază pentru editarea codului HTML:
Teoretic, ai putea să iei orice HTML valid, să adaugi etichetele șablonului corect și o buclă și să o transformi într-o temă, dar aș recomanda să fie un pic mai amănunțit decât asta.
Motivul pentru aceasta este că WordPress va adăuga elemente și clase HTML atunci când începeți să adăugați funcții precum meniuri și widget-uri, așa că este logic să lucrați cu acele elemente și clase în primul rând. Am subliniat clasele și codurile pe care le generează WordPress într-un tutorial anterior, așa că ați putea dori să vă familiarizați cu acelea înainte de a continua.
Un alt motiv este să vă asigurați că marcajul dvs. este compatibil cu standardele și că este scris în HTML5. Dacă convertiți un site static vechi în WordPress, este posibil să lucrați cu codul vechi, care se află într-o versiune anterioară a HTML și care, sincer, are nevoie de unele curățenie.
Nu vă pot spune cum trebuie să vă ordonați marcarea, dar vă pot oferi sfaturi cu privire la utilizarea HTML5 cu WordPress și structurarea documentului.
Există o serie de elemente HTML5, cum ar fi și care au locuri evidente ar trebui să meargă într-o temă WordPress - am blogat despre acest lucru, dar gândirea cu privire la modul în care fiecare dintre acestea ar trebui să fie utilizat este în continuă dezvoltare, deci folosiți-vă judecata.
În fișierul HTML cu care voi lucra pentru acest tutorial, structura este după cum urmează:
După cum puteți vedea, acest lucru utilizează un număr de elemente HTML5, precum și câteva care predesc HTML5. În următoarea parte a acestui tutorial, vă voi arăta cum să împărțiți această structură în fișiere de șabloane, dar deocamdată păstrați totul într-un fișier numit index.html.
Dacă marcajul dvs. nu este deja structurat într-un mod similar și nu este scris în HTML5, faceți ceva timp pentru a efectua modificările relevante. Lucrul important este ca următoarele domenii ale paginii să fie clar definite:
Accentsconagua
. Folosesc în mod deliberat o identitate aici în loc de o clasă, astfel încât să pot folosi aceasta ca o ancoră pentru cititorii de ecran pentru a sări peste meniu. - bara laterală (dacă aveți unul) - aici folosesc
- subsolul - în
. Aceasta înseamnă că pot aplica o culoare de fundal cu o lățime întreagă subsolelement în timp ce păstrează .fatfooter element centralizat în pagină.
3. Adăugarea de clase și ID-uri generate de WordPress
Următorul pas este să lucrați prin marcarea dvs. și să adăugați câteva clase și ID-uri care vor fi transmise de tema finită.
Această etapă nu afectează de fapt tema dvs. finală, deoarece clasele și codurile vor fi adăugate automat prin funcțiile PHP pe care le veți adăuga mai târziu. Cu toate acestea, dacă adăugați clasele potrivite și ID-urile acum, le veți utiliza în foaia de stil și stilul dvs. va continua să funcționeze după ce ați transformat codul HTML într-o temă WordPress.
Lucrați prin fiecare parte a marcajului în ordine.
Antetul
WordPress nu adaugă automat clase și ID-uri la numele și descrierea site-ului, dar este logic să le folosim pe cele care sunt în concordanță cu terminologia WordPress. Partea din stânga a antetului conține o div element cu numele site-ului și descrierea acestuia, după cum urmează:
WordPress Tematica de constructii
Crearea unei teme WordPress din html static
În partea dreaptă a desenului meu este un spațiu pentru adresa sau numărul de telefon sau poate o casetă de căutare. Puteți oferi utilizatorilor temei dvs. o flexibilitate completă față de ceea ce apare aici, prin setarea acesteia ca zonă widget. Vă voi arăta cum să creați zone widget mai târziu în serie, dar acum adăugați doar clasele relevante:
Imagini
Cel mai important lucru pe care îl puteți adăuga la conținutul dvs. este clasa pentru imagini. WordPress generează clase pentru imagini pe baza modului în care le adăugați la Media Manager, astfel încât trebuie să vă asigurați că toate acestea sunt incluse în tema dvs..
În marcajul pentru pagina dummy mea sunt două imagini - una este mare și cealaltă este medie și plutind dreapta.
Pentru primul, adaug:
Și pentru al doilea, adaug:
Rețineți că în tema finală veți elimina codul pentru aceste imagini deoarece acestea vor fi adăugate automat de WordPress, dar vă ajută să le includeți astfel încât să puteți configura stilul corect.
După ce ați adăugat clasele la marcajul dvs., trebuie să vă asigurați că ați asigurat clase de imagini în foaia dvs. de stil, adăugați următoarele:
/ * Imagini * / img max-lățime: 100%; #content img margine: 0; înălțime: auto; lățime: auto; #content .alignleft, #content img.alignleft float: left; margine: 4px 4% 4px 0; #content .alignright, #content img.alignright float: right; margine: 4px 0 4px 4%; #content .aligncenter, #content img.aligncenter clar: ambele; afișare: bloc; margin-stânga: auto; margin-dreapta: auto; #content img.alignleft, #content img.alignright, #content img.aligncenter margin-bottom: 12px;
Dacă vă uitați la pagina de exemplu, veți vedea că prima imagine este la 100% din lățimea conținutului, iar cea de-a doua imagine este flotată spre dreapta cu margini:
Bara laterală și subsol
Bara laterală și subsolul vor conține, de asemenea, zone widget, astfel încât trebuie să adăugați clasele relevante pentru marcajul și stilul dvs. folosind cele din foaia de stil.
Marcajul barei laterale este după cum urmează:
Marcajul pentru subsol conține patru zone widget, fiecare dintre acestea putând să dețină mai mult de un widget. După cum puteți vedea mai jos, adaug o clasă fiecăruia care îi spune browser-ului care este unul, așa că îi pot viza pe fiecare dintre ei pentru stil mai târziu.
rezumat
Fișierul HTML este acum pregătit și pregătit pentru a fi convertit într-un set de fișiere tematice. În următorul tutorial vă voi arăta cum să-l împărțiți și să adăugați câteva PHP-uri de bază.
Resurse
- Lucrul cu clasele și ID-urile generate de WordPress (tutorial)
- Dezvoltarea temelor (din Codul WordPress)
- WordPress și HTML5 - cum se potrivesc împreună (din blogul meu)
- HTML5 spec (de la W3C)
- WordPress Tema Dezvoltare Ghidul incepatorilor de Tessa Blakeley Silver si Rachel McCollin (da, eu!)
