Crearea de opțiuni de temă WordPress cu API-ul de personalizare a temei

Crearea de opțiuni de temă WordPress cu API-ul de personalizare a temei este ușor de făcut. Acest articol vă arată cum se face.

API-ul WordPress Theme Customization a fost lansat cu WordPress 3.4, în 2012. Le-a promis dezvoltatorilor o modalitate standardizată de a adăuga teme cu opțiuni bogate, iar utilizatorilor o modalitate de a-și modifica site-ul într-un mod ușor de utilizat.

Pentru utilizatori, personalizarea temei front-end vă permite să schimbați rapid aspectul site-ului dvs. și chiar să obțineți o previzualizare live.

Succesul acestui proiect este discutabil, dar este îmbunătățit și câștigă teren. A fost construit pe o fundație solidă și nu există niciun motiv să nu începeți cu ea.

Deci, să aruncăm o privire la modul în care putem adăuga cu ușurință setări la teme folosind API-ul.

Iată ce vom acoperi astăzi:

• Construirea fundației noastre
• Componentele unei setari tematice
• Utilizarea valorilor de setare
• Previzualizări live
• Încapsularea într-o clasă
• Opțiuni suplimentare

Construirea fundației noastre

Cheia API-ului de personalizare este clasa WP_Customize_Manager , care poate fi accesată prin obiectul $wp_customize . Vom folosi diferite metode definite în această clasă pentru a adăuga secțiuni de setări și controale în cadrul acestora.

Modul recomandat de a crea setările temei este să le încapsulați într-o clasă. În exemplele noastre inițiale, nu voi adera la această recomandare pentru a mă asigura că este clar ce face parte din API-ul de personalizare și ce nu. Voi completa articolul cu o implementare bazată pe clasă.

Să începem prin a crea o funcție în fișierul functions.php al temei noastre, care ne va permite să includem adăugările noastre în personalizarea. Această funcție trebuie să fie conectată la customize_register.

Componentele unei setari tematice

După cum se menționează în exemplu, fiecare articol pe care îl adăugați la personalizare este format din trei părți:

• Trebuie creată o secțiune pentru a o plasa. Această secțiune poate fi una dintre cele preexistente, desigur
• O setare trebuie înregistrată în baza de date și
• Trebuie creat un control care este folosit pentru a manipula setarea definită

Dacă separarea dintre un control și o setare pare confuză, gândiți-vă astfel: Când creați o setare, îi spuneți WordPress că există într-adevăr o setare pentru culoarea fontului și valoarea implicită pentru aceasta este #444444. În sine, aceasta înseamnă deja că această setare poate fi utilizată.

Cu toate acestea, personalizarea temei trebuie să știe cum să manipuleze această setare. Puteți crea un câmp de text pentru acesta în care utilizatorul introduce manual noi culori ca „#ff9900”, dar puteți specifica și un control de culoare, care ar scoate un selector de culoare. La nivel de bază de date, totul se va reduce în continuare la o culoare hexagonală, dar partea orientată spre utilizator este diferită.

Crearea unei secțiuni

add_section() este folosit pentru a crea secțiuni. Este nevoie de doi parametri, un slug de secțiune și o serie de argumente. Iată un exemplu despre cum am configurat o secțiune pentru opțiunile de subsol într-o temă.

Cele mai multe dintre acestea se explică de la sine. Observați prioritatea, totuși! Aceasta determină ordinea secțiunii de pe ecran. Îmi place să-mi cresc opțiunile în zeci. Dacă trebuie să inserez o secțiune între două secțiuni existente, nu va trebui să reindexez totul, pot să o asignez pe cea nouă 95.

Rețineți că secțiunile nu vor apărea când sunt goale. Trebuie să le adăugați o setare și un control înainte ca acestea să fie afișate.

Adăugarea setărilor

Setările sunt create cu metoda add_setting() . Ei, de asemenea, iau un slug ca prim parametru și o serie de argumente ca al doilea. Aruncă o privire mai jos pentru un exemplu de adăugare a unei culori de fundal la secțiunea noastră de mai sus.

