Noțiuni de bază cu Redux Framework, Partea 2 secțiuni, câmpuri și config

Acest articol vă ajută, dezvoltatorul, să începeți să utilizați Redux Framework în cele mai elementare moduri: adăugați câmpuri. În trecut, lucrul cu Redux necesita o înțelegere a claselor PHP și a modului în care funcționează. Cu Redux 3.5+ curba de învățare a dispărut. 

Sunt unul dintre creatorii Redux Framework, iar in acest tutorial voi discuta structura interioara a Redux, modul in care functioneaza campurile si sectiunile si argumentele configuratiei globale.

Redux se livrează cu un fișier sample-config.php care conține mai multe exemple de configurare a Redux, precum și exemple pentru aproape orice domeniu pe care îl oferim. Pentru o înțelegere mai amplă, examinați configurația eșantionului sau consultați Documentația Redux.

Încărcarea Redux

Pentru a începe să utilizați Redux Framework, acesta trebuie încărcat. Există două modalități prin care acest lucru să se întâmple. 

Mai întâi, Redux poate fi ușor instalat ca plugin și activat. Pluginul este disponibil gratuit la WordPress.org. Instalarea se face prin interfața de instalare a pluginurilor. 

A doua modalitate de a instala Redux Framework este să o încorporați în tema sau plugin-ul dvs. Embedding-ul este destul de ușor de făcut. Pur și simplu copiați folderul ReduxCore pe tema sau plugin-ul dvs. (redenumirea directorului pe orice nume doriti) și includeți fișierul framework.php găsit în interiorul, prin intermediul funcțiilor standard PHP includ funcții. 

Dacă aceste instrucțiuni de încorporare sunt prea dificile, Redux oferă și Redux Builder care vă permite să ieșiți pe o temă complet funcțională cu Redux deja încărcat. Cel mai bun dintre toate, serviciul de constructor este complet gratuit. 

Acum, când Redux Framework este încărcat, putem începe să îl folosim.

Înțelegerea modului în care Redux funcționează

Pentru a înțelege modul în care rulează Redux Framework, trebuie să înțelegeți mai întâi ce este o instanță Redux. Redux poate fi rulat de o temă și orice număr de plugin-uri în același timp, toate dintr-o singură instalare WordPress. Fiecare instanță are propriul set unic de caracteristici și argumente; fiecare se poate comporta foarte diferit de alte instanțe Redux.

Motivul pentru care Redux rulează așa cum procedează este pur și simplu să asigure cel mai mare nivel de flexibilitate. Prea multe cadre de opțiuni au permis doar o singură instanță a cadrului lor de a rula. Am vrut ca dezvoltatorii de plugin-uri și temele să lucreze împreună cu Redux nestingherit de codul celuilalt.

Argumentul opt_name

Cum se păstrează separat instanțele? Totul este printr-o cheie unică numită opt_name. Acesta este locul în care datele dvs. sunt stocate în WordPress și se numără, de asemenea, ca cheia dvs. unică în cadrul Redux Framework. Este important să înțelegeți că, înainte de a începe să lucrați cu Redux Framework, va trebui să alegeți un model unic opt_name. Odată ce această determinare a fost făcută, este timpul să sapăm în argumente globale.

Stabilirea argumentelor globale

Panoul de opțiuni Redux Framework este construit folosind rețelele PHP. Argumentele globale de mai jos se aplică numai instanței exemplului Redux Framework. O listă completă a argumentelor globale poate fi găsită pe site-ul Redux. În scopul acestui tutorial, vom lucra cu o gamă de argumente foarte fundamentale și vă vom arăta cum să o setați.

