Creëer uw eigen WordPress Theme Option Panel met Redux Framework

Het Redux-framework is een van de meest populaire, geavanceerde en gratis te gebruiken paneelvensters voor WordPress-thema's en -plug-ins. De flexibiliteit geeft u de vrijheid om elk type opties en instellingen voor uw WordPress-project te maken.

In deze tutorial zal ik je laten zien hoe je het Redux-framework kunt installeren, aanpassen en gebruiken in je eigen thema.

We lopen de volgende stappen door:

Installatie
Algemene configuratie
Een Optiepaneel maken
Opties binnen een thema gebruiken

Notitie: Ik zal eenvoudig naar Redux Framework verwijzen Redux tijdens deze tutorial. Dit moet niet worden verward met Redux, de "voorspelbare statuscontainer voor JavaScript-apps".

1. Installatie

Er zijn drie manieren om Redux in uw project op te nemen:

Installeer het als een afzonderlijke plug-in
Neem het op in uw themakern
Neem het op in een thema-afhankelijke plug-in

Installeer het als een afzonderlijke plugin

Standaard kan Redux worden geïnstalleerd als een plug-in. Als je naar de Redux Framework WordPress Plugin-pagina gaat, zul je zien dat je het als een reguliere plug-in kunt downloaden en het met elk thema op je WordPress-site kunt installeren. Dit creëert echter geen opties; alles wat je kunt doen is de demomodus activeren met voorbeeldopties.

Om een optiepaneel met aangepaste opties voor uw thema of plugin te krijgen, moet u een apart config.php-bestand maken. Lees meer over hoe dit werkt:

Vandaar dat de voor- en nadelen van deze aanpak zijn:

Cons	Pros
Aparte plug-ininstallatie die als zipbestand op uw server of in de themamap moet worden opgeslagen.	U verkleint de grootte van uw thema wanneer het optiepaneel geen deel uitmaakt van de themakern.
Verhoogd gevoel dat het thema / de plug-in afhankelijk is van ontwikkeling en hulpmiddelen van derden.	U vermijdt talloze waarschuwingen en fouten van de Theme Check-plugin.

Neem het op in uw themakern

Er is niets dat je tegenhoudt, inclusief Redux in je thema, tenzij het conflicteert met de Theme Check-plugin. De logica is hetzelfde als voorheen, je hebt nog steeds een config.php-bestand nodig met je aangepaste opties, maar nu vermijd je extra plug-in installatie.

Cons	Pros
Verhoogt de grootte van het themapakket.	Vermijd extra plug-in installatie.
Potentiële conflicten en problemen kunnen voortvloeien uit de plug-in Theme Check.	Het themakenster voelt meer verbonden met uw thema en is meer geïntegreerd.
Wanneer de plug-in is bijgewerkt, moet u uw thema ook bijwerken.

Neem het op in een van het thema afhankelijke plug-in

Naar mijn mening is deze aanpak de beste manier om het Redux-raamwerk op te nemen. Het proces is net zo eenvoudig als een normale plug-in installatie, het enige verschil is dat het nu deel uitmaakt van de vereiste add-on plugin van uw eigen thema.

Moderne premiumthema's worden meestal geleverd met aangepaste elementen - aangepaste berichttypen enzovoort - die allemaal in een plug-in thuishoren, dus de logische benadering is om een invoegtoepassing te maken die is gekoppeld aan uw thema. In die add-on-plug-in kunt u uw paneel met thema-opties opnemen. Meer informatie over het maken van thema-afhankelijke plug-ins in deze zelfstudie:

Cons	Pros
Niet gevonden :)	Vermijd extra plug-in installatie.
	Het themakeuzepaneel voelt meer integraal aan uw thema.

Het configuratieproces van Redux wordt niet beïnvloed door de installatiemethode, dus het is aan u hoe u Redux in uw project wilt opnemen. Dat gezegd hebbende, heb ik nog steeds de voorkeur voor de laatste optie, dus dat is de benadering die ik zal gebruiken om de configuratie te beschrijven.

2. Algemene configuratie

