Share
Sunteți gata să învățați cum să faceți prima dvs. temă WordPress? Această serie de tutori va avea o abordare pas cu pas, făcând uz de o "temă de învățare" cunoscuță cu afecțiune WordPress Training Wheels, pentru a ajuta la predarea subiectului. Această serie va lua începător WordPress absolut, prin pașii de bază necesare pentru a converti orice șablon HTML într-o temă WordPress pe deplin funcțională.
Când am început să folosesc WordPress în 2006, nu au existat foarte multe tutoriale în jurul valorii de atunci, de unde să încep cu Theme Development.
Am învățat calea greu, prin încercări și erori, să exploatez codul WordPress, precum și din cele câteva tutele care existau atunci. În ultimii 2 - 3 ani am învățat tema dezvoltării tematice WordPress și am observat că, pentru cei care nu sunt foarte familiarizați cu sistemele de management al conținutului, majoritatea tutorialelor care există pentru a preda dezvoltarea de la zero sunt prea complicate.
Așadar, am dezvoltat o abordare pas cu pas, folosind o "temă de învățare" cunoscuță cu afecțiune WordPress Training Wheels, care va lua WordPress completă începător prin pașii de bază necesare pentru a converti orice șablon HTML într-o temă WordPress pe deplin funcțională. Vom începe încet, totuși, în special pentru cei care nu au luxul experienței anterioare care lucrează cu codul CMS sau PHP pentru acest lucru. De aici și numele "Roți de antrenament". Codorerele de hardcore se lasă deoparte, suntem pe punctul de a șterge calea de curse!
Accentul nostru se va pune în principal pe codul WordPress, nu pe design. Deci, șablonul este intenționat simplist cu un anumit stil de lumină, astfel încât să nu vă plimbați cu bicicleta de pe o stâncă din plictiseală.
Pentru un intro foarte bun pentru dezvoltarea web folosind HTML & CSS, verificați seria tutorial Net Tuts - Dezvoltare web de la zero
Temele WordPress sunt în esență Plain HTML Templates, cu mici biți de tag-uri PHP specifice WordPress aruncate în zone în care conținutul dinamic trebuie să fie încărcat din baza de date. Din acest motiv, o bună înțelegere a HTML-ului ar fi necesară pentru a urmări cu această serie.
Temele WordPress, deși sunt alcătuite în principal din HTML, nu pot fi afișate în mod implicit în browser datorită PHP-ului pe care îl conțin, ceea ce schimbă modul în care funcționează. Ei trebuie să fie rulați printr-un server care este capabil să interpreteze codul PHP, motiv pentru care este esențial să lucrați pe un server web capabil de PHP atunci când dezvoltați teme WordPress.
Vom trece peste procesul de instalare pentru WordPress pentru moment, căci accentul nostru va fi pur și simplu pe dezvoltarea temelor. Am conectat la un Excelent Video Tutorial cu privire la instalarea WordPress pe un server live. Mai multe tonuri pot fi găsite online atât pentru serverele Live, cât și pentru serverele virtuale.
"Un server virtual este în esență un server care rulează pe calculatorul local și poate fi configurat utilizând MAMP (mac), XAMPP (mac & windows) sau WAMP (windows)".
Pentru a afla cum să instalați WordPress local pe un server virtual, verificați următorul videoclip.
Ei nu-l numesc celebra 5 minute de instalare pentru nimic. De fapt, dacă ați făcut-o suficient de mult, este nevoie de mai puțin de 5 minute.
Check out www.freecss templates.org pentru o tona de șabloane care sunt perfecte pentru a începe și sunt deja orientate spre a fi utilizate ca teme WordPress.
Odată ce ați instalat testul de WordPress care rulează, veți avea nevoie de un șablon de bază HTML (index.html) cu o foaie de stil (stil.css). Aș încuraja pe oricine să învețe procesul de conversie HTML la WordPress pentru a practica prin descărcarea de șabloane gratuite HTML și CSS gratuite și conversia câtorva pentru practică.
Voi folosi WordPress Training Wheels Tema pe durata acestei serii de tutorial și vă sfătuiesc să faceți același lucru, astfel încât să nu începem în diferite direcții. Tema "Roți de antrenament" este un șablon gol al oaselor, nimic ras sau ostentativ, dar conține toate componentele familiare ale unei teme tipice WordPress, adică? Header, Meniu, Sidebars, coloana și subsolul de conținut. Tema va fi numită de formare-wheels-0.0 la început, iar numele se va schimba constant, adăugând mai mult cod, iar progresul este spre a fi o temă deplină. La sfârșitul acestei lecții, numele se va schimba de formare-wheels-0.1
Aruncați o privire la structura HTML de bază de mai jos. Foarte simplu.
În cazul în care fișierele de pornire nu vor fi denumite conform modului menționat mai sus, va trebui să le redenumiți. WordPress Necesită fișiere cu aceste nume ca minimum minim pentru ca o temă să fie funcțională. În plus, vom avea un dosar cu imagini pentru a păstra imaginile cu ușurință ascunse din calea noastră.
Fișierul index.html, care va fi structura de bază pentru temă, trebuie redenumit la index.php. Întotdeauna recomand să păstrăm o copie a index.html pe partea laterală, totuși, în cazul în care ceva se strică așa cum este obligatoriu să se întâmple. Gândiți-vă la aceasta ca pe o anvelopă de rezervă în cazul în care vă confruntați cu o explozie a pneurilor. Mărturisire: chiar și după ani de dezvoltare a temelor, încă mai fac lucruri foarte prost, mai ales după miezul nopții, când creierul meu nu mai poate funcționa, dar cafeaua mă menține.
Încheiem cu următoarele. Mina sunt adăpostite în dosarul numit training-wheels-0.0
Dacă ați încercat vreodată să adăugați un șablon HTML simplu în directorul tematic WordPress, ați observat că acesta nu apare în opțiunile pentru activarea temelor. Cu versiunile mai vechi ale WordPress, veți găsi, de asemenea, că dacă foaia de stil nu conținea comentariul de stilistic de mai jos, ar apărea un mesaj de eroare. Acest lucru se datorează faptului că WordPress a folosit fragmentul de comentarii CSS găsit mai jos pentru a înregistra tema dvs. ca o temă WordPress validă. În prezent, nu mai este necesar ca acest comentariu să se înregistreze pentru tema dvs., dar tema dvs. ar apărea fără alte detalii, altele decât numele dosarului, așa cum se vede mai jos.
Codul de mai jos trebuie modificat pentru a conține propriile detalii unice, precum și informații unice despre tema pe care o creați.
/ * Tema Nume: Tema URI: Descriere: Versiune: Autor: Autor URI: * /
Cu detalii de la tema mea de instruire inclusă, ar arăta astfel:
/ * Tema Nume: Training Wheels Tema URI: http://www.wpbedouine.com Descriere: O temă pentru a învăța WordPress Theme de dezvoltare de la zero Versiune: 0.1 Autor: Nur Ahmad Furlong Autor URI: http: //www.nomad-one .com * /
Există câțiva parametri suplimentari care pot fi adăugați, mai ales dacă intenționați să vă lansați publicul, să-l vindeți sau să-l încărcați pe lista tematică oficială wordpress.org.
Un exemplu de comentariu mai detaliat despre stilurile de stil pentru a oferi cât mai multe detalii despre temă poate fi găsit în tema implicită de douăzeci și unsprezece. După cum puteți vedea unele informații suplimentare de etichete pentru a ajuta utilizatorii atunci când căutați anumite tipuri de teme prin intermediul căutării temei din tabloul de bord sau în directorul tematic este prezent. Sunt incluse o descriere detaliată, precum și câteva informații despre licențierea temelor. Vom ignora acest lucru pentru acest exercițiu.
/ * Tema Nume: URI Twenty Eleven Theme: http://wordpress.org/extend/themes/twentyeleven Autor: echipa WordPress Autor URI: http://wordpress.org/ Descriere: Tema 2011 pentru WordPress este sofisticată, ușoară , și adaptabil. Faceți-o a ta cu un meniu personalizat, antet și fundal - apoi mergeți mai departe cu opțiunile de temă disponibile pentru schema de culori ușoare sau întunecate, culori personalizate ale legăturilor și trei opțiuni de aspect. Twenty Eleven vine echipat cu un șablon de pagină de prezentare care transformă prima pagină într-o vitrină pentru a afișa cel mai bun conținut, widget-ul de sprijin (în bara laterală, trei zone de subsol și o zonă de widget-uri pentru pagina de prezentare) și un widget personalizat "Ephemera" afișează postările dvs. pentru Aside, Link, Citat sau Statut. Sunt incluse stilurile pentru imprimare și pentru editorul de admin, suport pentru imagini recomandate (ca imagini antet personalizate pe postări și pagini și imagini mari pe postări "lipicioase") și stiluri speciale pentru șase formate diferite de postări. Versiune: 1.2 Licență: URI de licență publică generală GNU: license.txt Etichete: dark, light, white, black, gray, one-column, two-columns, leftbar, sidebar, fixed-width , fundal personalizat, culori personalizate, antet personalizat, meniu personalizat, stil editor, featured-image-header, imagini cu caracteristică, șablon complet, microformate, post-formate, suport RTL -post, temă-opțiuni, traducere-gata * /
Odată ce ați primit comentariile dvs. de stil, tema dvs. este acum gata să fie activată prin Tabloul de bord de administrare WordPress, sub Aspect "Teme
Pentru a vă ajuta pe dvs. și pe ceilalți utilizatori ai temei să recunoască rapid tema în zona de instalare a temelor din tabloul de bord, sa făcut o prevedere pentru ca o imagine screenshot.png să fie afișată automat dacă se găsește în rădăcina directorului temei.
În mod ideal, doriți să aveți o captură de ecran care să ofere o imagine bună a temei. Am descoperit că mulți designeri de temă includ un logo aici, care nu ajută întotdeauna utilizatorul final să identifice tema pe care o caută, mai ales în cazul în care utilizatorul are tone de teme deja instalate, un eveniment obișnuit pe care îl cred.
Imaginea screenshot.png ar trebui să fie 240px X 180px, care este dimensiunea utilizată pentru miniatură în tabloul de bord. Puteți introduce o altă dimensiune, dar imaginea va fi redimensionată pentru a se încadra în acele dimensiuni. Cel mai bine este să vă lipiți de dimensiunea corectă pentru prima oară pentru o afișare optimă și o experiență de încărcare a paginilor.
Înainte de a merge mai departe, trebuie să ne orientăm puțin spre structura limbajului de dezvoltare PHP și, mai important, spre structura PHP specifică WordPress. PHP folosit în teme WordPress în general, este personalizat special pentru a lucra numai în mediul WordPress. Vom începe cu structura de conținut a oricărui cod PHP, cum ar fi cu HTML având numai paranteze, codul PHP este înfășurat.
În interiorul brackets este locul în care se desfășoară toate funcționalitățile, cu codul în general referindu-ne la funcțiile PHP. Asigurați-vă întotdeauna că există un spațiu între etichetele conținând și codul interior PHP. Cea mai simplă dintre aceste funcții cu care ne vom ocupa este bloginfo (); funcţie. Observați că după numele funcției avem 2 paranteze rotunjite, deschise și închise, cu un semi-colon în final, închiderea funcției și, în multe cazuri, este esențială. Parantezele rotunjite vor ajunge, uneori, să conțină niște parametri suplimentari, pentru a spune bloginfo (); funcția, în special ceea ce trebuie să facă.
Unele funcții WordPress nu au nevoie de parametri din cadrul parantezelor rotunjite pentru a efectua o funcție, deși ele pot avea opțional unele pentru a-și face funcția mai specifică. Bloginfo (); parametru, totuși, are nevoie doar de o funcționare. Vom ajunge la unele dintre funcțiile suplimentare care funcționează fără parametri cu trecerea timpului.
Observați modul în care numele cuvântului este scris cu cotațiile unice în jurul acestuia în paranteze rotunjite.
este codul pe care îl folosim în locul numelui site-ului, oriunde dorim ca acest nume să apară în șablonul nostru. De exemplu, ori de câte ori am scris "Roți de antrenament WordPress", aș putea înlocui textul cu funcția respectivă.
Acordați o atenție deosebită structurii acestei funcții, deoarece restul codului WordPress urmează o structură similară pe tot parcursul. Dacă părăsiți o parte esențială, cum ar fi parantezele rotunjite, semicolorul după paranteze rotunjite sau spațiul dintre php și cuvântul bloginfo, rezultatul este că codul dvs. nu funcționează corect. În unele cazuri, aceasta ar putea ucide întreaga pagină. Știu, este o durere a fi atât de atentă, dar dezvoltarea unor obiceiuri bune devreme ajută. Respectați regulile drumului și călătoria voastră va fi mult mai puțin afectată.
Când site-ul WordPress care rulează această funcție, WordPress interoghează baza de date și găsește numele pe care l-ați introdus în câmpul Nume blog în Setări "Generalități.
Este, de asemenea, numele pe care îl introduceți la început, când executați instalarea pentru configurarea WordPress prima dată. Schimbarea acestui nume în setările generale va determina șablonul dvs. să reflecte imediat acea schimbare. Aceasta este în mod esențial modul în care funcționează WordPress sau orice alt sistem de management al conținutului. Etichetele dinamice înlocuiesc conținutul static, astfel încât conținutul să poată fi gestionat prin interfața de administrare în loc să editeze direct șabloanele.
Tema ta nu este încă pregătită să fie înregistrată în WordPress. Lipsește un pas esențial care permite WordPress să afișeze corect tema.
Câțiva pași înapoi index.html a fost ușor de conectat la foaia de stil care îi însoțește, deoarece acestea sunt situate în același director și ar fi suficientă doar inserarea numelui fișierului cu foi de stil într-o legătură de stil. Acest lucru nu mai este cazul, totuși. Temele WordPress nu locuiesc la nivelul rădăcinilor site-ului, deoarece sunt instalate în wp-content " folder în cadrul programului WordPress.
Așa cum puteți vedea mai jos când activăm tema în prezent, încă nu vedem imaginea completă. Deși structura HTML se încarcă, foaia de stil nu este legată, ceea ce duce la o pagină neombrăcată.
Fără a explica prea multe detalii despre modul în care WordPress merge despre apelarea șabloanelor din acele dosare, trebuie să fim conștienți de faptul că fișierele nu mai pot fi legate la fel de ușor cum le-am legat cu ele în site-uri HTML simple. Trebuie să folosim câteva funcții WordPress suplimentare pentru a completa pașii dintre directorul rădăcină și dosarul temei actual activat. Facem acest lucru cu ajutorul unui alt bloginfo (); , detectând de această dată URL-ul pentru foaia de stil a temei actuale. Indiferent de numele dosarului tematic, WordPress va completa acum golurile și va introduce calea către fișierul style.css.
Această funcție este inserată în eticheta de legătură a foii de stil
care acum devine
Dacă inspectați codul sursă folosind sursa de vizualizare sau cu ceva de genul firebug, veți vedea că WordPress include calea completă de la rădăcina site-ului până la foaia de stil. Dosarul rădăcină al exemplului site-ului meu este situat la http://www.wpbedouine.com/training-wheels/. WordPress generează, prin urmare:
La fel stylesheet_url funcția va introduce automat calea către orice temă activată în același mod, fără ca nici un cod sursă să fie editat. Veți vedea un tipar în curs de dezvoltare, cu biți de conținut codat greu fiind înlocuit cu funcții dinamice care trage datele din baza de date în zbor.
Simțiți că aerul care vă grăbește prin păr? Nu vă faceți griji, roțile de antrenament vor ieși în curând! Iți promit.
Plasați fișierele index.php și stil.css în folderul propriu, numit pe baza a ceea ce doriți ca tema să fie denumită și apoi încărcată în wp-content " în cadrul versiunii gazdă live sau virtuale a instalării dvs. WordPress după cum se vede mai jos.
Și fără să mai vorbim, du-te la Aspect "Teme și faceți clic pe activare sub tema nou creată. Pentru ceilalți cititori de pe acest site, acești pași s-ar putea să fi fost enervant de simpli, dar eu personal știu sentimentul de a face clic în sfârșit cu acest proces și având prima mea temă activă în cadrul WordPress. Este neprețuit pentru începător.
Înainte de a termina, hai să folosim câteva bloginfo (); funcții pentru a umple conținutul dinamic. Am introdus deja bloginfo ( 'name'); și bloginfo ( 'stylesheet_url');. Mai jos avem codul HTML inițial pentru titlul div al temei noastre.
WordPress Training Wheels
Un pic de ajutor pentru a vă face drum liber cu WordPress
Vom înlocui conținutul atributului H1 link href, care în prezent are doar un simbol hash și ar arăta, de obicei, ca href = "home.html", cu bloginfo ( 'url'); funcţie.
„>
În plus, vom înlocui sloganul h2 sub numele site-ului cu:
astfel încât fragmentul de cod acum arată mult mai mult wordpressish.
„>
O ultimă problemă de rezolvat este legătura cu imaginea conținutului din coloana din mijloc a șablonului. Similar cu problema legării foii de stil, trebuie să folosim un alt bloginfo (); funcția de completare a căii imaginii deoarece imaginile / imagename.jpg nu vor mai funcționa.
Lecții de instruire 1
Pentru a rezolva această problemă, folosim următorul cod înainte de a apela directorul de imagini
Deci, vom ajunge la urmatoarele.
Lecții de instruire 1
Acordați o atenție deosebită lateralei imediat după brațul de închidere și înainte de numele folderului de imagini!
bloginfo ( 'name');
bloginfo ( 'url');
bloginfo ( 'descriere');
bloginfo ( 'template_directory');
Bloginfo (); funcția are o mulțime de utilizări pentru a genera diferite părți de conținut de pe site-ul dvs..
Pentru o listă mai completă de parametri pentru bloginfo (); verificați documentația WordPress Codex pe această funcție - http://codex.wordpress.org/Function_Reference/bloginfo.
O altă resursă excelentă pentru numeroasele funcții WordPress este DBS Interactive WordPress Tag Reference, care este în esență o prezentare mai curată și mai ordonată a codului enumerat în WordPress Codex.
Am adăugat fragmente din codul acoperit în această lecție în contul meu snipplr.
Joc gratuit cu WordPress în curând pentru a urma. Am auzit că acele roți de antrenament răsună să coboare :)
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )