Good Mood

Acesta va fi o distracție tutorial in care sa ne inspecteze cum de a crea propria Temă WordPress de la zero. De fapt, vom începe cu fișiere absolut zero și linii de cod zero. Singura modalitate de a înțelege cum funcționează temele WordPress este să sari cu adevărat la un nivel scăzut și să faci singur fiecare lucru. Da, este tentant să eviți acest lucru, deoarece poți face WordPress să facă totul pentru tine fără să înțeleagă codul care îl alimentează., Acest lucru ar putea fi PHP, JavaScript, CSS sau chiar HTML de bază. Până la sfârșitul acestui pas cu pas WordPress Tema tutorial, veți înțelege cum totul se potrivește împreună și cum să se aplece WordPress la voia ta cu ușurință.

există atât de multe teme gratuite disponibile pentru dvs. atunci când executați un site web WordPress. Dincolo de temele gratuite, Puteți alege, de asemenea, să plătiți o primă pentru temele WordPress realizate profesional, care arată excelent și au caracteristici fantastice. Deci, de ce să înveți cum să-ți creezi propria temă de la zero?, Răspunsul este că, indiferent de tema pe care o utilizați, va veni un moment în care doriți să faceți modificări simple pe site-ul dvs. web. Unele dintre aceste modificări ar putea fi capabile să fie găzduite de un simplu plugin sau widget. Cu toate acestea, de multe ori, are mai mult sens să înțelegeți ce doriți să schimbați, cum să îl schimbați și să evitați transformarea site-ului dvs. Cu doar un pic de cunoștințe la nivel de fundație, veți avea încredere în modificarea temei dvs. sau pur și simplu construirea propriei dvs. de la zero., Veți ști ce fișier să editați și ce Cod să adăugați sau să modificați pentru a crea rezultatul dorit.

Pasul 1: Creați un folder pentru a ține fișierele tematice.

dacă vom construi teme, trebuie să știm unde trăiesc fișierele care alcătuiesc o temă WordPress într-o instalare WordPress. Acest lucru este destul de ușor. Știm că o instalare WordPress are de obicei un director rădăcină numit wordpress. Iată cum arată directorul nostru rădăcină în PHP Storm.,

Acest director conține următoarele fișiere și foldere:

Fișiere

Foldere

• wp-admin
• wp-content
• wp-include

folderul care ne interesează cel mai mult acum este wp-content folder. În folderul wp-content este un folder numit teme. Știți pentru ce este acest dosar? Da, așa e! Este folderul care deține una sau mai multe teme pe care doriți să le utilizați cu site-ul dvs., În acest dosar teme găsim trei foldere suplimentare de twentyfifteen, twentysixteen, și twentyseventeen. Aceste foldere conțin cele trei teme pe care WordPress le livrează în mod implicit. Observați mai jos că există și un folder numit customtheme. Mergeți mai departe și creați acel folder și în instalarea dvs., deoarece aici vom crea tema noastră WordPress de la zero.

Pasul 2: Creați stil.css și index.php în folderul temă personalizată

acum știm unde sunt fișierele tematice WordPress în sistemul de fișiere., De asemenea, am creat un nou folder numit customtheme în folderul nostru teme. Acum vom crea două fișiere goale în acest director. Unul se numește index.php și celălalt se numește stil.css.

să populăm acum aceste fișiere cu minimul necesar pentru a obține o nouă temă în WordPress.

stil.css

WordPress citește de fapt comentariile pe care le plasați în stil.fișier css. Aici specificați informații specifice despre tema pe care o construiți.

stilul.,css este o foaie de stil (CSS) fișier necesar pentru fiecare temă WordPress. Acesta controlează prezentarea (design vizual și layout) a paginilor site-ului.

în fragmentul nostru aici atribuim pur și simplu un nume de temă, autorul, URI-ul autorului și numărul versiunii temei noastre.,

index.,php

