Een beginnersgids voor Titan Framework een beheerdersdashboard maken met Titan

Het WordPress-beheerderspaneel staat behoorlijk open voor aanpassingen en webontwikkelaars hebben er het beste van gemaakt. Deze wijzigingen komen vaker voor in thema's vanwege het uitgebreide niveau van functionaliteit, maar u kunt ook een complete set optiekaders vinden in enkele prominente plug-ins. Laten we eens kijken wat we binnen het admin panel kunnen doen als het gaat om het maken van opties met Titan Framework.

Titan, dat een optiekader is, helpt bij het toevoegen van beheerderspanelen voor uw ontwikkelingsproject door slechts enkele regels code te schrijven. Vandaag zal ik uitleggen hoe je beheerderspanelen kunt maken in Titan Framework. Niet alleen dit, ik zal ook de opgeslagen waarden aan de voorkant ophalen. Dus laten we beginnen!    

Op dit punt neem ik aan dat u het volgende hebt ingesteld:

  • een demo WordPress geïnstalleerd op een lokale computer om te testen
  • Titan Framework-plug-in geïnstalleerd en geactiveerd of ingesloten in uw thema
  • titan-framework-checker.php bestand opgenomen in uw project, of het nu een plug-in of een thema is

Een beheerdersdashboard maken

Allereerst ga ik een eenvoudig admin panel maken, opties toevoegen en hun waarden aan de voorkant krijgen. Hier is de code ervoor.

