În Tutoriale

Crearea unei teme WordPress: front-end şi structură (I)

temă de wordpress

WordPress este platforma care populează 25% din toate website-urile din întreaga lume. În această serie de tutoriale doresc să vă explic cum se creează o temă WordPress completă, conform standardelor oficiale. Pe lângă tutorial, o să vă explic şi cât mai multe edge-case-uri pe care le-am întâlnit de-a lungul anilor, după care vă voi detalia câteva practici comune, aplicate în comunitate.

WordPress a fost disponibil de la bun început în mod gratuit, distribuit sub licența GPL. Prima versiune .70 a fost lansată în 27 Mai 2003, de către Matt Mullenweg, CEO la Automattic, companie responsabilă de proiectul WordPress în ziua de azi și fondată în anul 2005.

La început a fost o simplă platformă de blogging, dar în timp a evoluat și s-a dezvoltat într-un puternic CMS, nu unul pe placul tuturor programatorilor web din păcate, dar cu siguranță va ajunge la nivelul unde va mulțumi pe toată lumea.

Versiunea de WordPress folosită în acest tutorial este 4.4.x, fiind ultima versiune lansată.

Cunoștințe necesare – A little bit of this, a little bit of that

Pentru a dezvolta o temă WordPress și pentru a parcurge acest tutorial, ai nevoie de o bună înțelegere a limbajelor de mark-up HTML și CSS și de o înțelegere minimă a limbajului de programare PHP. Limbajele de scripting precum JavaScript sunt opționale, dar deseori necesare. Pe lângă acestea, o înțelegere completă a platformei WordPress este absolut necesară. Înainte de a începe tutorialul trebuie să cunoști tot ce poți face cu platforma.

Temele WordPress nu sunt o măiestrie a limbajului PHP, adică nu necesită o experiență foarte mare în limbajul PHP. Înainte de a începe tutorialul, să te asiguri că înțelegi și cunoști bazele limbajului de programare PHP, deoarece pe parcursul tutorialului o să lucram cu funcții, loop-uri, condiții sau array-uri. Desigur, nu ne limităm doar la cele enumerate.

Development Setup

Pentru a rula o instanță de WordPress în calculatorul vostru, aveți nevoie de un server local, care va funcționa și fără conexiune la internet. WordPress necesită PHP și MySQL 5.6+. El poate rula practic pe orice tip de server care suportă PHP și MySQL, versiunile de mai sus, dar se recomandă un setup pe Apacahe sau Nginx.

Eu vă recomand XAMP sau MAMP, ambele gratuite și foarte ușor de instalat. După instalare, căutați folderul htdocs/ și acolo, sau în alt folder din acest folder, va urma să instalăm platforma WordPress.

Structura unei teme WordPress

Toate fișierele temei vor fi plasate într-un singur folder, aflat în folder-ul wp-content/ din install-ul vostru de WordPress. Orice alt fişier în afara acestui folder nu este considerat parte din temă ci este considerat resursă externă. Numele folderului este folosit ca și slug de identificare al temei. Dacă tema este făcută pentru o audiență mare, este absolut necesar ca numele temei și slug-ul acesteia sa fie unice. Dacă tema este personalizată pentru un singur website, acest lucru nu este absolut necesar.

O temă are nevoie în mod obligatoriu de două fișiere ca să funcționeze:

  1. index.php
  2. style.css

Nu este recomandat să folosiți numai cele două fișiere.

Template files

Tema WordPress este construită în jurul template-urilor. Un template reprezintă un fișier din folderul temei. Pe lângă template-urile necesare pentru afișarea anumitor tipuri de conținut – de exemplu template-ul archive.php ne ajută la afișarea postărilor din arhiva blogului – există și template-uri parțiale deja definite în WordPress, template-uri precum header.php sau footer.php. Ele ne vor ajuta în mod evident să afișăm același header și footer pe toate paginile website-ului nostru.

Pe lângă template-urile de mai sus, suntem liberi să creăm câte template-uri dorim pentru absolut orice. Aici intervine creativitatea noastră pentru a menține o structură cât mai simplă și eficientă. De exemplu, dacă avem o secțiune „Ultimele știri” pe prima pagină, dar și o secțiune „Știri recomandate” pe pagina articolului, iar acestea au aceeași structură, putem folosi un singur fișier pentru afișarea respectivei postări. Este recomandat ca aceste fișiere să fie structurate pe foldere într-o ordine ierarhică cât mai ușor de înțeles și navigat.

