Il est assez courant de permettre aux utilisateurs finaux d'activer ou de désactiver certaines fonctionnalités d'un plugin premium ou d'un thème. Titan Framework a récemment poussé une nouvelle option à sa base qui fait exactement cela. Voyons comment ajouter un bouton activer / désactiver dans un panneau d'administration, une section metabox ou un personnaliseur de thème avec Titan Framework (TF)..
Il y a un activer
type d’option dans Titan Framework pour créer les boutons bascule activer / désactiver. Dans le tableau de bord, le activer
L'option type apparaît comme ceci:
Voici ses paramètres:
activer
option de type.Activée
.désactivé
.activer
type option dans une section de personnalisation de thème, ce paramètre vous permet de prévisualiser en direct les modifications apportées.Tous les paramètres sont chaîne
par type, sauf défaut qui est booléen
.
Vous pouvez ajouter cette option à l'intérieur de:
Ajouter un activer
tapez option dans ces conteneurs, procédez comme suit:
getInstance ()
une fonction.createOption ()
une fonction.getOption ()
une fonction.Si vous souhaitez apprendre à créer ces conteneurs avec TF, lisez les articles précédents de cette série..
Créons d'abord cette option dans un panneau d'administration.
createOption (array ('id' => 'aa_enable_opt', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'enable', // Le type d'option que nous créons est 'name' => 'Autoriser CSS personnalisé', // Nom de l'option qui sera affichée dans le panneau d'administration 'desc' => 'Activer / Désactiver CSS personnalisé', // Description de l'option qui sera affichée dans le panneau d'administration 'par défaut' => true // Valeur par défaut de l'option));
À la ligne 8, j'ai ajouté un activer
type option via le createOption ()
fonction dans un panneau d'administration $ aa_panel
. Comme cette fonction occupe un tableau, j'ai défini les valeurs des paramètres nom, type, id, desc et défaut. La valeur de l'ID doit être unique, c'est-à-dire. aa_enable_opt
. La valeur de défaut est réglé sur vrai
, ce qui signifie que le statut de l'option est défini sur 'activée' par défaut.
Dans la capture d'écran ci-dessus, il y a un activer
type option nommée Autoriser le CSS personnalisé dans un panneau d'administration Options soignées.
Récupérons les valeurs sauvegardées.
getOption ('aa_enable_opt'); / ** * * Imprimer la valeur enregistrée * * / if (1 == $ aa_enable_opt_val) echo "Les CSS personnalisées dans l'onglet d'administration sont activées."; else echo "CSS personnalisé dans l'onglet administrateur est désactivé."; ?>
Pour obtenir la valeur sauvegardée, commencez par obtenir une instance via le bouton getInstance ()
fonction (ligne n ° 3). Puis à la ligne 6, le getOption ()
fonction récupère la valeur enregistrée en enregistrant l'ID d'option aa_enable_opt
comme paramètre. J'ai sauvegardé le résultat dans une nouvelle variable $ aa_enable_opt_val
. Puis j'ai utilisé un sinon
vérifier lequel imprime la valeur sauvegardée au début.
Maintenant le activer
L'option type peut contenir deux valeurs: soit 1/0 ou vrai faux. La valeur est "1" (état activé) ou "0" (état désactivé). Compte tenu de ce fait, j’ai écrit les lignes 15 à 20 du code, qui vérifie la valeur de la variable $ aa_enable_opt_val
. Si c'est '1' alors ça s'imprime 'Le CSS personnalisé dans le panneau d'administration est activé ' au début. Si la valeur de la variable est '0', alors elle est imprimée 'CSS personnalisé dans le panneau d'administration est désactivé'.
Supposons que j'ai activé l'option et que je l'ai sauvegardée.
Voici une capture d'écran du résultat final qui est apparu au début du processus.
Ensuite, je vais créer cette option dans un onglet administrateur.
createOption (array ('id' => 'aa_enable_opt_in_tab', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'enable', // Le type d'option que nous créons est 'name' => 'Autoriser CSS personnalisé', // Nom de l'option qui sera affichée dans le panneau d'administration 'desc' => 'Activer / Désactiver CSS personnalisé', // Description de l'option qui sera affichée dans le panneau d'administration 'activé' => 'On', // Libellé de l'option activée 'disabled' => 'Off' // Libellé de l'option désactivée));
Ici, j'ai ajouté cette option dans un onglet administrateur $ aa_tab1
. La valeur de l'ID est aa_enable_opt_in_tab
. Cette fois, j’ai aussi défini de nouvelles étiquettes pour le activée et désactivée paramètres.
Dans l'image, il y a un activer
option de type à l'intérieur Onglet 1 de panneau Options soignées 2. Notez également les étiquettes nouvellement définiesSur'pour permettre et'De'pour désactiver.
Maintenant je vais avoir des valeurs sauvegardées.
getOption ('aa_enable_opt_in_tab'); / ** * * Imprimer la valeur enregistrée * * / if (1 == $ aa_enable_opt_in_tab_val) echo "Le CSS personnalisé dans l'onglet d'administration est activé."; else echo "CSS personnalisé dans l'onglet administrateur est désactivé."; ?>
Le code est à peu près similaire à ce que j'ai écrit ci-dessus. Alors, laissez-moi résumer toutes les étapes:
getInstance ()
fonction à la ligne 4.getOption ()
fonction à la ligne 7.sinon
vérifier la déclaration aux lignes 15 à 20.Cette fois, j’ai choisi l’option de De. Le front-end affiche la ligne suivante:
Maintenant je vais créer un activer
option de type dans un metabox.
createOption (array ('id' => 'aa_enable_opt_in_metabox', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'enable', // Le type d'option que nous créons est 'name' => 'Autoriser CSS personnalisé', // Nom de l'option à afficher 'desc' => 'Activer / Désactiver CSS personnalisé', // Description de l'option à afficher 'default' => false // Valeur par défaut de l'option ) );
Ici j'ai ajouté encore un autre activer
option de type dans un metabox $ aa_metbox
. Son identifiant est aa_enable_opt_in_metabox
. La valeur de défaut est réglé sur faux
.
Dans la capture d'écran ci-dessus, vous pouvez trouver cette option dans une metabox. Il apparaît sur toutes les pages et les écrans de post-édition.
Récupérons la valeur sauvegardée pour cette option.
getOption ('aa_enable_opt_in_metabox', get_the_ID ()); / ** * Imprimer la valeur enregistrée * * / if (1 == $ aa_enable_opt_in_metabox_val) echo "Le CSS personnalisé dans une métabox est activé."; else echo "Le CSS personnalisé dans un metabox est désactivé."; ?>
J'ai à nouveau écrit presque le même code. La seule différence peut être repérée à la ligne 6. Il existe un nouveau paramètre à l'intérieur du getOption ()
une fonction. C'est le get_the_ID ()
fonction utilisée pour récupérer une page ou un ID de poste spécifique.
Revenons activer l'option et enregistrez-le. Le front-end apparaît comme ceci:
Enfin, je vais créer cette option dans une section de personnalisation de thème..
createOption (array ('id' => 'aa_enable_opt_in_sec', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'enable', // Type de l'option que nous créons 'name' => 'Autoriser CSS personnalisé', // Nom de l'option à afficher 'desc' => 'Activer / Désactiver CSS personnalisé', // Description de l'option à afficher 'default' => false // Valeur par défaut de l'option ) );
Ici, j'ai créé cette option dans une section de personnalisation de thème $ aa_section1
. Son identifiant unique est aa_enable_opt_in_sec
. Le reste des paramètres sont les mêmes.
Dans l'image ci-dessus, il y a un activer
option de type dans une section de personnalisation de thème nommée Ma section.
Utilisez le code suivant pour obtenir des valeurs enregistrées.
getOption ('aa_enable_opt_in_sec'); / ** * * Imprimer la valeur enregistrée * * / if (1 == $ aa_enable_opt_in_sec_val) echo "Le CSS personnalisé dans une section de personnalisation est activé."; else echo "Le CSS personnalisé dans une section de personnalisation est désactivé."; ?>
Encore une fois, le code est exactement le même. Seuls les noms d'identifiant et de variable sont différents.
Voici la capture d'écran, qui affiche les modifications en mode de prévisualisation en direct.
Du point de vue de l'utilisateur final, le activer
L'option type est très utile, car vous pouvez activer ou désactiver n'importe laquelle des fonctionnalités en un seul clic. Alors, parcourez ce tutoriel et partagez votre point de vue à ce sujet dans la section commentaires..
À ce stade, nous avons couvert tout ce qu'il y a à couvrir sur le framework Titan. N'oubliez pas de consulter la page de la série si vous avez des questions ou des commentaires sur l'un des sujets abordés. Ou n'hésitez pas à me contacter sur Twitter.