createAdminPanel (array ('name' => 'Neat Options' // Geef het optiemenu een naam.)); / ** * Maak de opties. * / $ aa_panel-> createOption (array ('id' => 'aa_txt', // De ID die wordt gebruikt om de waarde van deze optie te krijgen. 'type' => 'text', // Type optie we 'naam' => 'Mijn tekstoptie', // Naam van de optie die wordt weergegeven in het admin-paneel. 'desc' => 'Dit is onze optie' // Beschrijving van de optie die wordt weergegeven in het admin-paneel.)); / ** * Knop Opslaan voor opties. * / $ aa_panel-> createOption (array ('type' => 'save')); 

Lijnen 3-9

Dit is de basisopstelling van Titan die ik al in mijn vorige artikelen heb behandeld, dus je moet ze zeker lezen. Hier in de code heb ik mijn functie toegevoegd als een actie aan een haak genaamd  tf_create_options. Dan heb ik een exemplaar geregistreerd via de getInstance () functie die een unieke Titan-instantie initialiseert met uw thema / plugin / pakketnaam. In mijn geval geef ik het een unieke parameter 'netjes'. Een uniek exemplaar aan het begin van onze functie is nodig om een ​​context te creëren waarin de opties worden gemaakt.

Regel 15-17

Deze code voegt een nieuw beheerderspaneel toe in het WordPress-dashboard. De createAdminPanel () functie maakt een nieuw paneel aan in Titan Framework. Dus ik heb een beheerdersvenster gemaakt, d.w.z.. $ aa_panel. Het verschijnt tegen de naam 'Nette opties' in het dashboard.  

De bovenstaande schermafbeelding toont het resultaat van deze code.

Lijnen 23-28

Nu heb ik opties toegevoegd in het admin panel $ aa_panel. Lijn 23 heeft de createOption () functie die wordt gebruikt om opties te maken in het admin-paneel $ aa_panel. Voor nu voeg ik slechts een enkele optie toe die een tekstveld is met de naam 'Mijn tekstoptie'. De createOption () functie is een array en heeft verschillende parameters zoals naam, ID, type, enz.

De meest importparameter is de 'ID kaart' , dat is eigenlijk de naam van onze optie en onze enige manier om ernaar te verwijzen wanneer we het moeten gebruiken. Zorg ervoor dat alle ids die u toevoegt uniek zijn, omdat er geen twee ID's hetzelfde kunnen zijn, wat kan leiden tot een PHP-fatale fout.

Het screenshot hierboven toont de 'Mijn tekstoptie ' veld dat ik heb gemaakt. Dat is gemakkelijk - een paar regels code, dus geen gedoe met HMTL.

Lijnen 34-36

Het is nu binnen dit tekstveld dat ik mijn waarde ga invoeren. Dus ik zal een "Opslaan"knop hier omdat er geen andere manier voor mij is om de opties op te slaan. Daarom zullen deze regels code toevoegen Opslaan en een Reset knop in mijn admin paneel-opties.

Dit is de laatste blik op mijn ontwikkeling tot nu toe, waar je een admin panel kunt vinden Nette opties en Mijn tekstoptie in het.

Opgeslagen waarden ophalen in het paneel met nette opties

Ik heb dit proces besproken om de opgeslagen optiewaarden eerder gedetailleerd te krijgen. Zorg ervoor dat je de serie leest. Daarom schrijf ik direct de regels code die de waarden zullen ophalen. U kunt deze regels toevoegen aan elk bestand van uw webontwikkelingsproject.

Ik raad u aan een nieuwe paginasjabloon te maken en de code erin toe te voegen, zodat u zeker weet of alles werkt zoals het hoort. 

getOption ('aa_txt'); // Druk de waarde van onze tekstoptie af. echo $ aa_txt_val;

Allereerst krijgen we een specifiek exemplaar van Titan. Dan heb ik de GetOption () functie die de opgeslagen waarde van de aa_txt, waar aa_txt is de ID van de optie die ik heb gemaakt in mijn admin-paneel. 

Merk nogmaals op dat u voor elke optie een unieke ID moet geven, omdat dit niet de 'naam' maar de 'ID kaart' die de ene optie van de andere onderscheidt. Uiteindelijk gebruikte ik de echo opdracht om de opgeslagen waarde in de aa_txt keuze.

Ik ging bijvoorbeeld naar binnen AA-Text-Option en redde het resultaat. Laten we uitvinden wat er aan de voorkant verschijnt.

De bovenstaande schermafbeelding geeft het resultaat weer. Je kunt vinden AA-Text-Option wordt weergegeven in het rood gemarkeerde gebied.

Een beheerdersdashboard maken 

Nu, hoe zit het met een meer complexe zaak? In dit gedeelte maak ik een nieuw beheerdersvenster waarin tabbladen en opties voor beheerders aanwezig zijn. Opgewonden? Laten we beginnen!

Eerst en vooral heb ik een admin panel gemaakt. Eerder maakte ik een panel met de naam 'Nette opties', dus ik noem dit nieuwe paneel'Nette opties 2'. Hier is de code:

createAdminPanel (array ('name' => 'Neat Options 2' // Geef het optiemenu een naam.));

Allereerst heb ik een uniek exemplaar van Titan geregistreerd en vervolgens een beheerdersvenster gemaakt $ aa_panel2 via de createAdminPanel () functie. Het verschijnt tegen de naam Nette opties 2 in het WordPress-dashboard.

De bovenstaande schermafbeelding toont het resultaat. Het toont ook het eerste admin-paneel (dat wil zeggen Neat Options) dat ik in het vorige artikel heb gemaakt. 

Wanneer u klikt Nette opties 2, het zal leeg zijn. Nu zijn er twee benaderingen: u maakt er rechtstreeks opties in of u maakt admin-tabbladen voor uitgebreide functionaliteit en maakt vervolgens opties binnen de tabbladen. Het eerste is al besproken. Laten we dus naar het laatste geval kijken.

Admin-tabbladen maken

Tabbladen zijn een van de beste manieren om uw instellingen of opties voor het configuratiescherm te ordenen. Voor WordPress-thema's die veel opties bevatten, vergemakkelijken tabbladen de gebruikerservaring aanzienlijk. Daarom helpt Titan een optiekader bij het maken van instellingen met tabbladen in WordPress. Laten we kijken hoe.

createTab (array ('name' => 'Tab 1' // Geef het tabblad een naam. Gebruik alleen alfanumerieke namen zonder tekens die ruimte verwachten.));

Ik maakte gebruik van de createTab () functie in Titan Framework voor het maken van admin-tabbladen. In de bovengenoemde code heb ik een admin-tab gemaakt met de naam $ aa_tab1. Als u naar regel 1 van deze code kijkt, ziet u dat er een nieuw tabblad wordt gemaakt in de $ aa_panel2 paneel. Dit tabblad heeft de naam 'Tab 1'. Wanneer u een tabblad maakt via createTab (), het is erg belangrijk om erop te wijzen in welk paneel je het maakt. Je kunt Tab 1 in de onderstaande schermafbeelding zien.

Opties maken binnen 'Tab 1'

Laten we nu een optie binnenin maken Tab 1.

createOption (array ('id' => 'aa_txt_in_tab1_panel2', 'type' => 'text', // Type optie dat we creëren. 'name' => 'My Text Option', // Naam van de optie die zal worden weergegeven in het admin-paneel. 'desc' => 'Dit is onze optie' // Beschrijving van de optie die wordt weergegeven in het admin-paneel.)); / ** * Knop Opslaan voor opties. * / $ aa_panel2-> createOption (array ('type' => 'save'));

De createOption () functie voegt een nieuwe optie toe aan de binnenkant $ aa_tab1. Houd er ook rekening mee dat de ID's altijd uniek moeten zijn. De ID wordt gebruikt om de waarde van deze optie te krijgen. In dit geval is de ID van de optie die we hebben gemaakt $ aa_txt_in_tab1_panel2. De laatste paar regels van de code maken een Opslaan knop (we hebben dat eerder gezien).

Het screenshot toont een tekstveld, d.w.z. 'Mijn tekstoptie', die aan de binnenkant is toegevoegd Tab 1. Je kunt ook de Opslaan en de Reset knop. 

Ik ben er zeker van dat de tot nu toe toegelichte dingen vrij duidelijk zijn. Hoe zit het met het maken van een ander tabblad?

In hetzelfde beheerderspaneel maak ik nog een ander tabblad met de naam 'Tab 2 ' op dezelfde manier. Maar deze keer zal ik er een toevoegen tekstgebied optie erin. 

createTab (array ('name' => 'Tab 2' // Geef het tabblad een naam.)); // Maak opties binnen tab2. $ aa_tab2-> createOption (array ('id' => 'aa_txtarea_in_tab2_panel2', // Ids moet altijd uniek zijn. Dit ID wordt gebruikt om de waarde van deze optie te krijgen. 'type' => 'textarea', // Type van de optie die we creëren. 'naam' => 'Mijn tekstgebied', // Naam van de optie die in het admin-paneel wordt weergegeven. 'desc' => 'Dit is onze optie' // Beschrijving van de optie die wordt weergegeven in het admin-venster.)); / ** * Knop Opslaan voor opties. * / $ aa_panel2-> createOption (array ('type' => 'save')); 

In de regels 1-12 van de hierboven geschreven code heb ik een nieuw tabblad gemaakt, d.w.z.. Tab 2, welke is opgeslagen in de variabele  $ aa_tab2 in het admin-paneel $ aa_panel2 hetzelfde gebruiken createTab () functie. Toen heb ik een gemaakt textarea typ optie in Tab 2 met ID aa_txtarea_in_tab2_panel2 (regels 12-17). En tot slot een Opslaan en een Reset knop op het einde.

Hier is het resultaat:

Om samen te vatten, heb ik een nieuw admin-paneel Nette opties 2 gemaakt en vervolgens twee tabbladen daarin toegevoegd, tab 1 en tab 2. Toen plaatste ik het type tekst opties in Tab 1 en een type textarea optie in Tab 2.

Bovenstaande afbeelding toont de resultaten tot nu toe. Laten we nu naar het eigenlijke ding springen, d.w.z. de waarden van de opgeslagen opties ophalen.

De waarden van de opgeslagen opties verkrijgen

De volgende coderegels worden gebruikt om de opgeslagen waarden op te halen uit de twee opties die we hebben gemaakt. De GetOption () functie wordt gebruikt op regels 11 en 14, waarvoor de waarden worden opgehaald $ aa_txt_in_tab1_panel2 en $ aa_txt_in_tab2_panel2 opties in het nieuwe beheerderspaneel. Ik heb de waarden in twee variabelen opgeslagen, d.w.z.. $ aa_txt_in_tab1_panel2_val en $ aa_txt_in_tab2_panel2_val.

Vervolgens heb ik twee alinea's gemaakt (regel 23 en 24), een voor elke tab en vervolgens met behulp van de echo opdracht Ik zal de uitvoer aan de voorkant afdrukken.

Al deze code gaat in a nieuwe aangepaste pagina sjabloon (voor de gedetailleerde procedure om opgeslagen waarden te krijgen, refereer je naar mijn vorige artikelen).

getOption ('aa_txt_in_tab1_panel2'); // Waarde van het tweede tabblad textarea. $ aa_txtarea_in_tab2_panel2_val = $ titan-> getOption ('aa_txtarea_in_tab2_panel2'); / ** * Tweede Admin-paneelopties. * / // Laten we deze waarde gebruiken in HTML?> 

De waarde van het eerste tabblad is:

De waarde van het tweede tabblad textarea is:

Laten we nu veronderstellen dat ik ben binnengekomen AA-Text-Option in het tekstveld van Tab 1 en wat dummy tekst in het tekstgebied van Tab 2.   

Ik heb de laatste instellingen opgeslagen en een voorbeeld van het resultaat weergegeven na het publiceren van een pagina met mijn aangepaste paginasjabloon.

De uitvoer van de opgeslagen waarden kan duidelijk worden waargenomen.

Conclusie

Dat is alles wat er is over het maken van beheerderspanelen met Titan Framework. Ik weet zeker dat je het hele proces vrij eenvoudig vindt, en nu kun je gemakkelijk beheerderspanelen met tabbladen maken. 

Ik wil dat je het uitprobeert, want in de artikelen over opties ga ik ervan uit dat je weet hoe je admin panels moet maken. Een essentiële stap om te begrijpen wat de toekomst biedt.

In het volgende artikel zal ik bespreken hoe je een metabox kunt maken met Titan Framework. Tot dan in het geval van vragen, commentaar hieronder of neem contact op met mij op Twitter.