template-teme-wordpress

Organizarea conținutului pe WordPress

Știm cum arată conținutul în Dashboard și pe website-urile pe care le citim, dar dacă dorim să construim o temă sau un plugin, este necesar să cunoaștem felul în care WordPress organizează conținutul în partea din spate.

Post Types

Un „Post Type” reprezintă un anumit tip de conținut. Folosind un post type, utilizatorul final are posibilitatea de a adăuga conținut pe website-ul lui. Desigur, el probabil nu știe asta, deoarece el adaugă postările din secțiunea „Posts” din Dashboard. Toate post type-urile sunt salvate, din păcate, în aceeași tabelă din baza de date și anume wp_posts, dar sunt diferențiate de o coloană numită post_type. Pe scurt, din punct de vedere tehnic, un post type reprezintă numele unei coloane din baza de date. Posturile împărtășesc aceeași valoare de post_type, ajung astfel să se grupeze în mai multe post types.

Noi avem posibilitatea de a defini câte post types (CPT) dorim. Dacă facem asta, terminologia se schimbă în Custom Post Type, iar în development numele rămâne în continuare post type.

WordPress are cinci post types predefinite:

  1. ‘posts’ – responsabil pentru postările normale, se găsește în Dashboard sub meniul „Posts”
  2. ‘page’ – responsabil pentru crearea paginilor, se găsește în Dashboard sub meniul „Pages”
  3. ‘attachment’ – responsabil pentru stocarea datelor fișierelor încărcate pe server prin funcția Media.
  4. ‘revision’ – responsabil pentru stocarea variantelor de conținut din diverse CPT’s

    5. ‘nav_menu_item’ – responsabil pentru stocarea meniurilor create în Dashboard > Appearance > Menus

Taxonomie

O taxonomie înseamnă o grupare de categorii. Cel mai bine pot explica cu un exemplu din viața reală: este practic crearea unui „raft” unde putem pune „cutii” (categorii ) în care putem punem „plicuri” (subcategorii ) iar în plicuri o să punem scrisori (postări ). Avem libertatea de a crea câte taxonomies dorim și să le legăm la un singur post type sau la mai multe post types. Orice categorie/sub-categorie adăugată într-o taxonomie este numită term (termen).

800px-Z2Ohv

Putem considera o taxonomie pe scara ierarhică părintele categoriei principale, mai exact o taxonomie este prima categorie.

WordPress are trei taxonomii predefinite:

  1. ‘categories’ – legat de post type-ul ‘posts’, responsabil pentru crearea de categorii la postări
  2. ‘tags’ – legat de post type-ul ‘posts’, responsabil pentru crearea de tag-uri la postări
  3. ‘post-formats’ – responsabil pentru crearea de post formats. Mai multe despre post formats aflați aici, deoarece nu va fi acoperit în tutorial.

Din câte observați, există câteva cazuri unde aceste metode de stocare de date au fost folosite în cazuri creative. Post type-ul ‘attachment’ este un exemplu excelent.

Ierarhia template-urilor unei teme WordPress

O să încep cu o imagine care are o importanță enormă din acest punct al tutorialului. Imaginea ilustratează toate fișierele (albastru ) ale unei teme WordPress și ierarhia lor (portocaliu ) împreună cu funcția lor (gri închis ) în sistem.

Consider că lista trebuie învățată pe de rost deoarece este necesară mereu.

template-hierarchy-1024x640

Aici aveți și o variantă online a imaginii.

Setare home page

O setare unde foarte mulți developeri își dau singuri bătăi de cap este setarea unui home page pentru un website care rulează pe WordPress. Aceasta se poate seta din Dashboard > Settings > Reading, dar structura fișierelor are o importanță mai mare. Majoritatea confuziilor apar datorită imaginii cu ierarhia template-urilor. Este important să analizăm structura pe imagine din direcția corectă.

Dacă se dorește impunerea unui template pentru prima pagină, care să nu poată fi schimbat deloc fără interacțiunea cu codul, se folosește template-ul front-page.php. Acest template anulează orice altă setare sau fișier pentru home page.

