Den här artikeln hjälper dig, utvecklaren, att börja använda Redux Framework på de mest grundläggande sätten: lägga till fält. Tidigare krävde arbetet med Redux en viss förståelse av PHP-klasserna och hur de fungerar. Med Redux 3.5+ har inlärningskurvan allt utom försvunnit.
Jag är en av skaparna av Redux Framework, och i den här handledningen diskuterar jag Reduxs inre struktur, hur fält och sektioner fungerar och globala konfigurationsargument.
Redux skickas med en sample-config.php-fil som innehåller flera exempel på att konfigurera Redux, liksom exempel på nästan alla fält vi erbjuder. För mer omfattande förståelse, granska provkonfigurationen eller kolla Redux-dokumentationen.
För att kunna börja använda Redux Framework måste den laddas. Det finns två sätt att göra detta hända.
Först kan Redux enkelt installeras som ett plugin och aktiveras. Pluggen är fritt tillgänglig på WordPress.org. Installationen görs sedan via plugin-installationsgränssnittet.
Det andra sättet att installera Redux Framework är att bädda in det i ditt tema eller plugin. Inbäddning är ganska lätt att göra också. Kopiera bara ReduxCore-mappen till ditt tema eller plugin (byta namn på katalogen till vilket namn du vill) och inkludera framework.php-filen som finns inom, genom standard PHP ingår funktioner.
Om dessa inbäddningsinstruktioner är för svåra, erbjuder Redux också Redux Builder som gör att du kan skriva ut ett helt funktionellt tema med Redux redan laddad. Bäst av allt är byggnadsarbetet helt gratis.
Nu när Redux Framework laddas, kan vi börja använda det.
För att förstå hur Redux Framework körs måste man först förstå vad en Redux-instans är. Redux kan köras av ett tema och ett antal plugins samtidigt, allt från en WordPress-installation. Varje instans har sin egen unika uppsättning egenskaper och argument; Var och en kan uppträda väldigt annorlunda än andra Redux-instanser.
Anledningen till att Redux går som det gör är helt enkelt att säkerställa den största flexibiliteten. Alltför många alternativ ramar tillåts endast för en instans av sina ramar att springa. Vi ville ha både plugin och temaboutvecklare att arbeta med Redux utan hinder av varandras kod.
Hur exakt behåller man instanser separat? Det är allt genom en unik nyckel som heter opt_name
. Här är dina data lagrade i WordPress och räknas också som din unika nyckel i hela Redux Framework. Det är viktigt att förstå att innan du börjar arbeta med Redux Framework måste du välja en unik opt_name
. När bestämningen har gjorts är det dags att gräva i globala argument.
Alternativpanelen för Redux Framework är byggd med hjälp av PHP-arrays. De globala argumenten nedan gäller endast för vårt exempel på Redux Framework. En fullständig lista över globala argument finns på Redux webbplats. För syftet med denna handledning kommer vi att arbeta med en mycket grundläggande argumentmatris och visa hur du ställer in den.
Redux :: setArgs ('tuts_plus_tutorial', // Detta är ditt opt_name, array (// Detta är din argumentmatris 'display_name' => 'Tuts + Tutorial', 'display_version' => 'Del 2', 'menu_title' => 'Tuts + Menyobjekt', 'admin_bar' => 'true', 'page_slug' => 'tuts_plus_page_slug', // Måste vara ett ord, inga specialtecken, inga mellanslag 'menu_type' => 'meny', // Meny eller undermenyn 'allow_sub_menu' => true,));
När denna kod har körts kommer Redux Framework att producera en helt funktionell panel. Bilden nedan förklarar hur varje argument påverkar den här panelen.
Nu när vår panel körs, låt oss lägga till några avsnitt och fält. Redux använder inbyggda arrays för fält och argument, men med Redux 3.5+ är dessa procedurer lätt separerade. Låt oss börja med att skapa en sektion som vi kan lägga till fält till. För mer omfattande dokumentation om sektioner, titta på sektionsdokumentationen.
Redux :: setSection ('tuts_plus_tutorial', // Detta är ditt opt_name, array (// Detta är din argumentmatris 'id' => 'section_example_1', // Unik identifierare för din panel. Måste anges och får inte innehålla mellanslag eller specialtecken 'title' => 'Exempel avsnitt', 'desc' => 'Detta är för beskrivande text.', 'heading' => 'Inställning av detta överstyrer rubrikens argument', 'icon' => 'el el- hjärta ", // http://elusiveicons.com/icons/ // 'subsection' => true, // Aktivera detta som underavsnitt i ett tidigare avsnitt));
Teamet bakom Redux Framework upprätthåller även Elusive Icons. Som sådan bakas Elusive-ikonuppsättningen direkt i Redux-kärnan. Att lägga till ikoner är lika enkelt som att ange en klass, som i exemplet. Om du vill ha en annan ikonpaket, till exempel FontAwesome, finns det även dokumentation för dessa procedurer.
Sektioner kan också konverteras till underavsnitt för enklare organisation av din panel. Nedan är ett exempel med exempelkällan.
Inställningsfält är inte annorlunda än inställningssektioner eller argument; allt börjar med en matris. Innan vi går för långt måste vi påpeka att Redux har över 30 olika fälttyper, varje med sin egen uppsättning argument och en mängd alternativ. För att se de olika typerna föreslås det en gång att läsa våra dokument, över på Redux-dokumentationen på fält.
Fält kan läggas till sektioner på två sätt. Lägg först fältuppsättningarna till setSections
funktion som beskrivs ovan. I exemplen ovan kan du enkelt lägga till ett "fält" -argument och lägga till ett antal fält i den delen.
Det andra sättet kräver ytterligare ett Redux API-funktionssamtal, men det är lika enkelt.
Redux :: setField ('tuts_plus_tutorial', // Detta är ditt opt_name, array (// Detta är din argumentmatris 'id' => 'section_example_1', // Unik identifierare för din panel. Måste anges och får inte innehålla mellanslag eller specialtecken 'typ' => 'Text', 'section_id' => 'section_example_1', 'title' => 'Exempelfält', 'textning' => 'Fältundertext', 'desc' => 'Detta är för beskrivande text.', ) );
Låt oss titta på vad det här gör för vårt exempelpanel.
Ta dig tid att noggrant undersöka de olika fälttyperna. Redux Framework innehåller några riktigt kraftfulla fält. Typfältet typograferar automatiskt de valda Google-teckensnitten till din sida. Bakgrundsfältet-ska utmatningsargumentet ställas in på din CSS-väljarkonto, som automatiskt genererar den nödvändiga CSS-filen och lägger till på din webbplats. Enkelt uttryckt, Redux Framework gör verkligen mycket av den tunga lyftningen för dig!
Det enklaste sättet att komma igång är att först titta på Redux demosidan. Det visar alla olika typer av fält Redux erbjuder med en massa konfigurationer.
Det som verkligen är användbart är att demo-webbplatsen konfigureras med Redux. Inside ~ / sample / sample-config.php är allt du ser på demo-webbplatsen.
Om du fortfarande är borttappad finns det en blomstrande gemenskap bakom Redux som kommer att hjälpa, men du hittar det mesta du behöver på Redux Documentation-webbplatsen.
Det fullständiga exemplet config som presenteras i denna handledning är bifogad för att du ska ladda ner från höger sidofält. Detta är bara ett exempel. Den inbyggda Redux-provkonfigurationen har många mer omfattande exempel.
I den andra delen av serien tittade vi på hur Redux fungerar och hur man kommer igång. Vi undersökte också hur man kan lägga till avsnitt och fält till en instans av Redux.
Vi tittade också på sektioner och hur de kunde visas på olika sätt, baserat på argument och hur fält är knutna till sektioner och hur de lätt kan anpassas för att matcha dina behov.
I nästa handledning av serien kommer vi att titta på nästa steg att verkligen använda Redux i dina teman och plugins. Vi beskriver hur du använder Redux dynamiska CSS och fontutskrift. Vi talar också om andra avancerade funktioner Redux har att erbjuda dig.