Komma igång med Redux Framework presentera det och integrera det i ditt tema

Vad du ska skapa

När webbplatsägare installerar ett nytt WordPress-tema är det första som de vill göra, att anpassa sin utseende och känsla för att matcha deras varumärke eller personliga preferenser. Och för det mesta har de som köper, hämtar eller installerar WordPress-teman lite eller ingen kodningserfarenhet.

Så hur kan du som temautvecklare göra det möjligt för slutanvändarna av ditt tema att ha så mycket kontroll som möjligt över utseendet på deras webbplats utan att behöva lära sig att koda? 

Genom att skapa alternativsidor / paneler, förstås!

Temaalternativsidor är emellertid inte lätta att skapa, särskilt för de utvecklare som inte har mycket erfarenhet av WordPress eller programmering i allmänhet. Lyckligtvis finns det valmöjligheter.

Vad är alternativramar?

Alternativramar är kodbibliotek, plugins eller klasser som ger en solid grund som utvecklare enkelt och snabbt kan bygga på för att skapa och lägga till alternativsidor till deras teman. Detta gör det möjligt för icke-utvecklare att använda sådana paneler för att snabbt anpassa utseendet på deras webbplats utan att röra kod.

Alternativpaneler kan användas för att:

• ladda upp en logotyp
• ändra bakgrundsfärgen eller någon CSS-egenskap hos ett element (till exempel rubriken eller sidfoten i ditt tema)
• välj en fördefinierad hud eller layout
• Lägg till anpassad CSS eller JavaScript
• och mer

I grund och botten kan alternativpaneler placera makten i händerna på dina temanvändare genom att göra det möjligt för dem att ändra nästan alla aspekter av deras webbplats.

I denna serie ska vi titta på ett mycket populärt och allmänt använt alternativ ramverk-Redux Framework.

Denna serie kommer att delas in i följande delar:

• Del 1: Introducera Redux Framework och integrera det i ditt tema
• Del 2: Lägga till sektioner och fält och arbeta med konfigurationsinställningar
• Del 3: Använda alternativen i ditt tema (och Widgets)
• Del 4: Alternativ till Redux
• Del 5: Slutsats

Vad är Redux Options Framework?

Redux Framework är ett alternativ ramverk som föddes ur kombinationen av fyra ramar, nämligen:

• NPH, som skapades av Lee Mason i syfte att skapa en ram som var kompatibel med ThemeForests krav på inlämning
• SMOF
• SimpleOptions, som är en sammanslagning av ovanstående ramar, skapad av Dovy Paukstys
• En tidigare version av Redux (Redux 2.0),skapad av Daniel Griffiths och baserad på NPH

Redux kärnteam består av dessa tre utvecklare. Projektet är under aktiv utveckling, med uppdateringar som släpps ganska regelbundet.

Redux Funktioner

• Använder API-inställningarna för WordPress
• Flera fälttyper
• Inbyggda valideringskurser
• Utdragbar
• Import / exportfunktionalitet, som gör att du kan ändra portinställningar över webbplatser

Varför Redux?

• Fri: Redux är gratis och 100% öppen källkod. Du kan använda den i både personliga och kommersiella projekt utan att betala en cent.
• ThemeForest-kompatibel: Redux uppfyller Envatos krav på inlämning, vilket gör det till ett bra alternativ för temaboutvecklare som vill utveckla teman eller plugins som ska säljas på Envats marknadsplatser.
• Populär: Redux används av över 250 (kända) föremål på Envato-marknadsplatserna som har sålt för drygt 6 miljoner dollar. Denna popularitet hänvisar till kraften i denna ram.
• Lätt att använda: Om du förstår hur arrays fungerar, än du kan använda Redux. Att komma igång med Redux är lika enkelt som att skapa ett konfigurationsobjekt som består av inget mer än kapslade arrays.
• Flexibel: Om det inte riktigt uppfyller dina behov kan Redux utökas för att skapa anpassade fält och validering / felhantering.
• Väldokumenterad: Redux är väl dokumenterad. Redux webbplats har en kunskapsbas, codex (developer dokumentation) och video tutorials.
• Stark gemenskap: En stark gemenskap har svampat runt Redux. Om du har lite problem och vill ha hjälp, hittar du förmodligen någon som har stött på samma problem tidigare. Och om det är en funktion du behöver, är mer än 50 bidragsgivare villiga att lyssna (och kanske lägga till den i nästa utgåva).

Installera Redux

Det finns flera sätt att installera Redux. Men för syftet med denna handledning kommer vi att installera den från WordPress.org.

Installera pluginet som du skulle något plugin:

• Gå till Plugins> Lägg till nytt.
• Ange sökrutan i sökrutan Redux Framework och klicka sedan på Sök plugins.
• På resultatsidan klickar du på Installera nu på första posten.
• När du har installerat det, fortsätt för att aktivera det som du skulle något annat plugin.

Aktivera demoläge

För att aktivera demoläge, gå till Plugins> Installerade plugins och bläddra till Redux Framework. Du kommer att se något så här:

Klick Aktivera demoläge.

Detta aktiverar demoläget och skapar en samlingsalternativspanel som heter Exempelalternativ i WordPress Dashboard.

Demo Mode och sidan Sample Options kan du leka med Redux och utforska de olika fälttyperna som du kan skapa.

Integrera det i ditt tema

Hittills har vi installerat Redux och aktiverat demoläget så att vi kan utforska de olika fält som Redux tillåter oss att skapa.

För att integrera Redux i vårt tema måste vi initialisera det med en ny konfigurationsfil. Följ dessa steg för att initiera en ny instans av Redux:

• Navigera till redux-ram katalog i din WordPress-plugin-katalog (wp-content / plugins /) och kopiera provkatalog till ditt tema.

• Öppna din functions.php fil och lägg till följande rad kod:

När du uppdaterar din WordPress Dashboard och svävar över Exempelalternativ, Du kommer märka att ingenting har förändrats - du har fortfarande samma undermenyer som tidigare. Det beror på att vår konfiguration är exakt densamma som tidigare. Vi flyttade bara konfigurationsfilen från Redux plugin-katalogen till vår temakatalog.

Dessutom kan du få följande felmeddelande:

Detta beror på det faktum att vi laddar två identiska konfigurationsfiler. Du kan åtgärda det genom att gå till pluginpanelen och inaktivera demoläge.

Det vi vill göra är att börja med en blank config-fil. Redux kommer med en för din bekvämlighet. Så låt oss länka till det istället.

För att göra det, ändra linjen som du just lagt till din functions.php från:

Till:

Om du går tillbaka till din Dashboard kommer du att inse att vår Exempelalternativ panelen innehåller en sektion-Heminställningar-och ett fält, ett media uppladdningsfält som lämpligen heter Webtexter.

Vi har nu en barebones config-klass som vi kan lägga till sektioner och fält till.

Slutsats

I den här första delen av serien tittade vi på Redux Framework, vad är och varför det är värt att använda det i dina projekt. Vi gick vidare och installerade en ny installation av Redux och undersökte de olika funktionerna som ger oss som tematillverkare.

Vi har också skapat våra egna barebones konfigurationsfiler för att visa hur vi kan börja tweak Redux för att möta våra specifika behov.

I nästa handledning i serien ska vi lära oss hur vi kan lägga till fler avsnitt och se även att lägga till fält i dessa sektioner.