1. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 1)
2. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 2)
3. Acum citesc: O introducere în anatomia unei teme WordPress
Cu ceva timp în urmă, v-am prezentat conceptul de creare a unei teme WordPress din HTML. Am împărțit tutorialul în două părți și astăzi avem de gând să perfecționăm cele două tutoriale, așa că nu ezitați să considerați acest post ca a treia servire din seria post. Obiectivul meu este să desprind tema WordPress pentru a vă oferi o imagine clară a modului în care funcționează (tema).
Acest post presupune că aveți o cunoștință de lucru despre HTML și CSS. Voi merge mai departe și voi declara că deținerea deprinderilor HTML și CSS este o condiție prealabilă în proiectarea temelor WordPress. Încă un lucru, această postare va rămâne la curent cu cuvintele mari și conceptele dificile – va fi ușor de înțeles, așa că fii gata să te distrezi și să înveți.
Fiecare pagină web HTML este împărțită în diferite părți folosind butonul
etichetă. De exemplu, puteți rupe corpul () site-ului dvs. web în mai multe secțiuni, cum ar fi navigarea, antetul, conținutul principal, bara laterală și subsolul, printre altele.
După ce aveți pagina web în secțiuni, puteți comanda (sau aranja) secțiunile așa cum doriți folosind CSS. Acest proces este cunoscut sub denumirea de styling și implică adăugarea altor elemente de stil, cum ar fi culoarea, dimensiunea, bordurile, efectele speciale etc. Aceasta este puterea CSS, care – apropo – este scurtă pentru foile de stil Cascading. Când puneți fișierele HTMl și CSS împreună și aruncați câteva imagini, ajungeți la un site complet.
Lucrurile nu sunt foarte diferite cu temele WordPress. Așa cum am văzut în partea 1 din Cum să creăm o temă WordPress din HTML, temele WordPress sunt împărțite în fișiere diferite. Dacă nu puteți observa o asemănare în acest moment, permiteți-mi să vă explic.
Pagini web statice HTML sunt împărțite în divizii (ceea ce am numit secțiuni anterior) folosind
etichete (sau tabele dacă sunteți într-adevăr școală veche). Pe de altă parte, temele WordPress sunt împărțite în fișiere php diferite, care sunt apoi reluate folosind etichete șablon.
Prin urmare, în loc să aibă toate elementele corpului (antet, conținut principal, bară laterală, subsol etc) care trăiesc într-un singur fișier (cum este cazul HTMLului static), fiecare dintre elementele corpului (în temele WordPress) trăiește într-un fișier separat.
Deci, antetul va trăi în header.php, bara laterală va găsi acasă în sidebar.php, conținutul principal va trăi în index.php, sau single.php (dacă este o postare) sau page.php (dacă este o pagină ). Secțiunea de subsol va locați în footer.php și așa mai departe.
Urmărești? Vezi ilustrația de mai jos:
Din ilustrația noastră de mai sus, , și se numesc etichete de șablon. Munca lor este să preluăm header.php, sidebar.php și footer.php în acea ordine din directorul dvs. tematic și să afișăm conținutul în index.php, completând astfel pagina web.
Nu lăsa .php extensia vă sperie, conținutul din fișierele php este doar cod HTML cu care vă familiarizați. De exemplu, antetul dvs..php poate conține navigarea tipică a listelor HTML. În mod similar, puteți pune cod HTML tipic în footer.php, sidebar.php și index.php.
Puteți, de asemenea, să plasați loop.php funcționează în index.php (sau oriunde îți place) pentru a afișa postările de pe blogul tău, dar ar trebui să încetinesc și să revin la anatomia temelor WordPress. Am menționat un lucru sau două despre bucla din partea a 2-a despre cum să creezi o temă WordPress din HTML. și vom vorbi despre asta (bucla) și alte funcții în viitor.
Trecând peste…
O temă de bază WordPress este alcătuită din cel puțin patru fișiere șablon și anume:
index.php
header.php
sidebar.php
footer.php
Să vedem ce se întâmplă în fiecare dintre acestea magicfișiere:
Fișierul șablon Index.php
Acesta este fișierul principal fără de care nu aveți o temă WordPress funcțională. Este primul fișier (sau implicit) care se încarcă atunci când vizitați un site web WordPress. Luați în considerare echivalentul index.html.
Un index.php tipic în temele WordPress va arăta astfel:
Puteți adăuga bucla între și pentru a afișa postări de blog pe pagina principală (index.php) așa cum se arată mai jos:
Acest fișier șablon conține codul antetului, navigarea și codul HTML. Practic, header.php stochează tot ce vrei să arăți în partea de sus a site-ului tău. Știi, lucruri precum titlul site-ului tău și chestii de genul ăsta.
De asemenea, faceți legătura cu fișa de stil CSS din antetul.php. Iată un exemplu de bază al antetului.php:
<?php wp_title( '|', true, 'right' ); ?>
Aceasta este secțiunea antet. Puneți logo-ul și alte detalii aici.
Sidebar.php File File
Sidebar.php conține tot ce trebuie să apară pe bara laterală. Bara laterală conține meniuri suplimentare, widget-uri, categorii, pictograme de social media, conținut personalizat, cod HTML, precum reclame etc.
Sidebar.php poate conține marcaje HTML sau apeluri funcționale php în funcție de nevoile dvs. Ca atare, un sidebar.php de bază poate arăta ca:
Puneți aici conținutul personalizat sau codul HTML.
Fișier șablon footer.php
Ce crezi că intră în footer.php? Puteți pune informațiile dvs. de copyright aici, meniuri suplimentare, link-uri, pictograme de social media – orice doriți! Doriți să vedeți cum arată un footer.php de bază? Aici:
07.06.2020
O introducere în anatomia unei teme WordPress
Jeffrey Wilson sfaturi
Cu ceva timp în urmă, v-am prezentat conceptul de creare a unei teme WordPress din HTML. Am împărțit tutorialul în două părți și astăzi avem de gând să perfecționăm cele două tutoriale, așa că nu ezitați să considerați acest post ca a treia servire din seria post. Obiectivul meu este să desprind tema WordPress pentru a vă oferi o imagine clară a modului în care funcționează (tema).
Acest post presupune că aveți o cunoștință de lucru despre HTML și CSS. Voi merge mai departe și voi declara că deținerea deprinderilor HTML și CSS este o condiție prealabilă în proiectarea temelor WordPress. Încă un lucru, această postare va rămâne la curent cu cuvintele mari și conceptele dificile – va fi ușor de înțeles, așa că fii gata să te distrezi și să înveți.
Contents
Un mic amorsare HTML
Fiecare pagină web HTML este împărțită în diferite părți folosind butonul
După ce aveți pagina web în secțiuni, puteți comanda (sau aranja) secțiunile așa cum doriți folosind CSS. Acest proces este cunoscut sub denumirea de styling și implică adăugarea altor elemente de stil, cum ar fi culoarea, dimensiunea, bordurile, efectele speciale etc. Aceasta este puterea CSS, care – apropo – este scurtă pentru foile de stil Cascading. Când puneți fișierele HTMl și CSS împreună și aruncați câteva imagini, ajungeți la un site complet.
Lucrurile nu sunt foarte diferite cu temele WordPress. Așa cum am văzut în partea 1 din Cum să creăm o temă WordPress din HTML, temele WordPress sunt împărțite în fișiere diferite. Dacă nu puteți observa o asemănare în acest moment, permiteți-mi să vă explic.
Pagini web statice HTML sunt împărțite în divizii (ceea ce am numit secțiuni anterior) folosind
Prin urmare, în loc să aibă toate elementele corpului (antet, conținut principal, bară laterală, subsol etc) care trăiesc într-un singur fișier (cum este cazul HTMLului static), fiecare dintre elementele corpului (în temele WordPress) trăiește într-un fișier separat.
Deci, antetul va trăi în header.php, bara laterală va găsi acasă în sidebar.php, conținutul principal va trăi în index.php, sau single.php (dacă este o postare) sau page.php (dacă este o pagină ). Secțiunea de subsol va locați în footer.php și așa mai departe.
Urmărești? Vezi ilustrația de mai jos:
Din ilustrația noastră de mai sus, , și se numesc etichete de șablon. Munca lor este să preluăm header.php, sidebar.php și footer.php în acea ordine din directorul dvs. tematic și să afișăm conținutul în index.php, completând astfel pagina web.
Nu lăsa .php extensia vă sperie, conținutul din fișierele php este doar cod HTML cu care vă familiarizați. De exemplu, antetul dvs..php poate conține navigarea tipică a listelor HTML. În mod similar, puteți pune cod HTML tipic în footer.php, sidebar.php și index.php.
Puteți, de asemenea, să plasați loop.php funcționează în index.php (sau oriunde îți place) pentru a afișa postările de pe blogul tău, dar ar trebui să încetinesc și să revin la anatomia temelor WordPress. Am menționat un lucru sau două despre bucla din partea a 2-a despre cum să creezi o temă WordPress din HTML. și vom vorbi despre asta (bucla) și alte funcții în viitor.
Trecând peste…
O temă de bază WordPress este alcătuită din cel puțin patru fișiere șablon și anume:
Să vedem ce se întâmplă în fiecare dintre acestea magic fișiere:
Fișierul șablon Index.php
Acesta este fișierul principal fără de care nu aveți o temă WordPress funcțională. Este primul fișier (sau implicit) care se încarcă atunci când vizitați un site web WordPress. Luați în considerare echivalentul index.html.
Un index.php tipic în temele WordPress va arăta astfel:
Puteți adăuga bucla între și pentru a afișa postări de blog pe pagina principală (index.php) așa cum se arată mai jos:
Fișier șablon antet.php
Acest fișier șablon conține codul antetului, navigarea și codul HTML. Practic, header.php stochează tot ce vrei să arăți în partea de sus a site-ului tău. Știi, lucruri precum titlul site-ului tău și chestii de genul ăsta.
De asemenea, faceți legătura cu fișa de stil CSS din antetul.php. Iată un exemplu de bază al antetului.php:
Sidebar.php File File
Sidebar.php conține tot ce trebuie să apară pe bara laterală. Bara laterală conține meniuri suplimentare, widget-uri, categorii, pictograme de social media, conținut personalizat, cod HTML, precum reclame etc.
Sidebar.php poate conține marcaje HTML sau apeluri funcționale php în funcție de nevoile dvs. Ca atare, un sidebar.php de bază poate arăta ca:
Fișier șablon footer.php
Ce crezi că intră în footer.php? Puteți pune informațiile dvs. de copyright aici, meniuri suplimentare, link-uri, pictograme de social media – orice doriți! Doriți să vedeți cum arată un footer.php de bază? Aici:
Observați și