Als je de standaard Redux Framework plugin-map bekijkt, zul je veel bestanden en mappen vinden, maar het enige dat je hier nodig hebt is de ReduxCore-map.

De ReduxCore-map

Kopieer de volledige inhoud van die map naar de invoegtoepassingsmap van uw invoegtoepassing. Maak een map, noem hem bijvoorbeeld wat je maar wilt optionpanel, en plaats de ReduxCore-inhoud erin. Maak vervolgens een leeg bestand in die map en noem het config.php. Vervolgens zullen we nodig hebben reduxframework, wat we zonder conflicten zullen doen, dus als de add-on-plug-in is geïnstalleerd in de WordPress-omgeving, zal de site niet crashen.

Voeg de code toe in het hoofdbestand van uw invoegtoepassing plug-in:

Dat is alles! Uw Redux Framework is nu geïntegreerd, maar u ziet nog geen optiepaneel, omdat we eerst een aantal opties moeten maken. Dit wordt allemaal gedaan in het config.php-bestand dat we hebben gemaakt.

3. Een Optiepaneel maken

Als richtlijn en startpunt kunt u het voorbeeld-config.php-bestand gebruiken dat is meegeleverd met de Redux-plug-in. Dit bevat alle code die nodig is om te beginnen met het maken van uw eigen aangepaste opties. Laten we voorlopig het belangrijkste configuratieproces markeren.

Open uw config.php bestand en voeg aan het begin deze code toe (de opening tag is niet nodig als deze al aanwezig is):

 Deze controle zorgt ervoor dat het Redux Framework actief is, anders werken alle opties die we maken niet en zullen er waarschijnlijk veel PHP-fouten worden gegenereerd.
 Voordat we beginnen met het maken van onze opties, hebben we eerst wat extra configuratie nodig. Maak een variabele die al je opties zal opslaan en kan worden gebruikt binnen je themabestanden:
$ opt_name = "your_variable_name";
 Maak het uniek door voorvoegsels te gebruiken, bijvoorbeeld: yourbrandname_yourthemename.
Voeg daarna de code toe:
$ theme = wp_get_theme ();
Dit is nodig om Redux-argumenten te configureren die informatie over het geïnstalleerde thema gebruiken.
argumenten
 Op dit punt moeten we de volgende argumenten toevoegen:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Name'), 'display_version' => $ theme-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html __ ('Thema-instellingen', yourtextdomain '),' page_title '=> esc_html __ (' ThemeSettings ', yourtextdomain'), 'google_api_key' => ", ' google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> ",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false,' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> ",' last_tab ' => ", 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' =>", 'show_import_export' => waar);
 Er zijn hier veel argumenten, maar maak je geen zorgen, ik zal de belangrijkste markeren.
 menu_type
 Als u wilt dat uw thema-optiepagina verschijnt als een afzonderlijk menu-item op het hoogste niveau, moet u deze waarde instellen op menu, als je je thema-opties wilt laten verschijnen als een submenu (ik geef ze de voorkeur eraan) Verschijning) stel de waarde in op submenu.
 dev_mode
 Je kunt dit tijdens de ontwikkeling inschakelen, maar vergeet niet om het uit te schakelen bij het publiceren van het thema.
 update_notice
 Aangezien Redux deel zal uitmaken van uw project, wilt u niet dat uw gebruikers updateaanwijzingen ontvangen van Redux Framework, dus stel dit in op vals.
 customizer
 Als u uw aangepaste instellingen wilt weergeven als onderdeel van de WordPress-aanpasser, hoeft u alleen maar dit argument in te stellen waar.
 De array arguments bevat veel meer items en als u informatie over elke array wilt, kunt u details vinden in de voorbeeld-config.php. Voor onze behoeften hebben we de argumenten voldoende aangepast. Laten we nu de argumenten instellen.
Redux :: setArgs ($ opt_name, $ args);
 Secties toevoegen