Dacă dorim folosirea unei pagini pentru prima pagina, dar în același timp dorim ca secțiunea de blog să fie activă, trebuie să creăm două pagini diferite. Una o setăm pentru home page și cealaltă pentru posts page. Dacă decideți să creați un nou template file, template-ul nu trebuie să se numească home.php, deoarece home.php este folosit pentru afișarea conținutul pe home page când nu există orice altă setare.

index.php și importanţa lui

Mai sus am zis că direcția din care citim ierarhia are importanță. Dacă citim din dreapta spre stânga, observăm că totul are la bază index.php. Fisierul index.php este back-up-ul oricărui fișier. Dacă WordPress nu găsește orice alt fișier din ierarhia lui inițială (nu se includ aici și template-urile personalizate) se va folosi de index.php .

Este important ca fișierul index.php să aibă o structură asemănătoare cu restul website-ului și să afișeze conținutul într-o manieră corectă. Un best practice este să se folosească mereu stilul fișierului de arhivă, care să includă butoane de paginare și neapărat să fie afișat tot conținutul, nu numai o parte din el. Mai exact, să se folosească funcția the_content(), nu the_excerpt() sau orice alta alterație (filtru) aplicat pe the_content().

Particularități HTML/CSS pentru temele WordPress

O problemă foarte des întâlnită este incompatibilitatea mark-up-ului cu structura WordPress și doresc ca acest lucru să nu se întâmple în acest tutorial.

Structura

Structura HTML trebuie să fie solidă, să nu existe probleme de float. Fiecare element trebuie să fie tratat cu o structură separată.

structura-continut-wordpress

Scripting

Încercați să evitați manipularea DOM-ului cu JavaScript sau jQuery în exces.

Semantica

WordPress se bazează pe o sintaxă corectă din punct de vedere sintactic. Este recomandat să folosiți tag-urile HTML specifice pentru tipul de conținut afișat. Tag-uri precum <main>, <section>, <article>, <figure> nu ar trebui să lipsească din template.

Content Formatting

Deoarece conținutul este adăugat folosind un formular WYSIWYG, este recomandat să facem output conținutului într-o clasă care formatează conținutul corect. [cod github]

Pe clasa .post_formatting trebuie să se stilizeze heading-urile, blockquote, tabelele etc. Clasa trebuie adăugată la orice output de content care necesită formatare, de exemplu comentarii sau pagini.

Clase CSS generate de WordPress

Aici puteți găsi o listă cu clasele generate de WordPress la output-ul conținutului din editorul WYSIWYG. Trebuie să adăugăm stil pentru toate sau cel puțin să le adăugăm goale în fișierul style.css, ca tema să fie conform standardului WordPress.

Pe lângă aceste clase, WordPress mai generează și alte clase specifice paginilor, dar nu în mod automat. Ca WordPress să genereze aceste clase, este necesar ca noi să le facem output în temă. O să discutăm despre acest aspect în următoarea parte a tutorialului. Primele clase sunt pe tag-ul body al fiecărei pagini. Ele ne ajută să identificăm tipul de conținut, page template-ul și alt detalii despre template-ul pe care se află user-ul în momentul accesării paginii. Aceste clase sunt generate de funcția body_class(). Al 2-lea pachet de clase poate fi afișat pe orice div, dar este foarte important ca acestea să fie afișate pe div-ul care ține toate detaliile unei postări. De exemplu, pe pagina de articol, toate datele legate de articol vor fi ținute într-un singur element (div/article/section). Element pe care facem output la clasele generate de WordPress folosind funcția post_class(). Funcția face output la clase precum id-ul postării, tag-urile în care a fost adăugat, post type-ul etc.

Aceste clase sunt obligatorii pentru compatibilitatea temei cu alte plugin-uri și funcții WordPress.


În această lecție am acoperit tot ce avem nevoie ca să începem tutorialul. Partea teoretică este benefică deoarece chiar dacă WordPress pare simplu, acesta poate deveni oricând complicat, în special în situațiile de debugging. Vă recomand să vă familiarizați cu codex-ul WordPress. Chiar dacă ajungi să știi pe de rost jumătate de funcții, tot vei ajunge în situația în care uiți ce parametrii are o anumită funcție sau ce valori default au acești parametrii.

Resurse din acest tutorial:

WordPress Road map

XAMPP

MAMP

Post Types

Taxonomies

The WordPress Template Hierarchy

Template Hierarchy

WordPress CSS

WordPress Codex