Komme i gang med Redux Framework Introdusere det og integrere det i temaet ditt

Hva du skal skape

Når nettstedseierne installerer et nytt WordPress-tema, er det første som de vil gjøre, å finjustere utseendet deres for å matche deres merkevarebygging eller personlige preferanser. Og mesteparten av tiden har folk som kjøper, laster ned eller installerer WordPress-temaer, liten eller ingen kodende opplevelse.

Så hvordan kan du som temautvikler gjøre det mulig for sluttbrukere av temaet ditt å ha så mye kontroll som mulig over utseendet på nettstedet uten å måtte lære å kode? 

Ved å lage valgsider / paneler, selvfølgelig!

Men temaalternativer er ikke enkle å lage, spesielt for de utviklere som ikke har mye erfaring med WordPress eller programmering generelt. Heldigvis er det valgrammer.

Hva er valgrammer?

Valgrammer er kodebiblioteker, plugins eller klasser som gir et solid fundament som utviklere enkelt og raskt kan bygge på for å lage og legge til tilleggssider til deres temaer. Dette gjør det mulig for ikke-utviklere å bruke slike paneler for raskt å tilpasse utseendet til nettstedet deres uten å berøre kode.

Alternativpaneler kan brukes til å:

• last opp en logo
• endre bakgrunnsfargen eller en hvilken som helst CSS-egenskap til et element (for eksempel topptekst eller bunntekst av temaet ditt)
• velg en forhåndsdefinert hud eller layout
• legg til tilpasset CSS eller JavaScript
• og mer

I utgangspunktet kan opsjonspaneler plassere kraften i hendene på temaene dine ved å gjøre det mulig for dem å endre nesten alle aspekter av deres nettsteds design.

I denne serien skal vi se på et veldig populært og mye brukt rammeverk-Redux Framework.

Denne serien vil bli delt inn i følgende deler:

• Del 1: Vi presenterer Redux Framework og integrerer det i temaet ditt
• Del 2: Legge til seksjoner og felt og arbeide med konfigurasjonsinnstillinger
• Del 3: Bruke alternativene i temaet ditt (og widgets)
• Del 4: Alternativer til Redux
• Del 5: Konklusjon

Hva er Redux Options Framework?

Redux Framework er en opsjonsramme som ble født ut av kombinasjonen av fire rammer, nemlig:

• NPH, som ble opprettet av Lee Mason med det formål å skape et rammeverk som var kompatibelt med ThemeForests krav til innlevering
• SMOF
• SimpleOptions, som er en fusjon av ovennevnte rammeverk, opprettet av Dovy Paukstys
• En tidligere versjon av Redux (Redux 2.0),laget av Daniel Griffiths og basert på NPH

Redux-kjerneteamet består av disse tre utviklerne. Prosjektet er under aktiv utvikling, med oppdateringer utgitt ganske regelmessig.

Redux funksjoner

• Bruker WordPress Settings API
• Flere felttyper
• Innebygde valideringsklasser
• Extensible
• Import / eksport-funksjonalitet, slik at du kan legge inn portinnstillinger på tvers av nettsteder

Hvorfor Redux?

• Gratis: Redux er gratis og 100% åpen kilde. Du kan bruke den i både personlige og kommersielle prosjekter uten å betale en cent.
• Themeforest-kompatibel: Redux oppfyller Envato's krav til innsending, noe som gjør det til et godt alternativ for temautviklere som ønsker å utvikle temaer eller plugins som skal selges på Envato's markedsplasser.
• Populær: Redux brukes av over 250 kjente elementer i Envato-markedsplassene som har solgt for godt over $ 6 millioner. Denne populariteten refererer til kraften i dette rammeverket.
• Lett å bruke: Hvis du forstår hvordan arrays fungerer, enn du kan bruke Redux. Komme i gang med Redux er like enkelt som å skape et konfigurasjonsobjekt som består av ikke mer enn nestede arrays.
• fleksibel: Hvis det ikke oppfyller dine behov, kan Redux utvides til å skape tilpassede felt og validering / feilsøking.
• Veldokumentert: Redux er godt dokumentert. Redux-nettstedet har en kunnskapsbase, codex (utviklerdokumentasjon) og videoopplæringsprogrammer.
• Sterkt fellesskap: Et sterkt samfunn har mushroomed rundt Redux. Hvis du har litt problemer og ønsker hjelp, vil du sikkert finne noen som har møtt det samme problemet før. Og hvis det er en funksjon du trenger, vil mer enn 50 bidragsytere være villige til å lytte (og kanskje legge den til i neste utgave).