în acest fișier, vrem doar să scoatem ceva pe ecran pentru a dovedi că tema noastră personalizată funcționează.

locuri de Muncă Mare! Credeți sau nu, ați creat prima temă WordPress.,

Pasul 3: Activați tema de WordPress tabloul de Bord

În acest moment, putem vizita noastră de Bord WordPress și navigați la Aspectul->Teme și iată și iată, vom vedea noua temă am creat.

putem face clic pe” Detalii Temă ” pentru a detalia pe tema noastră personalizată și pentru a găsi că informațiile pe care le-am introdus în stil.fișierul css a funcționat. Putem vedea că ele au un nume de customtheme, cu versiunea 1.0, de către autorul Vegibit și un link către URI-ul pe care l-am furnizat. Foarte tare.,

și acum momentul adevărului! Mergeți mai departe și faceți clic pe” Activare ” pe noul customtheme și apoi vizitați site-ul. Nu va câștiga niciun premiu Webby, dar avem un început bun pe o nouă temă personalizată!

Pasul 4: Adauga Codul de Ieșire Post Titlu și Mesaj Text

Ne-am lua libertatea de a popula un cuplu de exemplu posturi în baza de date astfel încât să putem lucra cu date în acest tutorial. Chiar acum, tema noastră doar ieșiri temă personalizată!, la pagina atunci când vom vizita site-ul nostru, indiferent de cât de multe posturi sunt în baza de date. Să trecem acum la preluarea unor date din Baza de date și afișarea acestora pe pagină. Mai exact, vrem să preluăm titlul postării și să postăm conținutul tuturor postărilor și să le vizualizăm pe pagina principală. Să încercăm acum. Mai întâi să vedem ce avem pentru postările din tabloul de bord WordPress.

folosind bucla WordPress

acum putem vorbi puțin despre bucla WordPress. Bucla WordPress este într-adevăr motorul care face ca WordPress să ruleze., Prin această buclă, dezvoltatorii de teme verifică postările și le afișează pe pagină după cum este necesar. Dacă urmează formatul după cum urmează. În cazul în care baza de date are posturi, să bucla peste ele în timp ce există încă posturi, altfel vom lasa utilizatorul știu că nu există posturi. Se pare ca acest lucru în codul PHP.,

Observa ca Bucla face uz de două funcții în cea mai simplă formă. Acestea sunt have_posts () și the_post (). Funcția have_posts () face doar un singur lucru. Acesta vă spune dacă există posturi în baza de date pentru a bucla peste., Această funcție va reveni fie true sau false și asta este. Dacă returnează true , atunci există posturi disponibile pentru buclă. Dacă returnează false, atunci nu există postări de buclă. Cealaltă funcție, the_post () nu returnează nimic. Este de locuri de muncă este de a obține WordPress gata de posturi de ieșire. Mai exact, preia următoarea postare, configurează postarea, setează proprietatea in_the_looplatrue., Până în prezent, pagina noastră nu va afișa nicio informație despre postările noastre pe blog, dar o putem actualiza acum în indexul nostru.fișier php.

Ok rece. Acum am folosit două funcții WordPress suplimentare, the_title () și the_content (). Cel mai adesea, aceste funcții sunt utilizate în interiorul buclei și ceea ce fac este să aducă titlul și conținutul fiecărei postări pe măsură ce bucla iterează peste fiecare din Baza de date. Deci, pe măsură ce bucla rulează, va veni peste primul post., În acel moment, funcția_title() va afișa titlul postării în pagină și the_content() va afișa corpul acelei postări în pagină. În următoarea buclă, aceste funcții vor prelua din nou titlul și conținutul următor și le vor scoate în pagină. Deci, cu acestea în loc, ar trebui să vedem acum câteva informații despre postările noastre trimise pe ecran. Să încercăm! Vizităm http://wordpresstutorial.dev și vedem că funcționează!,

Pasul 5: Adauga un Link Spre Fiecare Post

