Articolul original a fost scris in engleza si publicat pe blogul Infobest: Create Better Themes using WordPress Theme Customizer. Se adreseaza celor care acum incep sa se joace cu WordPress Theme Customizer si vor sa isi creeze singuri controale. Ajuta daca ai ceva experienta in programare, dar nu e obligatorie – cat timp esti o persoana tehnica. Contine si linkuri catre documentatie. Enjoy!

0. Timp necesar pentru parcurgerea articolului: 5-8 minute

1. Introducere: despre WordPress si WordPress Theme Customizer

2. Avantajele utilizarii Customizer-ului

3. WordPress Starter Themes – pentru a incepe mai usor

4. Kirki Toolkit pentru development rapid

5. Metologie: Organizarea controalelor si a Sectiunilor

6. Concluzii

#1. Introducere: despre WordPress si WordPress Theme Customizer

WordPress este, probabil, cel mai popular CMS open source din lume, fiind folosit de 29% din web pentru dezvoltarea de diverse publicatii, incepand cu bloguri generaliste si terminand cu site-uri foarte mari de stiri. WordPress e usor de instalat & configurat, oferind design personalizabil pana la un anumit punct (flexibilitatea layout-ului depinde foarte mult de tema pe care o folosesti) si o biblioteca imensa de module (peste 45,000 de plugins – conform site-ului oficial). Fiind un CMS atat de popular, este si sprijinit de o comunitate puternica, este destul de sigur si in plus, este si Search Engine Friendly.

WordPress Theme Customizer  a fost introdus prima oara in versiunea WordPress 3.4 si este o unealta foarte utila care iti permite sa previzualizezi (dar nu numai!) modificarile pe care le faci folosindu-te de caracteristicile temei. Aspectul asta, combinat cu un set te caracteristici introduse in versiunea 4.7 (de exemplu: user-specific backend language, custom CSS editing area, PDF Previews, REST API Content Endpoints & Post Type Templates) fac WordPress sa fie un CMS foarte flexibil. Cu siguranta nu mai este doar o platforma de blogging, asa cum a inceput. Ba mai mult, sunt destul de increzator sa-i spun chiar “Web Application Framework”. Chiar daca este inca o dezbatere aprinsa pe subiect, eu consider ca atat timp cat WordPress acopera zone precum accesul la baza de date & mapping, caching, securitate, URL mapping (routing) se califica pentru numele de Application Framework. Poti sa creezi aplicatii mobile, folosindu-te de API endpoints ale WordPress? Cu ceva timp liber si plugins care sa integreze JWT or OAuth *, da, poti face asta!

* o scurta mentiune aici – am mentionat JWT / OAuth presupunand ca aplicatia mobila pe care ai vrea sa o dezvolti ar avea nevoie de caracteristici de securitate / zone de user login.

Ca sa ma intorc la subiectul articolului, WordPress Theme Customizer este o functionalitate foarte cool si un motiv foarte bun pentru a alege WordPress atunci cand vrei sa dezvolti site-uri de dimensiuni mici si medii. Daca folosesti o tema premium pe instanta ta de WordPress, atunci probabil ca deja ai o gramada de optiuni disponibile sub Appearance > Customize, in panoul de administrare. Pe de alta parte, daca vrei sa iti dezvolti propria tema cu un design personalizat si sa te bucuri, totusi, de un editor flexibil din care sa poti sa schimbi logo, pozitionare meniuri, fonturi, culori sau alte stiluri ori ai vrea sa folosesti blocuri reutilizabile de continut, atunci dezvoltarea temei cu WordPress Theme Customizer e varianta ideala.

#2. Avantajele utilizarii Customizer-ului

Majoritatea informatiilor de care ai nevoie pentru a-ti crea propria tema de WordPress se poate obtine din Theme Handbook. Ai acolo inclusiv exemple de cod si cele mai bune practici. Rezumatul, insa, suna cam asa ceva: creezi niste controale care implementeaza setarile in tema si, optional, poti sa previzualizezi ce impact au respectivele modificari asupra designului. Faptul ca ai posibilitatea sa previzualizezi modificarile pe care doresti sa le faci inainte de a le “impinge” catre live e foarte util pentru site-urile de dimensiuni mici si mijlocii care au nevoie de actualizari rapide de design. Daca la tine in companie, de exemplu, ai un angajat in ale carui indatoriri intra si “intretinerea” website-ului, atunci dezvoltarea temei cu WordPress Theme Customizer ar permite acelui editor sa faca destul de multe in privinta layotului, culorilor, stilurilor etc. O astfel de solutie, bazata pe WordPress si WordPress Theme Customizer, permite editorului sa controleze nu doar continutul, dar si aspectul site-ului.

