Lag ditt eget WordPress Theme Options Panel med Redux Framework

Redux-rammeverket er en av de mest populære, avanserte og gratis å bruke opsjonspanelrammer for WordPress-temaer og plugins. Dens fleksibilitet gir deg friheten til å lage noen form for alternativer og innstillinger for ditt WordPress-prosjekt.

I denne veiledningen vil jeg vise deg hvordan du kan installere, tilpasse og bruke Redux-rammeverket i ditt eget tema.

Vi går gjennom følgende trinn:

Installasjon
Generell konfigurasjon
Opprette et valgpanel
Bruke alternativer innenfor et tema

Merk: Jeg skal bare referere til Redux Framework Redux gjennom hele denne opplæringen. Dette skal ikke forveksles med Redux, den "forutsigbare tilstandsbeholderen for JavaScript-apps".

1. Installasjon

Det er tre måter du kan inkludere Redux på i prosjektet ditt:

Installer den som et eget plugin
Ta med den i temakjerne
Inkluder det i et temaavhengig plugin

Installer den som et separat plugin

Som standard kan Redux installeres som et plugin. Hvis du går til Redux Framework WordPress Plugin Page, vil du se at du kan laste den ned som en vanlig plugin og installere den på WordPress-nettstedet ditt med noe tema. Dette skaper ikke noen alternativer skjønt; alt du kan gjøre er å aktivere demomodus med utvalgsalternativer.

For å få et valgpanel med tilpassede alternativer for ditt tema eller plugin, må du opprette en separat config.php-fil. Les mer om hvordan dette fungerer:

Derfor er fordelene og ulemper ved denne tilnærmingen:

Ulemper	Pros
Separat plugin-installasjon som må lagres som zip-fil, enten på serveren din eller i emnemappen.	Du reduserer størrelsen på temaet når valgpanelet ikke er en del av temakjernen.
Økt følelse av at temaet / plugin avhenger av utvikling og verktøy fra tredjepart.	Du unngår mange advarsler og feil fra Tema sjekk-plugin.

Inkluder det i Tema Core

Det er ingenting å stoppe deg, inkludert Redux, i ditt tema, med mindre det er i konflikt med Tema-sjekke-plugin. Logikken er den samme som før, du trenger fortsatt en config.php-fil med dine egendefinerte alternativer, men nå unngår du ekstra plugininstallasjon.

Ulemper	Pros
Øker temapakke størrelsen.	Unngå ekstra plugin installasjon.
Potensielle konflikter og problemer kan oppstå fra Tema sjekk-plugin.	Temaet Alternativpanel føles mer knyttet til temaet ditt og mer integrert.
Når plugin er oppdatert, må du oppdatere temaet ditt også.

Inkluder det i et tema-avhengig plugin

Etter min mening er denne tilnærmingen den beste måten å inkludere Redux-rammeverket. Prosessen er like enkel som en vanlig plugin-installasjon, den eneste forskjellen er at den nå er en del av ditt eget temas nødvendige tilleggsprogram.

Moderne premietemaer kommer vanligvis med tilpassede elementer-tilpassede innleggstyper og så videre, som alle hører til i et plugin, så den logiske tilnærmingen er å lage et tilleggsprogramtillegg knyttet til temaet ditt. I tilleggsprogrammet kan du inkludere temaalternativerpanelet. Lær mer om hvordan du lager temaavhengige plugins i denne opplæringen:

Ulemper	Pros
Fant ikke :)	Unngå ekstra plugin installasjon.
	Temaet Alternativpanel føles mer integrert i temaet ditt.

Konfigurasjonsprosessen for Redux er upåvirket av installasjonsmetoden, så det er opp til deg hvordan du vil inkludere Redux i prosjektet. Når det er sagt, foretrekker jeg fortsatt det siste alternativet, så det er den tilnærmingen jeg skal bruke for å beskrive konfigurasjonen.

2. Generell konfigurasjon

