1. 1. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 1)
  2. 2. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 2)
  3. 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.

Un mic amorsare HTML

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:

html-WordPress = structură

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:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

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:




<?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:

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:

Puneți conținutul dvs. de subsol aici, inclusiv apelurile funcției php (pentru a obține diferite fișiere șablon, de exemplu, search.php), dacă este necesar.

Observați și închiderea etichetelor în footer.php? Puteți ghici de ce trebuie incluse în footer.php? În mod similar, puteți ghici de ce și etichetele de deschidere sunt incluse în antetul.php? Vă rugăm să ne cunoaștem convingerile dvs. în secțiunea de comentarii de la sfârșitul acestui post ��

Cele patru fișiere șablon pe care tocmai le-am acoperit mai sus alcătuiesc o temă WordPress de bază. Există multe alte fișiere de șabloane; există un fișier șablon pentru fiecare element pe care îl vedeți pe o temă WordPress, fie că este vorba de comentarii, rezultate de căutare și 404 de pagini de eroare, doar pentru a menționa câteva.

Pentru a înțelege complet anatomia unei teme WordPress, trebuie să vă familiarizați cu diferite fișiere de șabloane. Puteți răsfoi toate plăci de șablon utilizabile la WordPress.

Apoi avem tag-uri de șabloane, pe care WordPress le folosește pentru a prelua fișiere șablon din directorul tematic. Puteți afla mai multe despre etichetele de șablon și rolul pe care îl joacă la WordPress.

rezumat

O temă WordPress constă din următoarele elemente anatomice:

  • Fișiere șablon precum index.php, header.php, search.php, category.php etc
  • Etichete de șabloane cum ar fi , etc
  • CSS
  • Imagini și alte fișiere media
  • Fișiere JavaScript

Iată o ilustrație care rezumă anatomia unei teme WordPress:

Căutați să continuați învățarea? Verificați detaliile Ghid de anatomie tematică din Codexul WordPress.

Concluzie

Fiecare temă WordPress pe care o vedeți pe web folosește aceeași structură anatomică (chiar și tema noastră populară Total WordPress), pe care o puteți personaliza pentru a satisface nevoile dvs. Odată ce vă înconjurați capul de bază asupra dezvoltării temelor WordPress, nu există nicio limită la ceea ce puteți face cu / la temele WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me