Installere Redux

Det er flere måter å installere Redux på. Men for formålet med denne opplæringen, skal vi installere den fra WordPress.org.

Installer plugin som du ville noen plugin:

• Gå til Plugins> Legg til nytt.
• Skriv inn i søkefeltet Redux Framework og klikk deretter Søk plugger.
• Fra resultatsiden, klikk Installere nå på første oppføring.
• Etter at du har installert det, fortsett å aktivere det som du ville noe annet plugin.

Aktiverer demomodus

For å aktivere demomodus, gå til Plugins> Installert Plugins og bla til Redux Framework. Du vil se noe slikt:

Klikk Aktiver Demo Mode.

Dette vil aktivere demomodus og opprette et samplingsalternativpanel som heter Eksempelalternativer i WordPress Dashboard.

Demo Mode og Sample Options-siden vil tillate deg å leke med Redux og utforske de forskjellige felttyper som det lar deg lage.

Integrere det inn i temaet ditt

Så langt har vi installert Redux og aktivert Demo-modusen slik at vi kan utforske de forskjellige feltene Redux lar oss lage.

For å integrere Redux i vårt tema må vi initialisere det med en ny konfigurasjonsfil. Følg disse trinnene for å initialisere en ny forekomst av Redux:

• Naviger til Redux-rammeverk katalog i WordPress-plugin-katalogen din (wp-innhold / plugg /) og kopier prøvekatalog til temaet ditt.

• Åpne din functions.php fil og legg til følgende linje kode:

Når du oppdaterer WordPress Dashboard og svever over Eksempelalternativer, Du vil legge merke til at ingenting har endret seg - du har fortsatt de samme undermenyene som før. Dette skyldes at konfigurasjonen vår er nøyaktig den samme som før. Vi flyttet ganske enkelt konfigurasjonsfilen fra Redux plugin-katalogen til vår temakatalog.

Videre kan du se følgende feilmelding:

Dette skyldes at vi laster inn to identiske config-filer. Du kan fikse dette ved å gå til Plugins-panelet og deaktivere demomodus.

Det vi vil gjøre er å starte med en blank config-fil. Redux kommer med en for din bekvemmelighet. Så la oss koble til det i stedet.

For å gjøre det, endre linjen du nettopp har lagt til i functions.php fra:

Til:

Hvis du går tilbake til oversikten din, vil du innse at vår Eksempelalternativer panelet inneholder en seksjon-Hjem Innstillinger-og ett felt, et mediaopplastingsfelt som er passende benevnt webfonter.

Vi har nå en barebones config klasse som vi kan legge til seksjoner og felt til.

Konklusjon

I denne første delen av serien så vi på Redux Framework, hva er og hvorfor det er verdt å bruke det i prosjektene dine. Vi gikk videre og installerte en ny installasjon av Redux og undersøkte de forskjellige funksjonene det gir oss som temautviklere.

Vi har også opprettet våre egne barebones konfigurasjonsfiler for å demonstrere hvordan vi kan begynne å tilpasse Redux for å møte våre spesifikke behov.

I neste veiledning i serien skal vi lære hvordan vi kan legge til flere seksjoner, og se også å legge til felt i disse seksjonene.