Hvis du undersøker standard Redux Framework plugin-mappen, finner du mange filer og kataloger, men alt du trenger her er ReduxCore-mappen.

ReduxCore-mappen

Kopier alt innholdet i den mappen til tilleggspluginemappen. Lag en mappe, ring det som du vil, for eksempel optionpanel, og legg inn ReduxCore-innholdet i det. Deretter oppretter du en tom fil i den mappen og kaller den config.php. Neste vi trenger å kreve reduxframework, som vi vil gjøre på en ikke-konflikt måte, så hvis add-on-pluginet er installert i WordPress-miljøet, vil nettstedet ikke krasje.

I tilleggsprogrammet legger du hovedkoden til koden:

Det er alt! Redux Framework er nå integrert, selv om du ikke vil se et valgpanel ennå, siden vi først må lage noen alternativer. Dette vil alle bli gjort i config.php filen vi opprettet.

3. Opprette et valgpanel

Som veiledning og utgangspunkt kan du bruke sample-config.php-filen som ble levert med Redux-plugin. Dette inneholder all koden som trengs for å begynne å lage dine egne tilpassede alternativer. For nå, la oss markere hovedkonfigurasjonsprosessen.

Åpne din config.php-fil og legg i begynnelsen denne koden (åpningen koden vil ikke være nødvendig hvis den allerede er tilstede):

 Denne sjekken sørger for at Redux Framework er aktiv, ellers vil alle alternativene vi lager, mislykkes, og vil trolig kaste tonn PHP feil.
 Før vi begynner å lage våre alternativer, trenger vi først en ekstra konfigurasjon. Opprett en variabel som lagrer alle dine valg og kan brukes i temafilene dine:
$ opt_name = "your_variable_name";
 Gjør det unikt, ved hjelp av prefikser, for eksempel: yourbrandname_yourthemename.
Deretter legger du til koden:
$ tema = wp_get_theme ();
Dette er nødvendig for å konfigurere eventuelle Redux-argumenter som bruker informasjon om det installerte temaet.
argumenter
 På dette punktet må vi legge til følgende argumenter:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ tema-> få ('Navn'), 'display_version' => $ theme-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html __ ('Temainnstillinger', yourtextdomain '),' page_title '=> esc_html __ (' ThemeSettings ', yourtextdomain'), 'google_api_key' => google_update_weekly '=> false,' async_typography '=> sant,' admin_bar '=> sant,' admin_bar_icon '=> ",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false update_notice '=> false,' customizer '=> sant,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> ",' last_tab ' => ',' page_icon '=>' ikon-temaer ',' page_slug '=>' themeoptions ',' save_defaults '=> sant,' default_show '=> false,' default_mark '=> ",' show_import_export '=> sant);
 Det er mange argumenter her, men ikke bekymre deg, jeg vil markere de viktigste.
 menu_type
 Hvis du vil at temaalternativer-siden skal vises som et eget toppnivå menyelement, bør du sette denne verdien til Meny, hvis du trenger temaalternativer for å vises som en undermeny (jeg foretrekker å sette dem under Utseende) sett verdien til undermeny.
 dev_mode
 Du kan aktivere dette under utvikling, men ikke glem å deaktivere det når du publiserer temaet.
 update_notice
 Som Redux vil være en del av prosjektet ditt, vil du ikke at brukerne skal få oppdateringsvarsler fra Redux Framework, så sett dette til falsk.
 tilpasser
 Hvis du vil vise dine egendefinerte innstillinger som en del av WordPress-tilpasseren, må du bare angi dette argumentet til ekte.
 Argument-gruppen inneholder mange flere elementer, og hvis du vil ha informasjon om hver enkelt, kan du finne detaljer i sample-config.php. For våre behov har vi tilpasset argumentene nok. La oss nå angi argumentene.
Redux :: setArgs ($ opt_name, $ args);
 Legge til seksjoner
