Creați-vă propria temă WordPress tematică cu panoul Redux

Cadrul Redux este unul dintre cele mai populare, avansate și gratuite cadre de panouri de opțiuni pentru teme și pluginuri WordPress. Flexibilitatea acestuia vă oferă libertatea de a crea orice tip de opțiuni și setări pentru proiectul dvs. WordPress.

În acest tutorial vă voi arăta cum puteți instala, personaliza și utiliza cadrul Redux în propria temă.

Vom parcurge următorii pași:

Instalare
Configurație generală
Crearea unui panou de opțiuni
Utilizarea opțiunilor în cadrul unei teme

Notă: Voi face referire la Redux Framework pur și simplu ca Redux în acest tutorial. Acest lucru nu trebuie confundat cu Redux, "containerul de stare previzibil pentru aplicațiile JavaScript".

1. Instalare

Există trei moduri în care puteți include Redux în proiectul dvs.:

Instalați-l ca un plugin separat
Includeți-l în miezul temei
Includeți-l într-un plugin dependent de temă

Instalați-l ca un plugin separat

În mod implicit, Redux poate fi instalat ca un plugin. Dacă accesați pagina Plugin Redux Framework WordPress, veți vedea că îl puteți descărca ca un plugin obișnuit și îl puteți instala în site-ul dvs. WordPress cu orice temă. Acest lucru nu creează nicio opțiune; tot ce puteți face este să activați modul demo cu opțiuni de eșantionare.

Pentru a obține un panou de opțiuni cu opțiuni personalizate pentru tema sau pluginul dvs., va trebui să creați un fișier separat config.php. Aflați mai multe despre cum funcționează aceasta:

Prin urmare, avantajele și dezavantajele acestei abordări sunt:

Contra	Pro-uri
Instalare separată a plugin-ului care trebuie stocată ca fișier zip fie pe serverul dvs., fie în dosarul tematic.	Reduceți dimensiunea temei atunci când panoul cu opțiuni nu face parte din tema principală.
Creșterea sentimentului că tema / plugin-ul depinde de dezvoltarea și instrumentele terților.	Evitați numeroase avertismente și erori din pluginul Theme Check.

Includeți-l în Tema Tematică

Nu este nimic pentru a vă opri, inclusiv Redux în tema dvs., cu excepția cazului în care aceasta este în conflict cu plugin-ul Theme Check. Logica este aceeași ca înainte, aveți încă nevoie de un fișier config.php cu opțiunile personalizate, dar acum evitați instalarea pluginului suplimentar.

Contra	Pro-uri
Mărește dimensiunea pachetului temă.	Evitați instalarea pluginului suplimentar.
Pot apărea eventuale conflicte și probleme din pluginul Theme Check.	Panoul opțiunii temei se simte mai conectat la tema dvs. și este mai integrat.
Ori de câte ori plugin-ul este actualizat, va trebui să vă actualizați și tema.

Includeți-l într-un plugin dependent de temă

În opinia mea, această abordare este cea mai bună modalitate de a include cadrul Redux. Procesul este la fel de simplu ca o instalare normală a plugin-ului, singura diferență fiind că acesta face parte acum din plug-in-ul dorit al temei proprii.

Temele moderne premium apar de obicei cu elemente personalizate - tipuri personalizate de posturi și așa mai departe - toate acestea aparțin unui plugin, astfel încât abordarea logică este crearea unui plugin suplimentar legat de tema dvs. În plugin-ul de add-on puteți include panoul opțiunilor tematice. Aflați mai multe despre crearea pluginurilor dependente de temă în acest tutorial:

Contra	Pro-uri
Nu am găsit :)	Evitați instalarea pluginului suplimentar.
	Panoul de opțiuni temă se simte mai integrat cu tema.

Procesul de configurare al Redux nu este afectat de metoda de instalare, deci depinde de dvs. cum doriți să includeți Redux în proiectul dvs. Acestea fiind spuse, prefer încă ultima opțiune, deci aceasta este abordarea pe care o voi folosi pentru a descrie configurația.