Nu is je themapaneel gereed en kun je secties met opties toevoegen. Beschouw secties als groepen. Als u bijvoorbeeld koptekstopties wilt toevoegen, maakt u een koptekstgedeelte en voegt u er opties aan toe. Als u een sectie wilt maken, heeft u de volgende structuur nodig:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Sectietitel', 'yourtextdomain'), 'id' => esc_html __ ('sectie-unique-id', 'yourtextdomain'), 'icon' => 'pictogramnaam', 'velden' => array ()));
 Hier wil ik de aandacht vestigen op de ID kaart attribuut-zorg ervoor dat het uniek is. U kunt aangepaste pictogrammen gebruiken, maar het standaard pictogrampakket is ongrijpbaar.
 Je sectie is gemaakt, dus nu kun je opties toevoegen aan de velden array. Een lijst met beschikbare optietypen, evenals de codestructuur met toelichtingen en hoogtepunten, vindt u hier. 
Als u de sectie wilt maken onderafdeling van de eerder toegevoegde sectie, voeg gewoon een nieuw argument toe 'subsection' => true. 
De optie zelf is niets meer dan een array met argumenten, bijvoorbeeld:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ ('Checkbox', 'yourtextdomain'), 'subtitle' => esc_html __ ('Geen enkele validatie kan zijn gedaan op dit veldtype ',' yourtextdomain '),' desc '=> esc_html __ (' Dit is het beschrijvingsveld, nogmaals goed voor extra info. ',' yourtextdomain '),' standaard '=>' 1 '// 1 = aan | 0 = uit), 
 Met deze code hebben we een selectievakje toegevoegd aan onze sectie. De belangrijkste dingen hier zijn de id (het moet uniek zijn) en het type (het zou correct moeten zijn en de exacte naamgeving moeten volgen van het veldtype dat Redux biedt). Nogmaals, meer details over velden zijn te vinden in het voorbeeld-config.php bestand.
 Over het algemeen is dit alles dat u moet weten om een optiescherm te maken. Vervolgens zullen we kijken naar hoe deze opties te gebruiken.
 4. Opties gebruiken binnen een thema
 Redux slaat alle opties op in een globale variabele. Herinner de $ opt_name variabele die we in het config.php-bestand hebben gemaakt? Dat is de variabele die al uw opties opslaat, en u kunt ze op de volgende manier benaderen.
 Eerst moet u de globale variabele declareren. En dit is het eerste potentiële probleem: het wordt niet aanbevolen om een globale variabele buiten een functie of actie te declareren. De oplossing is om deze functie aan uw functions.php-bestand toe te voegen:
function yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Vervolgens voert u op elke pagina die u wilt gebruiken de functie eerst als volgt uit:
yourprefix_theme_options_global_variable ();
 Als u de globale variabele binnen een andere functie of actie nodig hebt, kunt u deze zonder deze functie declareren.
via Opties
 Als u opties gebruikt zonder eerst te controleren of de optie bestaat, krijgt u een PHP-melding waarin u iets zegt over ongedefinieerde variabele / index. Waarom is dit belangrijk? Omdat als de gebruiker uw thema activeert, maar de plug-in voor invoegtoepassing die uw optiepaneel bevat, niet wordt geactiveerd, hij of zij een verzameling PHP-waarschuwingsmeldingen op ongedefinieerde variabelen te zien krijgt. Niet ideaal.
Er is een goed patroon om deze situatie te voorkomen - het ziet er als volgt uit:
$ your_option_name = (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']))? $ GLOBALS ['yourglobalvariable'] ['youroption']: "yourdefaultvalue for thisoption";
 Met deze kleine controle zorgt u ervoor dat u geen ongedefinieerde berichten over variabelen / indexen ontvangt. Als u geen standaardwaarden wilt toewijzen of een variabele wilt maken, kunt u in plaats daarvan dit patroon gebruiken: 
If (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // doe het spul ...
Conclusie
Bedankt voor het lezen, ik hoop dat je hiermee Redux gaat gebruiken voor je thema-opties! Als u vragen of suggesties heeft, kunt u hieronder een reactie achterlaten.
handige links
 reduxframework.com
  ReduxFramework op Facebook
  @ReduxFramework op Twitter
 



		
			
	   
	




Web ontwerp