Guide du débutant sur le framework Titan Création d'un panneau d'administration avec Titan

Le panneau d'administration WordPress est ouvert aux modifications et les développeurs Web en ont tiré le meilleur parti. Ces modifications sont plus courantes dans les thèmes en raison du niveau de fonctionnalité étendu, mais vous pouvez également trouver un ensemble complet de cadres d'options dans certains plugins bien en vue. Voyons ce que nous pouvons faire dans le panneau d'administration pour créer des options avec Titan Framework..

Titan, étant un cadre d’options, vous permet d’ajouter des panneaux d’administration pour votre projet de développement en écrivant seulement quelques lignes de code. Aujourd'hui, j'expliquerai comment créer des panneaux d'administration dans Titan Framework. Non seulement cela, je vais aussi récupérer les valeurs enregistrées sur le front-end. Alors commençons!    

À ce stade, je suppose que vous avez défini les éléments suivants:

  • un WordPress de démonstration installé sur une machine locale à des fins de test
  • Titan Framework plugin installé et activé ou intégré dans votre thème
  • titan-framework-checker.php fichier inclus dans votre projet, que ce soit un plugin ou un thème

Création d'un panneau d'administration

Tout d’abord, je vais créer un panneau d’administration simple, y ajouter des options et obtenir leurs valeurs au premier plan. Voici le code pour cela.