2. Configurația generală

Dacă examinați directorul prestabilit al pluginului Redux Framework, veți găsi o mulțime de fișiere și directoare, dar tot ce aveți nevoie aici este directorul ReduxCore.

Dosarul ReduxCore

Copiați tot conținutul acelui dosar în dosarul plugin-ului dvs. add-on. Creați un dosar, numiți-l cum doriți, de exemplu optionpanel, și pune conținutul ReduxCore în el. Apoi, creați un fișier gol în dosarul respectiv și apelați-l config.php. În continuare, va trebui să solicităm reduxframework, pe care le vom face într-un mod fără conflict, astfel încât în cazul în care plug-in-ul add-on este instalat în mediul WordPress, site-ul nu se va prăbuși.

În fișierul principal al pluginului dvs. adăugați codul:

Asta e tot! Cadrul dvs. Redux este acum integrat, deși nu veți vedea încă niciun panou de opțiuni, deoarece trebuie mai întâi să creați câteva opțiuni. Toate acestea se vor face în fișierul config.php pe care l-am creat.

3. Crearea unui panou de opțiuni

Ca îndrumare și punct de pornire, puteți folosi fișierul sample-config.php furnizat împreună cu pluginul Redux. Acesta conține tot codul necesar pentru a începe să creați propriile opțiuni personalizate. Pentru moment, să evidențiem procesul principal de configurare.

Deschideți fișierul config.php și adăugați la început acest cod (deschiderea eticheta nu va fi necesară dacă este deja prezentă):

 Acest control vă asigură că Redux Framework este activ, altfel toate opțiunile create nu vor funcționa și probabil vor arunca tone de erori PHP.
 Înainte de a începe crearea opțiunilor noastre, avem mai întâi nevoie de unele configurații suplimentare. Creați o variabilă care va stoca toate opțiunile dvs. și poate fi utilizată în fișierele tematice:
$ opt_name = "nume_variabil";
 Faceți-o unică, folosind prefixe, de exemplu: yourbrandname_yourthemename.
După aceea, adăugați codul:
$ temă = wp_get_theme ();
Acest lucru este necesar pentru a configura orice argumente Redux care utilizează informații despre tema instalată.
Argumente
 În acest moment trebuie să adăugăm următoarele argumente:
$ arge = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Nume'), 'display_version' => $ theme-> get (' ("Setările temei", "textul tău"), "page_title" => esc_html __ ("ThemeSettings", textul tău), "google_api_key" => google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> "admin_bar_priority => 50,' global_variable '=> $ opt_name,' dev_mode ' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon ' => ',' default_show '=> false,' default_mark '=> "," show_import_export "=> Adevărat );
 Există o mulțime de argumente aici, dar nu vă faceți griji, voi sublinia cele mai importante.
 menu_type
 Dacă doriți ca pagina opțiunii temei să apară ca un element de meniu de nivel superior separat, trebuie să setați această valoare meniul, dacă aveți nevoie de opțiunile temei pentru a apărea ca un submeniu (prefer să le pun sub Aspect) setați valoarea la submeniul.
 dev_mode
 Puteți activa acest lucru în timpul dezvoltării, dar nu uitați să îl dezactivați când publicați tema.
 update_notice
 Pe măsură ce Redux va face parte din proiectul dvs., nu veți dori ca utilizatorii dvs. să primească notificări de actualizare de la Redux Framework, setați astfel fals.
 personalizare
 Dacă doriți să afișați setările personalizate ca parte a personalizatorului WordPress, trebuie doar să setați acest argument Adevărat.
 Arramentul de argumente conține mult mai multe elemente, iar dacă doriți informații despre fiecare, puteți găsi detalii în sample-config.php. Pentru nevoile noastre, am personalizat suficient argumentele. Acum, să stabilim argumentele.
Redux :: setArgs ($ opt_name, $ args);
 Adăugarea secțiunilor