Redux :: setArgs ('tuts_plus_tutorial', // Acesta este opt_name, array (// Aceasta este array-urile dvs. de argumente 'display_name' => 'Tuts + Tutorial', 'display_version' 'Tuts + Articol din meniu', 'admin_bar' => 'true', 'page_slug' => 'tuts_plus_page_slug', // Trebuie să fie un cuvânt, submeniul "allow_sub_menu" => true,));

Odată ce acest cod este rulat, Redux Framework va produce un panou complet funcțional. Imaginea de mai jos explică modul în care fiecare argument afectează acest panou.

Setarea secțiunilor

Acum, când panoul nostru rulează, să adăugăm câteva secțiuni și câmpuri. Redux utilizează matrice imbricate pentru câmpuri și argumente, deși cu Redux 3.5+ aceste proceduri sunt separate ușor. Să începem prin a face o secțiune la care putem adăuga câmpuri. Pentru documentația mai detaliată privind secțiunile, consultați secțiunea de documentare.

Redux :: setSection ('tuts_plus_tutorial', // Acesta este opt_name, array (// Acesta este argumentul array 'id' => 'section_example_1', // Identificator unic pentru panoul dvs. Trebuie să fie setat și nu trebuie să conțină spații sau "caractere speciale" title = "Exemplul secțiunii", "desc" => 'Aceasta este pentru textul descriptiv.', 'heading' => 'el el- inima ", // http://elusiveicons.com/icons/ // 'subsecțiunea' => true, // Activați acest lucru ca subsecțiune a unei secțiuni anterioare));

icoane

Echipa din spatele Redux Framework menține, de asemenea, pictograme evazive. Ca atare, setul de pictograme evazive este ars direct în miezul Redux. Adăugarea de pictograme este la fel de ușor ca specificarea unei clase, ca în exemplu. Dacă doriți să aveți un alt pachet de pictograme, cum ar fi FontAwesome, există documentație pentru aceste proceduri, de asemenea.

subsecțiunile

Secțiunile pot fi, de asemenea, transformate în subsecțiuni pentru organizarea mai ușoară a panoului dvs. Mai jos este un exemplu, cu sursa de exemplu.

Setarea câmpurilor

Setarea câmpurilor nu se deosebește de setarea secțiunilor sau a argumentelor; totul începe cu o matrice. Înainte de a merge prea departe, trebuie să subliniem faptul că Redux are peste 30 de tipuri diferite de câmpuri, fiecare cu seturi proprii de argumente și o multitudine de opțiuni. Pentru a vedea diferitele tipuri, este sugerat încă o dată să citim docs-ul nostru, pe Redux Documentation on Fields.

Câmpurile pot fi adăugate la secțiuni în două moduri. Mai întâi, adăugați matricele de câmp la setSections funcția descrisă mai sus. În exemplele de mai sus puteți adăuga cu ușurință un argument "câmpuri" și adăugați orice număr de câmpuri la acea secțiune.

Cea de-a doua modalitate necesită un apel suplimentar pentru funcția API Redux, dar este la fel de simplu.

Redux :: setField ('tuts_plus_tutorial', // Aceasta este opt_name, array (// Aceasta este argumentul array 'id' => 'section_example_1', // Identificator unic pentru panoul dvs. Trebuie să fie setat și nu trebuie să conțină spații sau "caractere speciale" '=>' Text ',' section_id '=>' section_example_1 ',' title '=>' Example field ',' subtitle '=> text descriptiv.', ) );

Să ne uităm la ce face acest lucru panoului nostru de exemplu.

Mai aveți timp pentru a examina temeinic diferitele tipuri de câmpuri. Redux Framework conține câmpuri foarte puternice. De exemplu, câmpul de tipografie încrucișează automat fonturile Google selectate pe pagina dvs. Câmpul de fundal - dacă argumentul de ieșire va fi setat pe selectorul dvs. CSS - va genera automat CSS-ul necesar și va fi adăugat la site-ul dvs. Pur și simplu a declarat, Redux cadru face cu adevărat o mulțime de ridicare grele pentru tine!

Sentimentul unui mic pierdut?

Cea mai ușoară modalitate de a începe este să aruncați o privire la site-ul demo Redux. Acesta demonstrează toate tipurile de domenii pe care Redux le oferă cu o mulțime de configurații.

Ce este cu adevărat util este faptul că config-ul de site-uri demo se livrează cu Redux. Inside ~ / sample / sample-config.php este tot ceea ce vezi pe site-ul demo.

Dacă sunteți în continuare pierdut, există o comunitate prosperă în spatele Redux, care vă va ajuta, deși veți găsi tot ceea ce aveți nevoie de pe site-ul Redux Documentation.

Descărcați exemplul complet

Configurația completă a exemplului prezentată în acest tutorial este atașată pentru a fi descărcată de pe bara laterală dreaptă. Acesta este doar un exemplu. Eșantionul încorporat redux-config are multe exemple mai ample.

Concluzie

În această a doua parte a seriei, am analizat mai atent cum funcționează Redux și cum să începem. Am examinat, de asemenea, modalități prin care să adăugăm secțiuni și câmpuri la o instanță a Redux.

De asemenea, am analizat secțiunile și modul în care ar putea fi afișate în mod diferit, pe baza argumentelor și a modului în care sunt legate câmpurile de secțiuni și a modului în care pot fi personalizate cu ușurință pentru a se potrivi cu nevoile dvs..

În următorul tutorial al seriei, vom urmări pașii următori de a folosi cu adevărat Redux în temele și pluginurile dvs. Vom sublinia modul de utilizare a CSS dinamic Redux și de ieșire font. De asemenea, vom vorbi despre alte funcții avansate pe care Redux le poate oferi.