Bineinteles, pentru a putea sa creezi o tema de WordPress folosindu-te de WordPress Theme Customizer ai nevoie de background tehnic si de o buna intelegere a cum functioneaza WordPress. Daca nu le ai si nici nu vrei sa-ti bati capul cu invatatul acum, atunci probabil ca e mai simplu sa apelezi la o companie de software development care sa creeze tema pentru tine, conform cerintelor tale, iar tu sa o folosesti.

#3. WordPress Starter Themes – pentru a incepe mai usor

Daca totusi te-ai decis ca vrei sa mergi mai departe si sa incerci sa creezi o tema de WordPress folosind Theme Customizer, atunci primul lucru pe care cred ca ar trebui sa il faci e sa descarci o copie dintr-o “starter theme“. E mult mai usor sa lucrezi pe un boilerplate, pentru ca nu mai e nevoie de petreci destul de mult timp cu generarea de fisiere si stabilirea unei structuri de a folderelor. Asta, plus faptul ca uneori e mai usor sa ai un proiect care iti indica deja ordinea fisierelor sau denumirea lor. Cateva teme starter pentru WordPress:

• _s (Underscores) – poti sa folosesti direct site-ul pentru a genera o tema bazata de _s si poti sa te apuci de treaba imediat
• Sage – by Roots – vine un un workflow avansat, minimal HTML5 templates si template inheritence cu un theme wrapper
• HTML5Blank – open source boilerplate theme pentru WordPress
• UnderStrap – combina Underscores starter theme cu Bootstrap 4 intr-o fundatie open source pentru proiectul tau bazat pe WordPress

O scurta mentiune aici, daca dupa ce ti-ai facut temele in vederea alegerii unei starter teme pe placul tau ai ramas cu Sage, atunci iti recomand calduros sa arunci o privire si peste  Bedrock, care este un WordPress boilerplate cu o structura interesanta. Daca in trecut ai mai lucrat cu Laravel – de exemplu – atunci sigur vei recunoaste structura folderelor. Totodata, Bedrock vine cu dependency management cu Composer, parole mai sigure cu wp-password-bcrypt si poate un workflow si un mediu de lucru care iti este ceva mai familiar.

OK, revending la proiectul nostru, trebuie sa ne decidem asupra uneie teme starter. Pentru ca foloseste Bootstrap 4, eu am ales UnderStrap pentru acest mic ghid de initiere in Theme Customizer, dar tu poti sa alegi orice varianta ti se pare mai interesanta. Inca o mentiune insa, UnderStrap are deja un customizer file pe care il poti folosi ca si model (se poate gasi in understrap/inc/customizer.php) sau poti sa arunci o privire pe  GitHub, daca iti este mai usor asa. Ajuta, daca vrei sa te pui pe treaba imediat.  Customizer.php este required in functions.php (pe care il poti gasi in root-ul temei, dar presupun ca stiai deja asta pana acum, nu?)

#3.1. Sections, Settings & Controls (Sectiuni, Setari & Controale)

De indata ce ai baza creata  (function naming + add_action hook), poti sa incepi sa adaugi Setari si Controale in fisierul tau. Trebuie mentionat ca toate Controalele trebuie – vizual – grupate sub Sectiuni.  In Appearance > Customize menu ar trebui sa vezi deja niste Sectiuni cu cateva Controale.

O sa ne folosim acum de informatiile din Theme Handbook pentru a genera o Sectiune cu un Controler de culoare. In primul rand, lucram la Sectiune:

Si in “interiorul” Sectiunii vrem sa adaugam un Control pentru culoarea de baza a textului – care probabil ca va fi utilizata pentru toate paragrafele de continut din zona <body>, de exemplu. Impreuna cu Controllerul, trebuie sa adaugam si o Setare (reprezentand <the data> pe care thema noastra trebuie sa o accepte si sa o utilizeze).

Meniul din admin aflat sub Appearance > Customize va afisa o noua Sectiune + un nou Controler care ar trebui sa contina niste zone de editare similare cu cele din imaginea de mai jos:

#3.2. Gruparea mai multor Sectiuni sub Panouri (Panels)