Acum panoul dvs. de temă este gata, puteți adăuga secțiuni cu opțiuni. Gândiți-vă la secțiuni ca grupuri. Dacă doriți să adăugați (de exemplu) opțiunile antetului, creați o secțiune antet și adăugați opțiuni la aceasta. Pentru a crea orice secțiune, veți avea nevoie de următoarea structură:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Title section', 'yourtextdomain'), 'id' => esc_html __ (' => 'icon-name', 'fields' => array ()));
 Aici vreau să subliniez id atribut - asigurați-vă că este unic. Puteți utiliza pictograme personalizate, dar setul implicit de pictograme este evaziv.
 Secțiunea ta este creată, deci acum poți adăuga opțiuni la matricea câmpurilor. O listă cu tipurile de opțiuni disponibile, precum și structura de cod cu explicații și evidențiere, puteți găsi aici. 
Dacă doriți să faceți secțiunea a subsecțiune din secțiunea adăugată anterior, adăugați doar un argument nou 'subsecțiunea' => adevărat. 
Opțiunea însăși nu este altceva decât o matrice cu argumente, de exemplu:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ făcute pe acest tip de câmp "," yourtextdomain "), 'desc' => esc_html __ ('Acesta este câmpul de descriere, din nou bun pentru informații suplimentare','domeniudomeniu '),' default '=>' 1 '// 1 = on | 0 = dezactivat), 
 Cu acest cod am adăugat o casetă de selectare în secțiunea noastră. Cele mai importante lucruri aici sunt id-ul (trebuie să fie unic) și tipul (ar trebui să fie corect și să urmeze denumirea exactă a tipului de câmp pe care Redux îl oferă). Din nou, mai multe detalii despre câmpuri pot fi găsite în fișierul sample-config.php.
 În general, acesta este tot ceea ce trebuie să știți pentru a crea un panou de opțiuni. Apoi vom analiza modul de utilizare a acestor opțiuni.
 4. Utilizarea opțiunilor în cadrul unei teme
 Redux stochează toate opțiunile într-o variabilă globală. Amintiți-vă $ opt_name variabilă pe care am creat-o în fișierul config.php? Aceasta este variabila care stochează toate opțiunile dvs. și le puteți accesa în felul următor.
 În primul rând, trebuie să declarați variabila globală. Și aceasta prezintă prima problemă potențială: nu se recomandă declararea unei variabile globale în afara unei funcții sau a unei acțiuni. Soluția este de a adăuga în fișierul functions.php această funcție mică:
funcția yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Apoi, în fiecare pagină pe care doriți să o utilizați, executați mai întâi funcția astfel:
yourprefix_theme_options_global_variable ();
 Dacă aveți nevoie de variabila globală în interiorul altei funcții sau acțiuni, puteți să o declarați fără această funcție.
Utilizarea opțiunilor
 Dacă utilizați opțiuni fără a verifica mai întâi opțiunea există, veți primi o notificare PHP care spune ceva undefined variable / index. De ce este important acest lucru? Deoarece, dacă utilizatorul activează tema dvs., dar nu activează pluginul de completare care conține panoul de opțiuni, el va vedea o colecție de notificări de avertizare PHP pe variabilele nedefinite. Nu este ideal.
Există un model bun pentru a evita această situație - arată astfel:
$ your_option_name = (esteset ($ GLOBALS ['yourglobalvariable'] ['youroption']]))? $ GLOBALS ['yourglobalvariable'] ['youroption']: "Valoarea dumneavoastră inițială pentru această opțiune";
 Cu această verificare mică, vă asigurați că nu veți primi anunțuri nedefinite de variabile / indici. Dacă nu doriți să atribuiți valori implicite sau să creați o variabilă, puteți utiliza în schimb acest model: 
Dacă isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // face lucrurile ...
Concluzie
Vă mulțumim pentru lectură, sper că acest lucru devine ați început să utilizați Redux pentru opțiunile tematice! Dacă aveți întrebări sau sugestii, lăsați un comentariu mai jos.
Link-uri utile
 reduxframework.com
  ReduxFramework pe Facebook
  @ReduxFramework pe Twitter
 



		
			
	   
	




Web design