Tema personalizator wordpress dezvoltator ghidul cuprinzător

Acest tutorial vă va spune în detaliu cum să conectați Theme Customizer la tema dvs. în WordPress (în continuare tema tutore).

Personalizarea temelor a fost anunțată în WordPress în versiunea 3.4. Permite administratorului din mediul de editare să testeze opțiunile de temă înainte de a fi aplicate pe site-ul de lucru. În acest ghid, vom discuta cum să adăugăm această funcție la subiect.

Notă: Există mai multe moduri de a conecta instrumentul de personalizare a temelor și de a salva setările de modificare. Acest tutorial va lua în considerare metoda theme_mod. Dacă nu știi ce înseamnă asta, nu contează. Nu trebuie să înțelegeți scopul diferitelor metode dacă urmați acest ghid.

1. Adăugați pagina personalizatorului temei în meniul panoului de administrare.

Mai întâi, deschideți fișierul temă functions.php și adăugați următorul cod. Nu are o valoare critică, unde exact în fișier am plasat codul, în timp ce nu este în interiorul altei funcții.

Acest lucru asigură că utilizatorul are dreptul de privilegiu pentru a accesa instrumentul personalizat.
(Pentru informații mai detaliate despre utilizatorii WordPress [se termină propoziția]

Notă: dacă creați un subiect pentru uz public, parametrii $ page_title și $ menu_title ar trebui să poată fi traduse în alte limbi. Pentru mai multe informații despre localizare, consultați pagina I18n pentru regulile de localizare WordPress.

Acum, dacă revenim la panoul de administrare WordPress, o nouă pagină intitulată "Particularizare" va fi disponibilă în meniul "Aspect". Dacă faceți clic pe "Aspect> Personalizați", vom deschide o pagină nouă a personalizatorului pentru cele care tocmai au fost create. În panoul din partea stângă a ecranului, constatăm că există deja patru secțiuni de configurare. "Antetul site-ului și exodul de etichete", precum și "Pagina de pornire statică" sunt adăugate automat în instrumentul de personalizare. Se adaugă secțiunile "Culori" și "Fundal", deoarece această temă acceptă opțiunea personalizată de imagine de fundal încorporată în nucleul WordPress. În capitolul următor, vom adăuga propriile noastre secțiuni.

2. Adăugați o secțiune nouă la personalizatorul

Pentru a crea o secțiune proprie de setări, plasați următorul cod în fișierul functions.php imediat după codul pe care tocmai l-am adăugat mai devreme (și din nou, locația nu contează, este mai convenabil să plasați codul într-o ordine ordonată).

Parametru opțional. În funcție de faptul dacă tema acceptă o anumită caracteristică, secțiunea este afișată sau ascunsă

În exemplul nostru de mai sus, nu am folosit argumente opționale "capability" sau "theme_supports". Cu toate acestea, argumentele opționale "descriere" și "prioritate" au fost utilizate. astfel încât să puteți simți cum funcționează. Continuați și schimbați semnificația lor pentru a înțelege munca lor. În capitolul următor, vom crea o opțiune pentru noua secțiune.

3. Adăugați o nouă opțiune

3.1. Înregistrați opțiunea

Opțiunile sunt înregistrate utilizând metoda add_setting (). Îl vom pune chiar după apelul pentru add_setting () și exact înainte de a închide funcția cotieră curată example_customizer ().

Parametru opțional. Numele funcției care va fi apelată pentru a verifica și a corecta datele care provin din baza de date în instrumentul de personalizare a subiectului. Implicit: șir gol.

Probabil ați observat că în codul de mai sus folosim doar argumentul "implicit". Cele mai multe alte argumente au valori implicite acceptabile, deci nu ne vom îngrijora și le vom adăuga la apelul nostru la metoda add_setting (). Unele argumente merită o atenție mai mare pentru ele, până când vom merge mai departe.

În primul rând, argumentul "sanitize_callback" este folosit pentru a verifica datele introduse înainte de a-l depozita în baza de date. Din motive de simplitate, nu am folosit încă acest argument, dar mă voi întoarce mai târziu în acest manual. Cred că verificarea și actualizarea datelor nu sunt adesea luate în considerare și vreau să o corectez.

În al doilea rând, "sanitize_js_callback" nu ar putea fi ceea ce vă puteți aștepta. De obicei, este o chestiune de verificare și corectare a datelor atunci când ceva nu este în regulă cu datele introduse de utilizator, înainte de a le salva în baza de date. Cu toate acestea, funcția "sanitize_js_callback" este chemată să verifice și să corecteze datele deja stocate în baza de date în momentul transferului lor la personalizatorul de subiecte. Singurul caz în care, în opinia mea, apelul la această funcție este justificat este adăugarea "#" la începutul numărului hexazecimal în cazul în care este stocat în baza de date fără acest semn.

Ei bine, asta am trecut prin, acum să oferim opțiunea noastră de control.

3.2 Crearea unui control

Comenzile sunt pur și simplu o interfață utilizată pentru a schimba valorile opțiunilor. Fiecare opțiune trebuie să aibă un control care să fie afișat în personalizatorul temei. Controlul este adăugat prin utilizarea metodei add_control (). Ca și metodele noastre anterioare, este nevoie de doi parametri. Primul este ID-ul controlului. Valoarea trebuie să fie egală cu valoarea identificatorului opțiunii la care aparține controlul. Din moment ce optiunea noastra de mai sus a avut un ID "textbox", controlul ar trebui sa aiba, de asemenea, un "caseta de text". Ca și înainte, al doilea parametru este o matrice cu argumente. Aranjăm apelul la metoda add_control () imediat după apelarea funcției add_setting () și exact înainte de a închide funcția bracket curl example_customizer ().

Dacă valoarea "alimentat de" nu a fost salvată, "Acest site va funcționa grație WordPress" va fi afișat în subsol. Cu toate acestea, dacă valoarea a fost salvată, WordPress va fi înlocuită cu această selecție amuzantă din listă.

6. Verificarea și corectarea datelor

Mai sus, am menționat că, pentru simplitate, nu aș vrea să mă grăbesc într-un subiect atât de complex ca verificarea datelor chiar de la început. Cu toate acestea, nu vreau să vă las cu impresia că nu-l ating, pentru că nu este important. Așadar, subliniez întregul capitol al acestui manual. Deci, da, chiar cred că este foarte important. Cu toate acestea, nu voi intra în toate subtilitățile și motivele pentru care acest lucru este atât de important, sau descriu consecințele nerealizării. Voi spune doar: nu aveți încredere în datele introduse de utilizator!

6.01 Verificarea intrării textului

Încă o dată, WordPress limitează automat tipurile de fișiere care pot fi descărcate, însă descărcarea în acest caz nu se limitează numai la imagini. Puteți crea o funcție de testare pentru a descărca numai imagini. Dar, deoarece acesta este un ghid pentru personalizatorul subiectului, nu pentru verificarea și corectarea datelor, voi lăsa acest subiect dezvăluit.

8. Crearea de comenzi personalizate

Deci, am acoperit totul despre controalele încorporate din WordPress și ce dacă vrem să creăm elemente suplimentare? Otto a scris un excelent articol despre crearea de comenzi personalizate, deci această secțiune se va baza pe ea.

Este posibil să fi observat mai devreme că tipul de introducere de tip textarea nu este inclus în tipurile WordPress încorporate. Aici vom crea un control personalizat pentru utilizarea tipurilor de intrări de tip textare în personalizatorul de subiecte.

Pentru a crea un control propriu, trebuie să extindem clasa WP_Customize_Control și să suprascriu funcția render_content () pentru a ieși din noul nostru control. Dacă sunteți familiarizați cu limbajul orientat pe obiecte al PHP, aceasta este pentru voi să înțelegeți, dacă nu - nimic, doar urmați-mă. Nu va fi foarte dificil.

Punem clasa în interiorul funcției example_customizer (). pe care am creat-o la începutul acestui manual. Am folosit această funcție pentru a configura și a adăuga toate opțiunile la personalizatorul temelor. Pentru ca o clasă să funcționeze așa cum ar trebui, trebuie definită în cadrul acestei funcții:

A schimbat valoarea anterioară a setării de culoare "ID" în "font-color" în toate cele trei locuri în care este prezentă.
Modificată culoarea implicită.
A schimbat numele.
Și, în final, a schimbat proprietatea secțiunii la "culori", astfel încât opțiunea să fie adăugată la secțiunea existentă "Culori".

V-am spus deja cum să utilizați opțiunile salvate în temă, așadar părăsesc procedura de aplicare a culorii de fonturi salvate la temă ca temă.

Să revenim la parametrul "transport" și la valorile "postMessage", pe care le-am examinat pe scurt în Capitolul 3. Adăugați o nouă opțiune pentru a schimba culoarea de fundal a zonei de conținut din pagina de pornire. În primul rând, vom adăuga încă o alegere de culoare în secțiunea "Culori" a personalizatorului:

11. Utilizarea AJAX pentru opțiunile pre-instalate

Și dacă vrem să schimbăm parametrul de transport al opțiunii încorporate? Această posibilitate există și acolo. Pentru demonstrație, vom schimba opțiunea încorporată "Site Titlu", astfel încât să fie transmisă tutorelui temei folosind "postMessage", și nu ca de obicei, prin "refresh". Mai întâi, adăugăm următoarea linie la funcția principală example_customizer (). creat mai devreme:

Poate un bug în personalizatorul care se află în șablonul dvs., din păcate pentru un răspuns mai precis aveți nevoie de mai multe informații.
Nu există nici o eroare în js (o pot vedea în consola)?

Articole similare

Pagina anterioară

Pagina următoare