Ce despre conectarea la fiecare post, astfel încât să putem vedea un post de la sine, mai degrabă decât ca parte din pagina de start. Putem face asta destul de ușor, din nou cu funcții speciale pe care WordPress le oferă. Pentru această sarcină, putem folosi funcția the_permalink (). Putem actualiza codul nostru astfel:

acum, putem face clic pe fiecare titlu de postare individual și naviga la o pagină care are doar acea postare. Foarte tare!,

Pasul 6: Adăugați un antet și un subsol la tema personalizată

titlul și conținutul postului sunt esențiale pentru crearea unei teme bune. Aproape la fel de important este să ai o secțiune de antet și subsol a temei tale. Aceste secțiuni ar conține conținutul care este întotdeauna vizibil pe toate paginile site-ului. Aceste secțiuni sunt deasupra și dedesubtul conținutului postării. Pentru a face acest lucru, ați ghicit, vom folosi funcțiile speciale oferite de WordPress pentru a obține antetul și pentru a obține subsolul. Vedeți un model care începe să se dezvolte încă?, Aproape orice puteți face ca dezvoltator de teme în WordPress a fost deja făcut pentru dvs. prin intermediul acestor funcții personalizate. Deci, veți găsi că plătește pentru a memora aceste funcții utilizate în mod obișnuit în dezvoltarea temelor WordPress. Să mergem mai departe și adăugați funcțiile get_header() și get_footer() în fișierul nostru tematic acum.

Ei bine, te-ai uita la asta?! Putem vedea că tema noastră personalizată are acum o zonă de antet, precum și o zonă de subsol., În antet se află numele și sloganul site-ului în timp ce în subsol vedem textul familiar, tutorialul WordPress este alimentat cu mândrie de WordPress. Acestea sunt opțiunile implicite pentru antet și subsol atunci când utilizați aceste funcții. Dar când vrem să avem un antet și un subsol personalizat? Vine imediat!până în prezent, în acest tutorial, avem două fișiere care trăiesc în folderul nostru customtheme (care în sine este în folderul teme). Aceste fișiere sunt stil.css și index.php. În acest moment, va trebui să adăugăm mai multe fișiere pentru a merge mai departe., Continuați și creați două fișiere noi în folderul customtheme. Aceste fișiere vor fi numite în mod convenabil antet.php și subsol.php.

Acum ce aceste fișiere vor face este de a suprascrie implicit antet și subsol aspecte furnizate în mod implicit atunci când apelați fie get_header() sau get_footer() funcții. De fapt, dacă reîmprospătăm site-ul nostru, se pare că antetul și subsolul au dispărut. Acest lucru se datorează faptului că nu am adăugat încă niciun marcaj la acele fișiere. Doar pentru rânjete, configurați fișierele ca atare pentru a testa acest lucru.

antet.,php

footer.,php

Working with header.,php

exemplul nostru de mai sus a funcționat excelent și ne arată cum funcționează acest fișier la cel mai de bază nivel. Antetul.fișier php este de fapt destul de important, cu toate acestea, să nu luciu peste detaliile de ea prea repede! Aici includeți codul la care toate paginile de pe site-ul dvs. vor avea nevoie de acces într-un fel sau altul. Pentru început, toate paginile HTML vor avea un doctype. Ați specifica asta în acest fișier. În plus, toate paginile vor avea o etichetă html de deschidere, O secțiune de cap și o etichetă de corp de deschidere. Toate acestea pot merge în antet.fișier php., Să adăugăm rapid câteva dintre aceste lucruri pe care toate paginile web le-ar folosi. Vom face uz de câteva noi funcții WordPress aici, de asemenea. Acestea vor fi language_attributes(), bloginfo() și body_class().

antet.php

dacă reîncărcăm pagina și apoi vizualizăm sursa paginii în browserul nostru, ne putem face o idee despre exact ce fac aceste funcții. Subliniem liniile care au ieșire care au venit din aceste funcții de mai jos:

