Anatomia unei teme WordPress

Publicat: 2015-06-04

Acesta este un capitol din „Up and Running: A Practical Guide to WordPress Development”, un ghid multimedia pentru dezvoltarea WordPress, care va fi lansat pe 16 iunie. Pachetul complet include o carte electronică completă, peste 50 de teme și videoclipuri tutoriale de dezvoltare a pluginurilor, și interviuri de prezentare a codului cu 13 dintre cei mai buni dezvoltatori WordPress din lume. Precomandă acum pe upandrunningwp.com pentru o reducere de 20%!

Recomandări cheie:

  • O temă WordPress este formată dintr-un set de părți consistente. Părțile cruciale ale unei teme non-copil includ style.css , functions.php și mai multe tipuri de fișier șablon PHP (cum ar fi header.php , footer.php și index.php ).
  • Fiind principala sursă de stil CSS a temei, style.css dictează aspectul vizual al temei. O secțiune de comentarii din partea de sus a style.css este, de asemenea, unde sunt înregistrate numele temei, autorul etc.
  • functions.php este locul în care adăugați funcționalitate de prezentare temei dvs. Prin functions.php , veți adăuga foi de stil CSS, fișiere JavaScript, meniuri de navigare, zone widget și alte funcționalități.
  • Fișierele șablon pot fi împărțite informal în: fișiere șablon „utilizate întotdeauna” ( header.php și footer.php și sidebar.php dacă este cazul); fișiere din ierarhia șablonului WordPress (cum ar fi index.php , single.php și page.php ); și „părți șablon” (fragmente incomplete extrase din alte fișiere șablon pentru a reduce repetarea).
  • Temele pot fi arbitrar mari și complexe; dar acestea sunt piesele care sunt cele mai importante și previzibile acolo.

Acest scurt capitol se învârte în jurul unei diagrame mari. De ce să aștepți? Iată-l:

Anatomia unei teme WordPress

Nu vă panicați! Veți înțelege acest lucru destul de curând. În restul acestui capitol, vom explica fiecare parte a diagramei mai în profunzime.

Ce este într-un nume?

WordPress decide cum să trateze fișierele cu teme în funcție de numele lor.

Primul lucru de observat este că fiecare fișier din diagramă are un nume special. functions.php , style.css , index.php — niciunul dintre aceste fișiere nu este denumit accidental și niciunul dintre numele lor nu este arbitrar.

WordPress decide cum să trateze fișierele cu teme în funcție de numele lor. Are un tratament special scris pentru functions.php , dar deloc pentru functionz.php . Deci, dacă încărcați un set de instrucțiuni ca functions.php , WordPress le va interpreta; dar dacă încărcați aceleași instrucțiuni ca functionz.php , WordPress, în mod implicit, va ignora complet acel fișier și instrucțiunile acestuia.

stil.css

style.css este sursa principală a aspectului vizual al temei.

style.css este sursa principală de stil CSS a temei. Ca atare, este sursa principală a aspectului vizual al temei - totul, de la alegerea fonturilor și a culorilor până la dacă tema funcționează pe o grilă receptivă.

Deci, de exemplu, dacă introduceți următorul CSS în style.css al temei:

p {
color: blue;
}

… apoi orice se află într-un paragraf, oriunde pe site-ul dvs. în timp ce rulează tema dvs., va deveni albastru. Foarte tare, nu?

style.css este locul în care vă veți face cea mai mare parte a muncii pentru ca temele să arate așa cum doriți.

Acest tip de control vizual înseamnă că există o mulțime de lucru de făcut în style.css — este locul în care vei face cea mai mare parte a muncii tale pentru ca temele să arate așa cum vrei.

style.css este, de asemenea, modul în care vă înregistrați tema

style.css găzduiește și o secțiune de comentarii în antetul său, unde sunt înregistrate datele temei — numele temei, autorul, tema părinte, dacă există și așa mai departe. Asta arată în felul următor:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress citește aceste comentarii pentru a obține informații despre tema ta. Așadar, micul bloc de comentarii de mai sus – și nimic mai elegant sau mai tehnic – este ceea ce face ca tema dvs. să apară în lista de teme a site-ului dvs. în Aspect > Teme din zona de administrare WordPress:

