Komme i gang med Redux Framework, Del 2 Seksjoner, Fields & Config

Hva du skal skape

Denne artikkelen hjelper deg, utvikleren, å begynne å bruke Redux Framework på de mest grunnleggende måter: legge til felt. Tidligere har arbeidet med Redux krevd litt forståelse av PHP-klasser og hvordan de fungerer. Med Redux 3.5+ har læringskurven alt annet enn forsvunnet. 

Jeg er en av skaperne av Redux Framework, og i denne opplæringen vil jeg diskutere den indre strukturen til Redux, hvordan felt og seksjoner fungerer, og globale konfigurasjonsargumenter.

Redux leveres med en sample-config.php-fil som inneholder flere eksempler på å sette opp Redux, samt eksempler på nesten alle felt vi tilbyr. For mer omfattende forståelse, prøv prøveutvalget eller sjekk ut Redux-dokumentasjonen.

Laster inn Redux

For å kunne begynne å bruke Redux Framework, må det lastes inn. Det er to måter å få dette til å skje. 

For det første kan Redux enkelt installeres som et plugin og aktivert. Pluggen er fritt tilgjengelig på WordPress.org. Installasjonen gjøres da gjennom plugin installasjonsgrensesnittet. 

Den andre måten å installere Redux Framework er å legge det inn i temaet eller plugin-modulen. Embedding er ganske enkelt å gjøre også. Bare kopier ReduxCore-mappen til temaet eller plugin-modulen (omdøpe katalogen til hvilket navn du ønsker) og inkludere rammen.php-filen som finnes i, gjennom standard PHP inkluderer funksjoner. 

Hvis disse innebygde instruksjonene er for vanskelige, tilbyr Redux også Redux Builder som lar deg utføre et fullt funksjonelt tema med Redux allerede lastet. Best av alt, builder tjenesten er helt gratis. 

Nå som Redux Framework er lastet, kan vi begynne å bruke det.

Forstå hvordan Redux kjører

For å forstå hvordan Redux Framework kjører, må man først forstå hva en Redux-forekomst er. Redux kan kjøres av et tema og et hvilket som helst antall plugins samtidig, alt fra innenfor en WordPress installasjon. Hver forekomst har sitt eget unike sett med egenskaper og argumenter; hver kan oppføre seg veldig annerledes enn andre Redux-forekomster.

Grunnen til at Redux løper som det gjør, er bare å sikre størst fleksibilitet. Altfor mange opsjonsrammer tillates bare for en forekomst av rammen deres å løpe. Vi ønsket at plugin- og temautviklere likt å jobbe med Redux uten at det var en annenes kode.

Opt_name Argument

Hvordan nøyaktig holder man eksempler fra hverandre? Det er alt gjennom en unik nøkkel kalt opt_name. Dette er hvor dataene dine er lagret i WordPress og også teller som din unike nøkkel gjennom hele Redux Framework. Det er viktig å forstå at før du begynner å jobbe med Redux Framework, må du velge en unik opt_name. Når det er gjort bestemmelse, er det på tide å grave inn i globale argumenter.

Innstilling av globale argumenter

Alternativpanelet Redux Framework er bygd med PHP-arrays. De globale argumentene nedenfor gjelder bare for vårt eksemplar av Redux Framework. En fullstendig liste over globale argumenter finnes på Redux-nettstedet. I denne veiledningen vil vi jobbe med et veldig grunnleggende argument, og vise deg hvordan du setter det.