Din nou, putem vedea utilizarea foarte liberală a funcțiilor WordPress atunci când vă dezvoltați propriile teme în WordPress., De fapt, nu am scris încă niciun cod personalizat. Pur și simplu învățăm ce ne pot oferi diferitele funcții WordPress și apoi le punem să funcționeze în tema noastră personalizată.

inclusiv wp_head ()

wp_head () este un fel de funcție specială atunci când lucrați cu teme WordPress. Nu este la fel de simplu ca toate celelalte la care ne-am uitat până acum. Scopul acestei funcții este de a finaliza ieșire în <cap> secțiunea de antet.fișier php., De fapt, este menit să meargă chiar înainte de închidere </head> tag-ul. Acest lucru devine important atunci când începeți să adăugați diverse pluginuri pe site-ul dvs. Se imprimă script-uri sau date în eticheta cap pe front-end. Este o bună practică pentru a include întotdeauna wp_head() în temele și multe alte plugin-uri se pot baza pe acest cârlig pentru a adăuga stiluri, script-uri, sau meta elemente <cap> zona a site-ului. O vom adăuga ca atare aici:

antet.php

completarea subsol.,php

am terminat de adăugat elementele de bază a ceea ce vom avea nevoie în antet.fișier php. Să mergem acum și să rotunjim subsolul.fișier php. Sunt câteva lucruri pe care trebuie să le facem. Amintiți-vă că în antetul nostru.fișier php avem deschiderea html și corp tag-uri. Acestea trebuie să fie închise la un moment dat. Subsolul.fișierul php este un loc perfect pentru a face acest lucru. Deci, vom adăuga închidere </html> și </corp> tag-uri în plus față de a face un apel la wp_footer() funcție.
subsol.,php

Schimbă Site-ul de Informații În WordPress tabloul De Bord

poate Vă întrebați de ce am avut de a face uz de toate aceste funcții de lux pentru a construi tema noastră. De exemplu, când am vrut să enumerăm numele și sloganul site-ului nostru, am folosit funcția bloginfo() care trece parametrii numelui și descrierii., Motivul pentru aceasta se datorează faptului că, în general, nu doriți niciodată să codificați aceste valori în site-ul dvs. Acestea sunt informații care s-ar putea schimba. În plus,, dacă vă face tema la dispoziția publicului, ei vor avea propriul lor nume și sloganul pentru site-ul lor. Ar trebui să poată vizita pur și simplu tabloul de bord al administratorului în WordPress și să își actualizeze setările generale pentru a vedea aceste date populate automat.cele mai multe teme vor oferi posibilitatea de a face clic pe textul din titlu al site-ului și de a direcționa utilizatorul către pagina de pornire a site-ului., În acest fel, indiferent unde utilizatorul poate fi pe site-ul, ei pot întotdeauna faceți clic pe acel text titlu și du-te înapoi la pagina principală a site-ului. Să adăugăm acel link acum în antet.php.

Pasul 7: Adăugați funcții.fișier php la tema

în acest moment, avem patru fișiere în tema noastră personalizată. Acestea sunt index.php, stil.css, antet.php, și subsol.php. Probabil următorul fișier cel mai important pe care trebuie să-l avem este funcțiile.fișier php.

funcțiile.fișier php în WordPress face multe lucruri pentru tema ta. Este fișierul în care plasați codul pentru a modifica comportamentul implicit al WordPress., Vă puteți gândi aproape la funcții.php ca o formă de un plugin pentru WordPress cu câteva puncte cheie de reținut:

• nu Are nevoie de unic text Antet
• Stocate în folderul care deține fișiere tematice
• Execută numai atunci când, în prezent activat tema de director
• se Aplică numai pentru tema curentă
• Pot apela funcții PHP, WordPress funcții, sau funcții personalizate