temaAnatomie1

Puteți vedea un exemplu de date reale de înregistrare a unei teme pe rândurile 1 până la 6 din style.css în acel grafic mare, Anatomy of a WordPress Theme.

funcții.php

functions.php este locul în care adăugați funcționalitate personalizată temei dvs. Acest lucru ar putea fi foarte mult, inclusiv:

  • Adăugarea de foi de stil CSS (inclusiv style.css însuși) și fișiere JavaScript
  • Înregistrarea zonelor meniului de navigare și a zonelor widget
  • Definirea dimensiunilor de imagini personalizate pe care doriți să fie disponibile pe site-ul dvs
  • Filtrarea conținutului paginii dvs

functions.php „vorbește” cu restul WordPress în primul rând prin intermediul cârligelor WordPress (numite și cârlige de acțiune și filtru), care îi permit să adauge funcționalitate exact în locurile potrivite. Intrăm mai adânc în funcționarea functions.php în Conceptele de bază ale temelor WordPress: 3. Adăugarea de funcționalități cu functions.php și intrăm mult mai mult în hook-uri în WordPress Hooks (Acțiuni și filtre): Ce fac și cum funcționează.

Fișiere șablon PHP

Fișierele șablon ale unui site WordPress determină marcajul site-ului. Fără ele, literalmente nu există nimic pe pagină.

Cea mai mare parte a fișierelor unei teme sunt fișierele șablon PHP. Dacă functions.php este creierul unei teme, iar style.css este hainele sale, iar fișierele șablon sunt corpul său real.

Fișierele șablon sunt fișiere ,code>.php care conțin o combinație de markup HTML și cod PHP. (Verificați acea grafică și veți vedea cum arată.)

Fișierele șablon creează markup în două moduri

Împreună, aceste fișiere determină marcajul site-ului: HTML-ul real pe care browserul îl afișează atunci când vă vizitează site-ul. Ei fac asta în două moduri.

1. HTML

În primul rând, fișierele șablon imprimă HTML direct în browser, la fel ca un fișier .html obișnuit. Orice nu este în <!--?php?--> nu este PHP: este doar HTML simplu care merge direct în pagină. Deci, dacă header.php al unei teme include un pic de HTML, cum ar fi următorul: 

<body class="site-body">

Exact asta va vedea un browser pe fiecare pagină web WordPress care include header.php , care ar trebui să fie toate.

2. PHP

Fișierele șablon își fac cu adevărat magia folosind PHP, care se compilează sau se transformă în HTML. Ca exemplu simplu, același fișier header.php ar putea conține, în schimb, următorul cod: 

<body class="<?php echo 'site-body'; ?>">

PHP adăugat pur și simplu ecou (tipărește) șirul site-body direct pe pagină. Așadar, serverul a efectuat o procesare PHP suplimentară, dar browserul încă vede același HTML vechi.

După cum vă puteți imagina, fișierele șablon ale unei teme sunt absolut cruciale: fără ele, literalmente, nu există nimic pe pagină.

Fișiere șablon „folosite întotdeauna”.

header.php și footer.php sunt de obicei folosite peste tot într-o temă, deoarece majoritatea site-urilor doresc un antet și un subsol coerente în diferite pagini.

Unele fișiere șablon sunt folosite pe fiecare pagină web a unui site. Exemplele majore sunt header.php și footer.php .

Aceste fișiere sunt folosite atât de des încât WordPress are funcții speciale pentru includerea lor în alte fișiere șablon: get_header() și get_footer() . Denumite astfel, fără parametri, acele funcții pur și simplu iau header.php și footer.php și le plasează acolo unde a fost apelată funcția.