Nå er temapanelet klart, du kan legge til seksjoner med alternativer. Tenk på seksjoner som grupper. Hvis du vil legge til (for eksempel) headeralternativer, oppretter du en header-seksjon og legger til alternativer for den. For å opprette noen seksjoner trenger du følgende struktur:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Seksjonstitel', 'yourtextdomain'), 'id' => esc_html __ ('section-unique-id', 'yourtextdomain'), 'ikon' => 'ikon-navn', 'felt' => array ()));
 Her vil jeg fremheve id attributt - sørg for at det er unikt. Du kan bruke egendefinerte ikoner, men standardikonpakken er elusiveicons.
 Din seksjon er opprettet, så nå kan du legge til alternativer til feltfeltet. En liste over tilgjengelige opsjonstyper, samt kodestrukturen med forklaringer og høydepunkter, finner du her. 
Hvis du vil gjøre delen a ledd av den tidligere tilførte delen, bare legg til et nytt argument 'subsection' => true. 
Alternativet i seg selv er ikke noe annet enn en matrise med argumenter, for eksempel:
array ('id' => 'opt-checkbox', 'type' => 'avmerkingsboks', 'title' => esc_html __ ('Checkbox', 'yourtextdomain'), 'subtitle' => esc_html __ ('Ingen validering kan gjort på denne felt typen ',' yourtextdomain '),' desc '=> esc_html __ (' Dette er beskrivelsesfeltet, igjen bra for ytterligere info. ',' yourtextdomain '),' default '=>' 1 '// 1 = på | 0 = av), 
 Med denne koden har vi lagt til en avkrysningsboks i delen vår. De viktigste tingene her er id (det burde være unikt), og typen (det skal være riktig, og følg nøyaktig navngivelse av felt typen som Redux gir). Igjen, flere detaljer om felt kan bli funnet i sample-config.php-filen.
 Vanligvis er dette alt du trenger å vite for å opprette et valgpanel. Neste vil vi se på hvordan du bruker disse alternativene.
 4. Bruke alternativer innenfor et tema
 Redux lagrer alle alternativer i en global variabel. Husk $ opt_name variabel som vi opprettet i config.php filen? Det er variabelen som lagrer alle dine alternativer, og du kan få tilgang til dem på følgende måte.
 Først må du deklarere den globale variabelen. Og dette presenterer det første potensielle problemet: Det anbefales ikke å erklære en global variabel utenfor en funksjon eller handling. Løsningen er å legge til dine funksjoner.php-fil denne lille funksjonen:
fungere yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Deretter, på hver side du vil bruke alternativene dine, utfør funksjonen først slik:
yourprefix_theme_options_global_variable ();
 Hvis du trenger den globale variabelen i en annen funksjon eller handling, kan du deklarere den uten denne funksjonen.
Bruke alternativer
 Hvis du bruker alternativer uten først å sjekke alternativet finnes, får du en PHP-melding som sier noe om Udefinert variabel / indeks. Hvorfor er dette viktig? Fordi hvis brukeren aktiverer temaet ditt, men ikke aktiverer tilleggsprogrammet som inneholder alternativpanelet, vil han eller hun se en samling av PHP-advarsel om udefinerte variabler. Ikke ideell.
Det er et godt mønster for å unngå denne situasjonen. Det ser slik ut:
$ your_option_name = (isset ($ GLOBALS ['yourglobalvariable'] ['youroption'])))? $ GLOBALS ['yourglobalvariable'] ['youroption']: "yourdefaultvalue for thisoption";
 Med denne lille sjekken sørger du for at du ikke får noen udefinerte variable / indeksmeldinger. Hvis du ikke vil tildele standardverdier eller opprette en variabel, kan du bruke dette mønsteret i stedet: 
Hvis (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // gjør tingene ...
Konklusjon
Takk for at du leser, jeg håper dette får deg til å begynne å bruke Redux for dine temaalternativer! Hvis du har noen spørsmål eller forslag, vennligst legg igjen en kommentar nedenfor.
nyttige lenker
 reduxframework.com
  ReduxFramework på Facebook
  @ReduxFramework på Twitter
 



		
			
	   
	




Webdesign