Există o grămadă de opțiuni pe care le-am putea adăuga aici, dar deocamdată se va descurca bine. Rețineți că setările nu sunt legate de secțiune. După cum am menționat, setările sunt pur și simplu înregistrate cu WordPress. Depinde de controale, care sunt legate de secțiuni pentru a le manipula.

Crearea unui control

Controalele sunt puse în aplicare cu metoda add_control() . Această metodă ia un slug și o matrice de argumente sau poate primi și un obiect de control dedicat. Un obiect de control este utilizat pentru controale mai complexe, cum ar fi selectoare de culoare sau încărcătoare de fișiere.

Iată cum am creat controlul care modifică culoarea de fundal a subsolului:

Am trecut un obiect de control metodei add_control() . Acest obiect ar trebui să fie construit prin trecerea obiectului $wp_customize ca prim parametru, un ID unic pentru control ca al doilea și o matrice de argumente ca al treilea.

Rețineți că controlul este locul în care totul se reunește. section este setată la id-ul secțiunii pe care am creat-o și settings este setată la id-ul setării.

Odată ce toate trei au fost configurate, ar trebui să puteți reîncărca personalizarea și să vă vedeți munca.

Utilizarea valorilor de setare

În mod implicit, setările sunt salvate într-un theme_mod. Theme_mods sunt o alternativă la API-ul Setări, oferind o modalitate ușoară de a gestiona setările specifice temei. Tot ce trebuie să faceți pentru a prelua valoarea unei setări este să utilizați funcția get_theme_mod() cu id-ul setării transmis.

Să adăugăm ceva CSS dinamic pe site-ul nostru, conectându-ne la wp_head și utilizând setarea noastră salvată:

Previzualizări live

Previzualizările live pentru setări nu sunt activate în mod implicit. Pentru a le folosi trebuie să faceți trei lucruri:

• Puneți în coadă un fișier Javascript care se ocupă de previzualizări
• Adăugați suport pentru previzualizare live pentru setare și
• Creați codul Javascript pentru a avea grijă de fiecare setare

Pune în coadă Scriptul de previzualizare live

Singurul lucru neregulat despre acest pas este că trebuie să folosim customize_preview_init și trebuie să ne asigurăm că „jquery” și „customize-preview” sunt încărcate înainte de scriptul nostru. În afară de asta, este o coadă standard care indică un fișier javascript din tema noastră:

Adăugați suport pentru previzualizare live pentru setare

Acesta este destul de ușor. În argumentele pentru setările noastre trebuie să definim o cheie de transport și să setăm valoarea acesteia la postMessage . Să ne revizuim codul de mai înainte:

Creați codul Javascript pentru a avea grijă de fiecare setare

Va trebui să folosim funcția wp.customize() în Javascript. Această funcție ar trebui să primească id-ul setării ca prim parametru, al doilea este o funcție de apel invers. În interior legăm o funcție la schimbarea setării și scriem codul nostru care se va ocupa de modificare.

Din tot ceea ce avem nevoie doar pentru a scrie o linie, utilizați acest șablon de copiere-lipire pentru viteza de scriere a previzualizării live:

Încapsularea într-o clasă

Încapsularea într-o clasă este o idee bună, deoarece vă permite să scrieți nume de funcții mai bune și să faceți codul mai compatibil cu mai multe teme, în cazul în care aveți mai multe teme în lucru. Iată cum am făcut-o pentru exemplul nostru de mai sus.

Rețineți că totul este exact la fel, tot ceea ce s-a schimbat este numele unor funcții și ne referim la metode din interiorul clasei în loc de funcții împrăștiate în fișierul nostru functions.php .

Opțiuni suplimentare

Recomand cu căldură să citiți documentația despre API-ul de personalizare a temei din Codexul WordPress. Conține o mulțime de setări suplimentare și modalități de a lucra cu API-ul.

• teme gratuite
• teme premium