Redux :: setArgs ('tuts_plus_tutorial', // Dette er ditt opt_name, array (// Dette er ditt argument array 'display_name' => 'Tuts + Tutorial', 'display_version' => 'Del 2', 'menu_title' => 'Tuts + Menyelement', 'admin_bar' => 'true', 'page_slug' => 'tuts_plus_page_slug', // Må være ett ord, ingen spesialtegn, ingen mellomrom 'menu_type' => 'meny', // Meny eller undermeny 'allow_sub_menu' => true,));

Når denne koden er kjørt, vil Redux Framework produsere et fullt funksjonelt panel. Bildet nedenfor forklarer hvordan hvert argument påvirker dette panelet.

Innstilling av seksjoner

Nå som vårt panel kjører, la oss legge til noen seksjoner og felt. Redux bruker nestede arrays for felt og argumenter, men med Redux 3.5+ er disse prosedyrene enkelt separert. La oss begynne med å lage en seksjon som vi kan legge til felt til. For mer omfattende dokumentasjon på seksjoner, se på seksjonens dokumentasjon.

Redux :: setSection ('tuts_plus_tutorial', // Dette er ditt opt_name, array (// Dette er ditt argument array 'id' => 'section_example_1', // Unik identifikator for panelet ditt. Må være satt og må ikke inneholde mellomrom eller spesialtegn 'title' => 'Eksempel Seksjon', 'desc' => 'Dette er for beskrivende tekst.', 'heading' => 'Innstilling dette overstyrer tittelargumentet', 'ikon' => 'el el- hjerte ', // http://elusiveicons.com/icons/ //' subsection '=> true, // Aktiver dette som en del av en tidligere seksjon));

ikoner

Teamet bak Redux Framework opprettholder også Elusive Icons. Som sådan bakes Elusive-ikonsettet direkte inn i Redux-kjernen. Legge til ikoner er like enkelt som å spesifisere en klasse, som i eksemplet. Hvis du vil ha et annet ikonpakke, for eksempel FontAwesome, er det også dokumentasjon for disse prosedyrene.

underseksjoner

Seksjoner kan også konverteres til delseksjoner for enklere organisering av panelet ditt. Nedenfor er et eksempel med eksempelkilden.

Innstillingsfelt

Innstillingsfelt er ikke annerledes enn innstillingsseksjoner eller argumenter; alt begynner med en matrise. Før vi går for langt, må vi påpeke at Redux har over 30 forskjellige felttyper, hver med sitt eget sett med argumenter og et mylder av alternativer. For å se de forskjellige typene foreslås det en gang å lese våre dokumenter, over på Redux-dokumentasjonen på feltene.

Felt kan legges til seksjoner på to måter. Først legger du feltfeltene til setSections funksjonen beskrevet ovenfor. I eksemplene ovenfor kan du enkelt legge til et felt-argument og legge til et hvilket som helst antall felt i den delen.

Den andre måten krever et ekstra Redux API-funksjonsanrop, men det er like enkelt.

Redux :: setField ('tuts_plus_tutorial', // Dette er din opt_name, array (// Dette er ditt argument array 'id' => 'section_example_1', // Unik identifikator for panelet ditt. Må være satt og må ikke inneholde mellomrom eller spesialtegn 'type' => 'Tekst', 'section_id' => 'section_example_1', 'title' => 'Eksempelfelt', 'undertekst' => 'Feltundertekst', 'desc' => 'Dette er for Forklarende tekst.', ) );

La oss se på hva dette gjør for vårt eksempelpanel.

Ta deg tid til å grundig undersøke de forskjellige felttyper. Redux Framework inneholder noen virkelig kraftige felt. For eksempel autonummerer typografifeltet de valgte Google-skriftene på siden din. Bakgrunnsfeltet - bør utgangsargumentet settes til CSS-velgeren din - vil automatisk generere det nødvendige CSS og legge til på nettstedet ditt. Bare sagt, Redux Framework virkelig gjør mye av det tunge løfte for deg!

Følte litt tapt?

Den enkleste måten å komme i gang er å først se på Redux demosiden. Det demonstrerer alle de forskjellige feltene Redux tilbyr med en rekke konfigurasjoner.

Det som virkelig er nyttig er at demoområdet konfigureres med Redux. Inside ~ / sample / sample-config.php er alt du ser på demo-siden.

Hvis du fortsatt er tapt, er det et blomstrende samfunn bak Redux som vil hjelpe, selv om du finner det meste du trenger på Redux Documentation-siden.

Få hele eksemplet

Det komplette eksempelkonfigurasjonen som presenteres i denne veiledningen, er vedlagt for at du laster ned fra høyre sidefelt. Dette er bare et eksempel. Den innebygde Redux sample-config har mange flere omfattende eksempler.

Konklusjon

I denne andre delen av serien så vi nærmere på hvordan Redux fungerer, og hvordan du kommer i gang. Vi undersøkte også måter å legge til deler og felt på en forekomst av Redux.

Vi så også på deler og hvordan de kunne vises forskjellig, basert på argumenter og hvordan feltene er knyttet til seksjoner, og hvordan de lett kan tilpasses for å matche dine behov.

I neste veiledning av serien, skal vi se på neste trinn for å virkelig bruke Redux i dine temaer og plugins. Vi vil skissere hvordan du bruker Reduxs dynamiske CSS og skriftutgang. Vi vil også snakke om andre avanserte funksjoner Redux har å tilby deg.