Un singur lucru avem nevoie de mult în tema noastră este ceva mai bine de styling! Să creăm o funcție în funcțiile noastre.fișier php pentru a include stilul.fișier css în tema noastră., Iată cum putem atinge acest obiectiv.

această bucată de cod va include sau va activa foaia de stil a temei noastre personalizate. Acum s-ar putea să vă întrebați de ce folosim o funcție personalizată, când se pare că am putea la fel de ușor să ne conectăm manual la foaia de stil din antet.fișier php. Ei bine, acest lucru se reduce la a face un pic mai mult de lucru în față pentru un profit mai mare pe efortul dumneavoastră mai târziu. Pe măsură ce temele devin mai complexe și se adaugă mai multe active, veți fi fericiți să aveți această funcție care poate face față tuturor ridicărilor grele pentru dvs.,

acum este timpul pentru a face lucrurile arata un pic mai frumos. Mai întâi, să adăugăm un ambalaj <div> cu o clasă de containere. Deschiderea <div> va fi în antet.php, în timp ce închiderea <div> va fi în subsol.php. Vom încheia, de asemenea, ieșirea post în index.php cu o etichetă <article> care are o clasă de post. Acest lucru ne va oferi clase pentru a viza în stilul nostru.,fișier css, astfel încât să putem seta lățimea paginii, printre altele. Vom adăuga, de asemenea, un stil mai bun stilului.css în acest pas.

Pasul 8: Adăugați un anumit stil temei

antet.php
Adăugarea o deschidere <div> pentru antet.fișier php.

subsol.php
Adăugarea unui închidere </div> la subsol.fișier php.

index.php
Ambalaj postul de ieșire cu un <articol> tag-ul

stil.,css
În cele din urmă, vom adăuga unele Diverse îmbunătățiri de stil CSS pentru a face tema arata un pic mai frumos.când vizităm site-ul nostru de testare acum în browser, putem vedea că tema WordPress pe care am dezvoltat-o pas cu pas în acest tutorial arată destul de bine!

Temă WordPress Dezvoltare Tutorial Pas Cu Pas Rezumat

Să trecem în revistă tot ce am învățat în acest pas cu pas de bază Temă WordPress tutorial pentru incepatori., Am învățat cum să creăm prima noastră temă personalizată în WordPress, făcând propriul nostru folder în partea din folderul teme al instalării noastre WordPress. În acest dosar, am adăugat diferite fișiere care corespund diferitelor secțiuni ale site-ului dvs. web. În tutorialul nostru, am început cu minimele goale pe care ar trebui să le aveți într-o temă WordPress. În viitor, veți adăuga mai multe fișiere în acest dosar decât ceea ce am acoperit. Să examinăm fiecare fișier pe care l-am creat în acest tutorial și ce au făcut pentru noi.

• stil.,css acest fișier este locul în care adăugați câteva comentarii css, astfel încât WordPress să știe câteva informații despre tema dvs. personalizată. De asemenea, deține stilul css personalizat pe care îl veți aplica temei dvs.
• index.php acest fișier controlează html și ieșirea generală a temei. Este fișierul principal utilizat pentru afișarea datelor pe pagina dvs. de pornire.
• antet.,php vă Permite să specificați o zonă a deține informații importante despre site-ul în <cap> zonă, precum și de deschidere <html>, <corp>, și ,<div class=”container”> tag-uri.
• subsol.php subsolul va închide toate etichetele de deschidere pe care le-ați specificat în zona antetului, pe lângă faptul că vă oferă un loc pentru a apela funcția wp_footer ().
• funcții.,php vă permite să pentru a apela funcții, atât PHP și Built-in WordPress, și pentru a defini propriile funcții, în scopul de a schimba comportamentele implicite ale WordPress

deci, nu-l ai! Am reușit să creăm o temă WordPress personalizată pe deplin funcțională, cu doar 5 fișiere. Acest lucru ne oferă cunoștințe la nivel de fundație pentru a construi teme și funcții WordPress mai avansate. Bună Treabă!