De ce sunt folosite aceste fișiere peste tot? Se datorează faptului că majoritatea site-urilor doresc un antet și un subsol coerente în diferite pagini. Dacă o pagină are sigla companiei dvs. și meniul de navigare principal, este un pariu bun că veți dori ca și alte pagini să facă același lucru. Același lucru este valabil și pentru subsolul dvs. din partea de jos a paginii.

Ca o notă, sidebar.php este, de asemenea, un fel de acest tip de fișier, deoarece se întâmplă adesea ca majoritatea tipurilor de pagini web de pe un site să partajeze o singură bară laterală - poate cu excepția paginilor cu lățime completă dedicate afișarii tipului de pagină postări. sidebar.php are și propria funcție, get_sidebar() .

Fișierele din ierarhia șabloanelor WordPress

Adevărata emoție se întâmplă în fișiere precum index.php , single.php și page.php . Aceste fișiere dictează ce markup va apărea pentru diferite tipuri de date de postare .

Pentru a reformula asta, WordPress știe ce pagină să folosească pentru ce tip de date de postare. De exemplu:

  • Dacă pagina web solicitată implică o postare de tip pagină (de exemplu, pagina ta Despre), WordPress va folosi probabil page.php pentru a construi pagina web respectivă.
  • Dacă pagina web solicitată este o postare individuală de tip post (de exemplu, vizualizați o anumită postare de blog), WordPress va folosi probabil single.php pentru a o crea.
  • Dacă te uiți prin toate postările de tip Post pe care le-ai scris în 2014, WordPress va folosi probabil archive.php pentru a construi acea pagină web.

Aceasta este magia ierarhiei de șabloane WordPress , pe care o acoperim în profunzime în Conceptele de bază ale temelor WordPress: 1. Ierarhia șabloanelor.

Aceste fișiere șablon se bazează în jurul buclei

Aceste fișiere șablon „în ierarhia șablonului” împărtășesc toate ceva foarte important: sunt construite în jurul Buclei, unul dintre principiile de bază absolute ale dezvoltării WordPress.

Aprofundăm bucla în Conceptele de bază ale temelor WordPress: 2. Procesarea postărilor cu The Loop. The Loop este foarte grozav, așa că, dacă ești nou în el, ține-ți șosetele pentru ca The Loop să nu-i explodeze!

Piese de șablon

Să presupunem că există o secțiune atât a index.php cât și a page.php care este exact aceeași. Ar trebui să repetăm ​​acel cod în ambele fișiere?

De fapt, DRY — „Nu te repeta!” — este un strigăt de luptă pentru programatori buni. Repetarea cauzează tot felul de probleme. Ce se întâmplă dacă vrei să schimbi ceva la secțiunea repetată? Acum trebuie să-l schimbi în două locuri. Ce se întâmplă dacă uiți să-l schimbi într-un loc sau faci o greșeală într-un fișier, dar nu în altul? Acum codul dvs. nu este sincronizat și site-ul dvs. are erori. (Acum: ce se întâmplă dacă repeți același cod de douăzeci de ori? Trebuie să repeți fiecare schimbare pe care o faci de douăzeci de ori și să speri că le-ai „prins pe toate”).

Părțile șablon preiau o parte probabilă a fi repetată a unui fișier șablon și le mută într-un fișier nou. În acest fel, atât index.php cât și page.php se pot referi pur și simplu la aceeași parte a șablonului, mai degrabă decât să o scrie individual de două ori; iar dacă vrei să schimbi acea secțiune o schimbi o singură dată.

Acum știi anatomia temei tale

Acestea sunt lucrurile pe care trebuie să le înțelegeți cu adevărat despre o temă WordPress. Chiar și o temă ThemeForest mult prea mare va fi construită în jurul acestui schelet principal, așa că înțelegeți cum aceste piese se interconectează și veți avea multă putere de a înțelege temele WordPress.

Odată cu acea lecție de anatomie încheiată, următoarele trei capitole se scufundă în patru dintre principiile cruciale de programare care explică modul în care o temă își face treaba:

  1. Ierarhia șablonului WordPress
  2. Bucla
  3. funcții.php
  4. Cârlige WordPress

Mai departe!