Daca ai de gand sa adaugi foarte multe Sectiuni si Controale, poti sa incerci sa faci curatenie in dashboard cu prin gruparea acestora sub Panouri. Poti sa citesti mai multe despre Panouri aici. Ca sa completez exemplul, daca ai avea mai multe controale care tin de culori sub o Sectiune numita “Culori”, mai multe controale care tin de layout sub o Sectiune numita “Layout” si controale de font sub o Sectiune Typography, ai putea sa grupezi toate aceste Sectiuni sub un Panou numit  “Global” sau “General”, permitand astfel administratorilor sau editorilor site-ului sa navigheze cu usurinta prin zona de Customizer. Inregistrarea unui Panou se face foarte usor, dar odata ce ai creat codul pentru un Panou si doresti sa “muti” Sectiunile sub acesta, trebuie sa editezi si codul pentru Sectiuni. Vezi exemplul de mai jos:

Poti sa grupezi Sectiunile sub Panouri asa cum consideri ca e mai bine ori in functie de cum i-ar fi mai usor utilizatorului final sa navigheze in zona de Customizer, din cate am citit nu exista nicio limitare privind acest aspect. Dar daca vrei sa creezi o tema care sa fie usor de actualizat si mentinut, esti obligat sa tii codul curat. Asadar, ca si structura a folderelor si fisierelor, poti sa folosesti ceva de genul asta:

Lucrurile pot ajunge, insa, se complice. Mai ales daca vrei ca acele Controale pe care le creezi sa aiba un anumit design. Iar atunci cand vrei sa faci output la CSS, de exemplu, trebuie sa tratezi codul cu foarte mare atentie, aspect care poate consuma mult timp. Pentru astfel de situatii (multe Sectiuni si Controale), mie mi-a fost foarte util Kirki si in continuare o sa poti sa citesti cate ceva despre acest toolkit.

#4. Kirki Toolkit pentru development rapid

Kirki este un plugin 100% open source pentru WordPress care te ajuta sa imbunatatesti considerabil Theme Customizer. Poti sa te uiti peste documentatie aici sau poti sa citesti despre integrarea cu tema ta aici. Background, checkbox, code, multicheck, slider sau sorter sunt cateva dintre Controalele pe care Kirki ti le pune la dispozitie pentru a imbunatati experienta utilizatorului atunci cand acesta foloseste Customizer. Daca vrei sa livrezi un proiect rapid, dar iti pasa de UX, atunci Kirki este o colectie de unelte foarte simpatica, iti va face placere sa o folosesti.

#5. Metologie: Organizarea controalelor si a Sectiunilor

Atunci cand dezvolti proiecte – de exemplu HTML + CSS – e de preferat sa incerci sa urmezi o anumita metologie. Chiar daca uneori nu urmezi cap-coada regulile si le adaptezi in functie de proiectul pe care lucrezi, e foarte important sa ai cativa indicatori “de baza”. Chiar daca nu am folosit aceeasi metologie pentru toate proiectele la care am lucrat, regulile fac viata mai usoara cand ajungi la faza de intretinere ori cand lucrezi in echipa. Mie unuia mi se pare ca BEM e foarte cool pentru frontend development si foarte des folosesc indicatorii acestei metologii si pentru grupat Controale, Sectiuni si Panouri in WordPress. Spre exemplu, pentru o tema complexa in WP, probabil ca as ajunge, in final, cu o lista de Panouri care arata cam asa:

• Global
• Styles
• Header
• Layout
• Main Page
• Blog
• Footer
• Additional Features (aici poti include Woocommerce theme settings sau Custom Post Types theme settings, de exemplu)

#6. Concluzii

Am ajuns si la sfarsitul acestui mic ghid de initiere in Theme Customizer. Ai parcurs rapid cateva exemple de utilizare a Sectiunilor, Controalelor si Setarilor, ai citit despre Panouri, ai aflat despre Kirki Toolkit si ai primit o sugestie de organizare a elementelor de cod pentru atunci cand vei dori sa dezvolti o tema folosind WordPress Theme Customizer. Daca aceasta varianta de a dezvolta teme si site-uri ti se pare interesanta, poti sa citesti mai departe si despre ascunderea sectiunilor in functie de pagina pe care o previzualizezi sau despre intregistrarea unui nou tip de control.

Datorita comunitatii foarte mari, adaptarii rapide la standarde și practici noi, a API endpoints si a functionalitatilor flexibile pe care le ofera, Wordpess va ramane probabil cea mai populara solutie de CMS open source. Chiar daca pentru proiecte foarte ample, e mai sigur sa apelezi la o companie de software development, in foarte multe situatii WordPress este unealta perfecta, datorita flexibilitatii si vitezei de dezvoltare. Asadar, de ce sa nu folosesti aceste avantaje, daca proiectul este potrivit?

Daca ai sugestii sau doresti sa aduci completari acestui articol, foloseste cu incredere zona de comentarii de mai jos.