În prima parte a acestei serii, v-am arătat cum să vă pregătiți fișierele HTML și CSS pentru WordPress, asigurându-vă că structura va funcționa, că codul ar fi valabil și că vor fi folosite clasele corecte.
În acest tutorial veți învăța cum să vă luați index.html fișier și împărțiți-l într-un set de fișiere șablon pentru utilizarea de către WordPress.
Ce ai nevoie
Pentru acest tutorial tot ce veți avea nevoie este cel mai de bază instrument pentru editarea HTML și PHP:
Un editor de cod la alegere.
Ce sunt fișierele de șabloane?
O temă WordPress constă dintr-un număr de fișiere șablon. Cel puțin, o temă trebuie să conțină două fișiere pentru a funcționa, acestea sunt index.php și style.css.
Cu toate acestea, într-o temă bine scrisă, conținutul index.php fișierul va fi împărțit în fișierul principal al șablonului (index.php) și un set de include fișiere. Acestea sunt fișierele care conțin codul pentru antet, bara laterală și subsol.
În unele teme, un fișier suplimentar include fișierul Loop; Voi ajunge la partea a patra a acestei serii. Fișierele se numesc include fișiere deoarece adăugați codul dvs. index.php fișier pentru a le spune WordPress să includă conținutul lor.
Al nostru index.html fișierul va fi împărțit în patru fișiere PHP:
index.php, care va conține conținutul principal plus codul pentru a include celelalte fișiere
header.php, care va include secțiune plus tot în antet și navigare
sidebar.php, care va conține zona widget-ului lateral
footer.php care va conține (ați ghicit-o!) subsolul, plus închiderea etichetă
În cursul acestei serii, veți adăuga la aceste fișiere, astfel încât tema dvs. să includă widget-uri, meniuri și o buclă și veți adăuga cârlige care vor fi utilizate de pluginuri. De asemenea, veți adăuga fișiere de șabloane suplimentare pentru a afișa diferite tipuri de conținut. Dacă doriți să obțineți un început în această privință, aruncați o privire la pagina Codex din Ierarhia de șabloane WordPress.
Dar pentru moment, tot ce trebuie să faceți este să creați un set de fișiere PHP și să împărțiți conținutul index.php fișier pentru ei.
Crearea fișierelor PHP
Primul pas este să creați fișiere goale. Creați patru fișiere goale cu următoarele nume și deschideți-le în editorul de cod:
index.php
header.php
sidebar.php
footer.php
Asigurați-vă că toate acestea sunt într-un dosar care are numele temei dvs. - în cazul meu voi numi dosarul "wptutsplus-demo-temă'.
Copiați foaia de stil și în acest dosar. Nu veți fi editat în acest tutorial, dar veți face acest lucru în următoarea parte a seriei.
Populația fișierului antet
În continuare, veți copia partea de sus a paginii index.html în tine header.php fişier.
Deschis index.html și selectați totul de la deschidere DOCTYPE declarație la deschidere div etichetă:
WordPress Theme Building - Crearea unei teme WordPress din HTML static
WordPress Tematica de constructii
Crearea unei teme WordPress din html static
Copiați acest cod și lipiți-l în dvs. header.php fişier.
Salvați noul fișier antet.
Populația fișierului bara laterală
Acum repetați acest lucru pentru bara laterală.
În tine index.html fișier, selectați deoparte element și tot ce se află în interiorul lui:
Copiați acum acest lucru în dvs. sidebar.php fișier și salvați-l.
Populația fișierului subsol
Procesul de populare a footer.php fișierul este identic cu antetul și bara laterală.
Alegeți totul după bara laterală din index.html fişier:
Copiați-l și inserați-l în dvs. footer.php fişier.
Salvați fișierul subsolului.
S-ar putea să te întrebi de ce .principal div este închisă în fișierul subsol și nu în bara laterală. Acest lucru este astfel încât, dacă ați setat mai târziu un fișier șablon pentru paginile care nu au o bara laterală, veți pierde bara laterală include în șablonul respectiv și să păstreze subsolul include, și .principal div va fi închis corect.
Populația fișierului index
Ultimul pas este să vă configurați index.php fişier. Acest lucru este puțin mai implicat, va trebui să adăugați câteva funcții PHP pe care WordPress le utilizează pentru a include antetul, bara laterală și subsolul.
Deschideți-vă goale index.php fișier și adăugați codul de mai jos:
Asigurați-vă că ați lăsat un spațiu între includerea antetului de deschidere și include bara laterală, este aici în care veți adăuga conținutul fișierului index care nu se află în antet, bara laterală sau subsolul.
Deschide-ți acum index.html fișier din nou și selectați tot codul dintre deschidere div element și bara laterală:
Acesta este titlul unui post sau al unei pagini
Postat pe 5 noiembrie de Rachel McCollin
Acesta este conținutul mesajului. Pe o pagină de arhivă ar putea fi un fragment al postării sau puteți include întregul conținut.
Imagini în WordPress
Acest post are câteva imagini incluse - odată ce ați transformat acest html într-o temă WordPress veți fi capabil să obțineți WordPress să se ocupe de imagini pentru tine și viața va fi mult mai ușor!
Acesta are, de asemenea, o imagine featured - din nou, WordPress se va ocupa de acestea pentru tine și nu veți mai reveni la html static din nou. Veți învăța cum să adăugați asistență pentru imaginile prezentate în tema dvs. din Partea 10 din această serie. Puteți să le utilizați pentru a afișa automat imaginile în mesajele și paginile dvs. individuale și în paginile de arhivă, veți afla cum să configurați o pagină de arhivă personalizată în Partea 11.
Postați categorii și etichete
În această secțiune puteți afișa informații despre categoriile și etichetele asociate postării dvs., veți afla cum să faceți acest lucru utilizând etichetele șablonului WordPress din partea 4 a acestei serii.
Copiați acest lucru și inserați-l în dvs. index.php fișier de mai jos get_header () linia.
Salvați-vă index.php fişier.
rezumat
Acum ai începuturile unei teme WordPress. Ați convertit fișierul HTML într-un set de fișiere PHP și le-ați setat să lucreze împreună.
În următoarea parte a acestei serii, vă vom arăta cum să editați foaia de stil pentru a vă face tema să funcționeze și să încărcați tema în WordPress.
Resurse
Ierarhia șabloanelor WordPress (pagina Codex)
Trecerea în șabloane (pagina Codex)
Anatomia unei teme WordPress (post de blog de Yoast)
WordPress Tema Dezvoltare Ghidul incepatorului de Tessa Blakeley Silver si Rachel McCollin (da, eu!)
Accentsconagua
Share