createAdminPanel (array ('name' => 'Options soignées' // Nommez le menu des options.)); / ** * Crée les options. * / $ aa_panel-> createOption (array ('id' => 'aa_txt', // L'ID qui sera utilisé pour obtenir la valeur de cette option. 'type' => 'text', // Type d'option we sont en train de créer. 'name' => 'Mon option texte', // Nom de l’option qui sera affichée dans le panneau d’administration. 'desc' => 'Ceci est notre option' // Description de l’option qui sera affichée dans le panneau d'administration.)); / ** * Bouton Enregistrer pour les options. * / $ aa_panel-> createOption (array ('type' => 'save')); 

Lignes 3-9

Ceci est la configuration de base de Titan que j'ai déjà couverte dans mes articles précédents, vous devriez donc absolument les lire. Ici, dans le code, j'ai ajouté ma fonction en tant qu'action à un crochet appelé  tf_create_options. Ensuite, j'ai enregistré une instance via le getInstance () fonction qui initialise une instance unique de Titan avec votre nom de thème / plugin / package. Dans mon cas, je lui donne un paramètre unique 'soigné'. Une instance unique au début de notre fonction est nécessaire pour créer un contexte dans lequel les options vont être créées..

Lignes 15-17

Ce code ajoute un nouveau panneau d'administration dans le tableau de bord WordPress. le createAdminPanel () function crée un nouveau panneau dans Titan Framework. J'ai donc créé un panneau d'administration, c'est-à-dire. $ aa_panel. Il apparaîtra contre le nom 'Options soignées' dans le tableau de bord.  

La capture d'écran ci-dessus affiche le résultat de ce code.

Lignes 23-28

Maintenant, j'ai ajouté des options dans le panneau d'administration $ aa_panel. La ligne 23 a le createOption () fonction utilisée pour créer des options dans le panneau d'administration $ aa_panel. Pour l'instant, j'ajoute une seule option qui est un champ de texte nommé "Mon option de texte". le createOption () fonction est un tableau et porte plusieurs paramètres tels que nom, ID, type, etc..

Le paramètre le plus important est le 'identifiant' , c'est en gros le nom de notre option et notre seul moyen de la référencer lorsque nous en avons besoin. Assurez-vous que tous les identifiants que vous ajoutez sont uniques, car aucun identifiant ne peut être identique, ce qui peut entraîner une erreur fatale PHP..

La capture d'écran ci-dessus affiche le 'Mon option de texte ' domaine que j'ai créé. C'est facile, quelques lignes de code, donc ne vous embêtez pas avec HMTL.

Lignes 34-36

Maintenant, c’est dans ce champ de texte que je vais entrer ma valeur. Donc, il me faudra un "sauvegarder"Cliquez ici car il n’ya pas d’autre moyen de sauvegarder les options. Par conséquent, ces lignes de code ajouteront un sauvegarder et un Réinitialiser bouton dans les options de mon panneau d'administration.

C’est le dernier aspect de mon développement jusqu’à présent, où vous pouvez trouver un panneau d’administrateur Options soignées et Mon option de texte en cela.

Obtention de valeurs enregistrées dans le panneau Options ordonnées

J'ai discuté de ce processus pour obtenir les valeurs des options sauvegardées précédemment en détail. Assurez-vous de lire la série. Par conséquent, j'écris directement les lignes de code qui vont récupérer les valeurs. Vous pouvez ajouter ces lignes dans n’importe quel fichier de votre projet de développement Web..

Je vous recommanderai de créer un nouveau modèle de page et d'y ajouter le code afin que vous puissiez voir si tout fonctionne comme prévu.. 

getOption ('aa_txt'); // Affiche la valeur de notre option de texte. echo $ aa_txt_val;

Tout d'abord, nous obtenons une instance spécifique de Titan. Ensuite, j'ai utilisé le getOption () fonction qui va obtenir la valeur enregistrée de la aa_txt, où aa_txt est l'ID de l'option que j'ai créée dans mon panneau d'administration. 

Notez à nouveau que vous devez attribuer un identifiant unique à chaque option car ce n’est pas le cas. 'prénom' mais le 'id' qui distingue une option d'une autre. Finalement, j'ai utilisé le écho commande pour imprimer la valeur sauvegardée dans le aa_txt option.

Par exemple, j'ai entré Option texte AA et sauvé le résultat. Voyons ce qui apparaît sur le front-end.

La capture d'écran ci-dessus affiche le résultat. Tu peux trouver Option texte AA étant affiché dans la zone en surbrillance rouge.

Création d'un panneau d'administration 

Maintenant, qu'en est-il d'un cas plus complexe? Dans cette section, je vais créer un nouveau panneau d'administration dans lequel se trouvent des onglets et des options d'administration. Excité? Commençons!

Tout d'abord, j'ai créé un panneau d'administration. Auparavant, j'avais créé un panneau nommé 'Options soignées', alors je nomme ce nouveau panneau'Options soignées 2'. Voici son code:

createAdminPanel (array ('name' => 'Options soignées 2' // Nommez le menu des options.));

Tout d’abord, j’ai enregistré une instance unique de Titan, puis j’ai créé un panneau d’administration. $ aa_panel2 via le createAdminPanel () une fonction. Il apparaîtra contre le nom Options soignées 2 dans le tableau de bord WordPress.

La capture d'écran ci-dessus affiche le résultat. Il montre également le premier panneau d’administration (c’est-à-dire les options simples) que j’ai créé dans l’article précédent.. 

Quand vous cliquez Options soignées 2, ce sera vide. Maintenant, il existe deux approches: soit vous créez des options directement dans celle-ci, soit vous créez des onglets d’administrateur pour des fonctionnalités étendues, puis vous créez des options dans les onglets. Le premier a déjà été discuté. Alors, regardons le dernier cas.

Création d'onglets d'administrateur

Les onglets sont l’un des meilleurs moyens d’organiser les paramètres ou les options de votre panneau d’administration. Pour les thèmes WordPress contenant de nombreuses options, les onglets facilitent grandement la tâche de l'utilisateur. Par conséquent, Titan étant un cadre d’options permettant de créer des paramètres à onglets dans WordPress. Voyons comment.

createTab (array ('name' => 'Onglet 1' // Nommez l'onglet. N'utilisez rien d'autre qu'un nom alphanumérique sans caractères, attendez de l'espace.));

Je me suis servi du createTab () fonction dans Titan Framework pour créer des onglets d’administrateur. Dans le code mentionné ci-dessus, j'ai créé un onglet administrateur nommé $ aa_tab1. Si vous regardez la ligne 1 de ce code, vous pouvez voir qu'un nouvel onglet est en train d'être créé à l'intérieur du $ aa_panel2 panneau. Cet onglet s'appelle 'Onglet 1'. Lorsque vous créez un onglet via createTab (), il est très important de préciser dans quel panneau vous le créez. Vous pouvez voir l'onglet 1 dans la capture d'écran ci-dessous.

Création d'options dans l'onglet 1

Créons maintenant une option dans Onglet 1.

createOption (array ('id' => 'aa_txt_in_tab1_panel2', 'type' => 'text', // Type d'option que nous créons. 'name' => 'Mon option de texte', // Nom de l'option qui va s'affiche dans le panneau d'administration. 'desc' => 'Ceci est notre option' // Description de l'option qui sera affichée dans le panneau d'administration.)); / ** * Bouton Enregistrer pour les options. * / $ aa_panel2-> createOption (array ('type' => 'save'));

le createOption () fonction ajoute une nouvelle option à l'intérieur $ aa_tab1. Encore une fois, gardez à l’esprit que les identifiants doivent toujours être uniques. L'ID sera utilisé pour obtenir la valeur de cette option. Dans ce cas, l'ID de l'option que nous avons créée est $ aa_txt_in_tab1_panel2. Les dernières lignes du code créent un sauvegarder bouton (nous l'avons vu auparavant).

La capture d'écran affiche un champ de texte, c'est-à-dire 'Mon option de texte', qui est ajouté à l'intérieur Onglet 1. Vous pouvez aussi trouver le sauvegarder et le Réinitialiser bouton. 

Je suis sûr que les choses expliquées jusqu'à présent sont assez claires. Que diriez-vous de créer un autre onglet?

Dans le même panneau d'administration, je crée encore un autre onglet nommé 'Onglet 2 ' de la même manière. Mais cette fois je vais ajouter un zone de texte option en elle. 

createTab (array ('name' => 'Tab 2' // Nommez l'onglet.)); // Crée des options dans tab2. $ aa_tab2-> createOption (array ('id' => 'aa_txtarea_in_tab2_panel2', // les identifiants doivent toujours être uniques. Cet identifiant sera utilisé pour obtenir la valeur de cette option. 'type' => 'textarea', // Type d’option que nous créons. 'name' => 'Ma zone de texte', // Nom de l’option qui sera affichée dans le panneau d’administration. 'desc' => 'Ceci est notre option' // Description de l’option qui sera affiché dans le panneau d'administration.)); / ** * Bouton Enregistrer pour les options. * / $ aa_panel2-> createOption (array ('type' => 'save')); 

Aux lignes 1 à 12 du code écrit ci-dessus, j'ai créé un nouvel onglet, c'est-à-dire. Onglet 2, qui est enregistré dans la variable  $ aa_tab2 à l'intérieur du panneau d'administration $ aa_panel2 en utilisant le même createTab () une fonction. Puis j'ai créé un zone de texte type option dans l'onglet 2 avec ID aa_txtarea_in_tab2_panel2 (lignes 12-17). Et enfin un sauvegarder et un Réinitialiser bouton à la fin.

Voici le résultat:

Pour résumer, j'ai créé un nouveau panneau d'administration Neat Options 2, puis ajouté deux onglets appelés Onglet 1 et Onglet 2. Puis j'ai placé le type texte options dans l'onglet 1 et un type zone de texte option dans l'onglet 2.

L'image ci-dessus affiche les résultats jusqu'à présent. Passons maintenant à la chose réelle, c’est-à-dire obtenir les valeurs des options enregistrées.

Obtenir les valeurs des options sauvegardées

Les lignes de code suivantes seront utilisées pour récupérer les valeurs enregistrées à partir des deux options que nous avons créées. le getOption () Cette fonction est utilisée sur les lignes 11 et 14, qui récupèrent les valeurs de $ aa_txt_in_tab1_panel2 et $ aa_txt_in_tab2_panel2 options dans le nouveau panneau d'administration. J'ai sauvegardé les valeurs dans deux variables, à savoir. $ aa_txt_in_tab1_panel2_val et $ aa_txt_in_tab2_panel2_val.

Ensuite, j'ai créé deux paragraphes (lignes 23 et 24), un pour chaque onglet, puis en utilisant le écho commande, je vais imprimer la sortie sur le front-end.

Tout ce code va dans un nouvelle page personnalisée modèle (pour la procédure détaillée d'obtention de valeurs enregistrées, reportez-vous à mes articles précédents).

getOption ('aa_txt_in_tab1_panel2'); // Valeur du deuxième onglet textarea. $ aa_txtarea_in_tab2_panel2_val = $ titan-> getOption ('aa_txtarea_in_tab2_panel2'); / ** * Options du second panneau d’administrateur. * / // Utilisons cette valeur en HTML?> 

La valeur du premier onglet est la suivante:

La valeur du deuxième onglet textarea est:

Supposons maintenant que je suis entré Option texte AA dans le champ de texte de Onglet 1 et du texte factice dans la zone de texte de Onglet 2.   

J'ai enregistré les paramètres finaux et prévisualisé le résultat après la publication d'une page avec mon modèle de page personnalisé.

La sortie des valeurs enregistrées peut être clairement observée.

Conclusion

C'est tout ce qu'il y a à propos de la création de panneaux d'administration avec Titan Framework. Je suis sûr que vous trouvez le processus complet assez simple et que vous pouvez maintenant créer des panneaux d’administration avec des onglets. 

Je veux que vous essayiez, car dans les articles sur les options, je suppose que vous savez créer des panneaux d'administrateur. Une étape essentielle pour que vous compreniez la suite.

Dans le prochain article, je discuterai de la création d'une boîte à méta avec Titan Framework. Jusque-là, en cas de questions, commentez ci-dessous ou contactez-moi sur Twitter.