Crearea WordPress temă bazată pe un fișiere HTML statice pentru a crea un șablon, CMS și motoare pentru site-uri

Descarcă fișierul sursă

În prima parte a acestei serii de articole, ți-am spus cum să pregătească fișierele HTML și CSS pentru conversia în WordPress, cum de a defini structura, codul corect și clase.

În acest articol vă va învăța cum să împartă fișierul index.html la un set de fișiere șablon pentru utilizarea în WordPress.

De ce aveți nevoie:

Pentru acest tutorial veți avea nevoie de instrumentele de bază pentru editarea HTML și PHP:

Care este fișierele șablon?

WordPress temă este format dintr-un număr de fișiere șablon. cel puțin pentru funcționarea corectă a subiectului La ar trebui să conțină două fișiere: index.php și style.css.

Cu toate acestea, într-un conținut bine concepute de fișiere temă index.php ar trebui să fie împărțită în fișierul principal șablon (index.php) și un set de fișiere includ. Acestea sunt fișierele care conțin codul pentru antet, bara laterală și pagini de subsol.

Unele subiecte suplimentare includ fișiere folosite de ciclu; Voi spune mai multe despre faptul că, în a patra parte a acestei serii.

Aceste fișiere sunt numite „include“, pentru că ai pus codul în fișierul index.php, care spune WordPress, conținutul lor ar trebui să fie incluse în pagina.

Dosarul nostru index.html va fi împărțit în patru PHP fișier:

În această serie, adăugați elemente la fișierele în care subiectul pot fi incluse widget-uri, meniuri și cicluri, precum și un tratament, care urmează să fie folosit de plug-in-uri. Puteți adăuga, de asemenea, fișiere suplimentare șablon pentru a afișa diferite tipuri de conținut.

Dacă doriți mai multe informații generale despre acest subiect, citiți secțiunea Ierarhia șablon WordPress din Cod.

Dar acum, tot ce trebuie să facem este să creați un set de PHP-fișiere și să le distribuie între conținutul fișierului nostru index.php.

Creați un fișier PHP

Asigurați-vă că acestea sunt toate într-un dosar cu numele temei dvs. - în cazul meu am să sun dosarul „wptutsplus-demo-temă“. Copiere în acest dosar foaia de stil. Noi nu le va modifica în această lecție, dar se va ocupa de acest lucru în următoarea parte a seriei.

Completarea fișier antet

Apoi, trebuie să copiați partea superioară a fișierului index.html creat anterior în fișierul header.php.

Copiați acest cod și inserați-l în fișierul header.php.

Completarea fișierului bara laterală

Acum, repetați aceiași pași pentru fișierul bara laterală.

În cazul în care index.html fișier, a evidențiat o parte element class = „bara laterală“. și tot ce se referă la bara laterală este conținută în ea.

Copiați acest cod în sidebar.php și de a salva fișierul.

Completarea fișier subsol

Procesul de umplere este identic cu fișierul footer.php.

Copiați tot codul care este după bara laterală în fișierul index.html:

Copiați acest cod în fișierul footer.php.

Ați putea întreba, de ce blocul blocat în Principale dosar subsol, mai degrabă decât în ​​fișierul bara laterală.

Acest lucru se datorează faptului că, dacă aveți de gând să configurați un fișier pagină șablon care nu au o bară laterală, pur și simplu exclude din fișierul șablon bara laterală, și se lasă doar subsol, iar apoi unitatea să fie închise încă Principale corect.

Completarea Index fișiere

Iar ultimul pas este crearea fișierului index.php direct. Va face un pic mai greu, va trebui să adăugați câteva caracteristici PHP care WordPress le folosește pentru a include antet, bara laterală și subsol.

Deschideți un fișier index.php gol și adăugați următorul cod:

Asigurați-vă că între începutul antet inclus și include spațiul panoul din partea stanga, - aici se va adăuga conținutul fișierului index, care nu face parte din nici antetul sau în bara laterală sau subsol.

Acum, deschide fișierul index.html din nou și selectați toate codul dintre unitatea de deschidere a elementului class = „principal“ și panoul lateral:

Copiați acest cod și inserați-l în liniile get_header index.php fișier de mai jos ().

Salvați fișierul index.php.

rezumând

Acum avem un cadru pentru WordPress teme. Ai transformat HTML-fișier într-un set de fișiere PHP și configurați-le să lucreze împreună.

În următoarea parte a acestei serii, am să-ți spun cum oredaktirovat stylesheet pentru a crea o temă de lucru și încărcați tema în WordPress.

Traducerea articolului «Crearea unei teme WordPress Din static HTML: Crearea șablon fișiere» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.