Share
Aujourd'hui, je vais discuter de la triable option de type dans Titan Framework. Il fournit à l'utilisateur final un certain nombre d'options qui peuvent être réorganisées via une interface glisser-déposer et peuvent être activées ou désactivées. Vous pouvez intégrer cette option aux endroits où vous souhaitez que les utilisateurs réorganisent de manière dynamique les sections d'un thème..
De nos jours, certains thèmes WordPress premium permettent aux utilisateurs finaux de réorganiser / trier différents blocs dans un thème. Développer une interface triable par glisser-déposer peut être une tâche intimidante pour les nouveaux développeurs. Titan Framework offre un moyen simple et sans contrainte de fournir cette option. Avec son triable type option, vous pouvez créer une liste d’options triables qui peuvent être réorganisées comme vous le souhaitez. Il a une disposition verticale comme le montre l'image ci-dessous:
Cette option supporte certains paramètres:
Accentsconagua
triable option de type.vrai, alors les valeurs triables basculées sont masquées. Si faux, le bouton n'est pas affiché. Le réglage par défaut est vrai.visible_button est réglé sur faux et vous fournissez une valeur par défaut ici, visible_button sera automatiquement réglé sur vrai. Tous les paramètres sont chaîne par type, sauf 'options ' lequel est tableau et 'visible_button ' lequel est booléen dans la nature.
Vous pouvez ajouter cette option à l'intérieur de:
Ces conteneurs peuvent être facilement créés avec Titan Framework. Si vous ne savez pas comment, parcourez les articles précédents de cette série..
Ce type d'option est ajouté en suivant ces étapes.
getInstance () une fonction.createOption () une fonction.getOption () une fonction.C'est l'une des grandes options offertes par Titan Framework, alors implémentons-le.
Créons d'abord cette option dans un panneau d'administration.
createOption (array ('id' => 'aa_sortable_opt', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'triable', // Type de l'option que nous créons 'nom' => 'Mon option de tri', // 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 'options' = > array (// Un tableau de paires valeur-étiquette. 'aa_products_blk' => 'Bloc de produits', 'aa_features_blk' => 'Bloc de fonctionnalités', 'aa_stats_blk' => 'Bloc de statistiques', 'aa_comments_blk' => 'Commentaires Bloc '))); J'ai ajouté un triable tapez option dans la ligne # 8 via le createOption () fonction dans un panneau d'administration personnalisé $ aa_panel. Ensuite, j'ai défini une liste de paramètres, c'est-à-dire. nom, id, type, options et desc. La valeur de l'ID est aa_sortable_opt, qui devrait toujours être unique.
Un paramètre unique dans cette options est à la ligne 15. Il prend un tableau de étiquette de valeur les paires qui apparaissent comme des options pouvant être triées. Dans ce code, j'ai défini quatre paires de ce type, chacune d'elles constituant une option unique pouvant être triée..
Par conséquent, les étiquettes aa_products_blk, aa_features_blk, aa_stats_blk et aa_commenst_blk afficher les options correspondantes, c'est-à-dire 'Bloc de produits ',' Bloc de fonctionnalités ',' Bloc de statistiques ' et 'Bloc de commentaires '. Considérez ces options comme des blocs de votre thème, que vous souhaitez que l’utilisateur final puisse réorganiser ou désactiver..
Dans la capture d'écran ci-dessus, il existe un triable option de type dans un panneau d'administration Options soignées. Regardez comment les options triables sont affichées.
À côté de chaque nom d'option, il y a deux icônes. La première icône montre un œil qui contrôle 'visibilité des options'. Si vous cliquez dessus, cette option devient désactivée.
J'ai désactivé la visibilité des deux premières options de la capture d'écran ci-dessus..
La deuxième icône montre les lignes triables, qui aident à glisser et déposer ces options.
Obtenons les valeurs des options sauvegardées.
getOption ('aa_sortable_opt'); / ** * * Impression du contenu du tableau * * / var_dump ($ aa_getsortable_array); ?>Pour obtenir des valeurs enregistrées, commencez par obtenir une instance via le getinstance () fonction dans la ligne # 3. Ensuite, enregistrez l'ID d'option aa_sortable_opt à l'intérieur de getOption () fonction en tant que paramètre. Les valeurs sont enregistrées dans une variable qui est un tableau., $ aa_getsortable_array.
La valeur de retour contient un tableau des valeurs dans l'ordre de la manière dont un utilisateur final a organisé et enregistré les étiquettes dans le panneau d'administration personnalisé..
J'ai vidé le tableau avec le var_dump () commande en ligne n ° 15. Voyons les résultats.
C’est ainsi que j’ai organisé les options dans le panneau d’administration (j’ai réactivé les deux premières options en cliquant sur le bouton œil icône).
Voyons ce qui se passe si je change l'ordre dans le panneau d'administration et le sauvegarde.
Dans l'image ci-dessus, l'ordre du contenu du tableau est modifié en conséquence.
Maintenant, laissez-moi vous montrer une autre façon d’utiliser cette option en mode frontal..
getOption ('aa_sortable_opt'); / ** * * Obtention de la sortie au serveur * * / if ($ aa_getsortable_array) foreach ($ aa_getsortable_array en tant qu’option $) switch ($ option) case 'aa_products_blk': echo "Le code de bloc de produit est utilisé ici. "; break; case 'aa_features_blk': echo" Feature Le code de bloc est utilisé ici. "; break; case 'aa_stats_blk': echo" Stats Le code de bloc est utilisé ici. "; break; case 'aa_comments_blk': echo" Commentaires Le code de blocage est utilisé ici. "; break; // fin du commutateur // fin de foreach // fin si Alors, j’ai enregistré une instance unique de titan à la ligne 3, et à la ligne 6, j’ai utilisé le getOption () fonctionner avec aa_sortable_opt en tant que paramètre permettant de récupérer la valeur de l'option triable définie par l'utilisateur final. N'oubliez pas que nous définissons des paires valeur / étiquette au-dessus des valeurs utilisées dans le code, tandis que les étiquettes sont affichées dans les paramètres du tableau de bord.
Nous allons donc obtenir un tableau de valeurs sélectionnées par l'utilisateur dans l'ordre dans lequel il a trié les options de tri dans le panneau d'administration. Nous devons maintenant imprimer ces blocs dans le même ordre que celui sélectionné par l'utilisateur final. j'ai utilisé boîtier de commutation vérifie pour imprimer les noms de bloc.
J'ai vérifié ici s'il y avait une valeur dans le tableau $ aa_getsortable_array.
Ici j'ai utilisé un pour chaque boucle pour parcourir tous les éléments de la $ aa_getsortable_array tableau et nommé un seul élément de ce tableau comme option $.
J'ai utilisé switch-case pour imprimer les options dans le même ordre que dans le tableau (ordre sélectionné par l'utilisateur). Si vous regardez les lignes 26 à 28, c'est un cas qui vérifie que si la valeur à l'intérieur option $ est aa_products_blk puis faites écho au bloc de produits sélectionné et sortez-en. De même il y a trois autres.
Commençons par le réglage par défaut. Voici une capture d'écran de la sortie qui est apparue au front-end.
Et si je désactive quelques options? Et réorganiser tous? Comme ça:
Donc, le bloc de produit ne doit pas s'afficher car je l'ai désactivé, et les autres blocs doivent s'arranger.
C'est exactement ce qui s'est passé, comme le montre la capture d'écran ci-dessus.
Maintenant, je vais créer cette option dans un onglet administrateur.
createOption (array ('id' => 'aa_sortable_opt_in_tab', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'sortable', // Type d'option que nous créons 'nom' => 'Mon option de tri', // 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 'visible_button' = > 'false', 'options' => array (// Un tableau de paires valeur-étiquette. 'aa_products_blk' => 'Bloc de produits', 'aa_features_blk' => 'Bloc de fonctionnalités', 'aa_stats_blk' => 'Bloc de statistiques ',' aa_comments_blk '=>' Bloc de commentaires '))); Maintenant j'ai ajouté un triable option de type dans un onglet administrateur $ aa_tab1 avec ID aa_sortable_opt_in_tab. Cette fois j'ai défini le paramètre visible_count à la ligne 15 et sa valeur est définie sur faux. Cela signifie l'indicateur de visibilité œil l'icône ne doit pas apparaître.
Dans cette image, vous pouvez trouver un triable type option dans Onglet 1 de panneau Options soignées 2. Notez que l'icône de visibilité n'apparaît pas avec les noms des options..
Utilisez ce code pour obtenir des valeurs enregistrées.
getOption ('aa_sortable_opt_in_tab'); / ** * * Récupération de la sortie au début * * * / if ($ aa_tab_getsortable_array) foreach ($ aa_tab_getsortable_array as $ option) switch ($ option) case 'aa_products_blk': echo "Le code de bloc de produit est utilisé ici. "; break; case 'aa_features_blk': echo" Feature Le code de bloc est utilisé ici. "; break; case 'aa_stats_blk': echo" Stats Le code de bloc est utilisé ici. "; break; case 'aa_comments_blk': echo" Commentaires Le code de blocage est utilisé ici. "; break; // fin du commutateur // fin de foreach // fin si Ce code est assez similaire à ce que j'ai écrit dans le cas d'un panneau d'administration. Alors laissez-moi résumer toutes ses étapes:
getInstance () fonction dans la ligne # 3.getOption () fonctionne et enregistre l'ID d'option comme paramètre dans la ligne 6.boîtier de commutation déclarations aux lignes 19 à 37.Voici une capture d'écran du front-end.
Ensuite, je créerai cette option dans une metabox.
createOption (array ('id' => 'aa_sortable_opt_in_metabox', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'sortable', // Type d'option que nous créons 'nom' => 'Mon option triable', // Nom de l'option à afficher 'desc' => 'Ceci est notre option', // Description de l'option à afficher 'options' => array (// Un tableau de paires valeur-étiquette. 'aa_products_blk' => 'Bloc de produits', 'aa_features_blk' => 'Bloc de fonctionnalités', 'aa_stats_blk' => 'Bloc de statistiques', 'aa_comments_blk' => 'Bloc de commentaires'))); Ici j'ai créé une option dans une metabox $ aa_metbox. Son identifiant unique est aa_sortable_opt_in_metabox. Le reste des paramètres sont les mêmes.
Dans l'image ci-dessus, il existe un triable option de type dans une metabox nommée Mon option triable. Il apparaît sur toutes les pages et les écrans de post-édition.
Maintenant, je vais avoir les valeurs sauvegardées pour une metabox.
getOption ('aa_sortable_opt_in_metabox', get_the_ID ()); / ** * * Obtention de la sortie au serveur * * / if ($ aa_metabox_getsortable_array) foreach ($ aa_metabox_getsortable_array en tant qu'option $) commutateur ($ option) case 'aa_products_blk': echo "Le code de bloc de produit est utilisé ici. "; break; case 'aa_features_blk': echo" Feature Le code de bloc est utilisé ici. "; break; case 'aa_stats_blk': echo" Stats Le code de bloc est utilisé ici. "; break; case 'aa_comments_blk': echo" Commentaires Le code de blocage est utilisé ici. "; break; // fin du commutateur // fin de foreach // fin siCe code est à peu près le même qu'avant. La différence peut être repérée à la ligne 6 où j'ai utilisé le get_the_ID () fonctionne comme un paramètre supplémentaire. Il est utilisé pour obtenir une page ou un identifiant de poste spécifique.
Désactivons quelques-uns des blocs et observons quels changements se produisent au niveau du serveur frontal..
Le frontal imprimera ce qui suit:
En fin de compte, je vais créer cette option dans une section de personnalisation de thème..
createOption (array ('id' => 'aa_sortable_opt_in_sec', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'triable', // Type d'option que nous créons 'nom' => 'Mon option triable', // Nom de l'option à afficher 'desc' => 'Ceci est notre option', // Description de l'option à afficher 'options' => array (// Un tableau de paires valeur-étiquette. 'aa_products_blk' => 'Bloc de produits', 'aa_features_blk' => 'Bloc de fonctionnalités', 'aa_stats_blk' => 'Bloc de statistiques', 'aa_comments_blk' => 'Bloc de commentaires')));J'ai créé un triable type option avec ID aa_sortable_opt_in_sec dans une section de personnalisation de thème $ aa_section1.
La capture d'écran affiche cette option dans une section de personnalisation nommée Ma section.
Utilisez le code suivant.
getOption ('aa_sortable_opt_in_sec'); / ** * * Obtention de la sortie au serveur * * / if ($ aa_sec_getsortable_array) foreach ($ aa_sec_getsortable_array en tant qu'option $) commutateur ($ option) case 'aa_products_blk': echo "Le code de bloc de produit est utilisé ici. "; break; case 'aa_features_blk': echo" Feature Le code de bloc est utilisé ici. "; break; case 'aa_stats_blk': echo" Stats Le code de bloc est utilisé ici. "; break; case 'aa_comments_blk': echo" Commentaires Le code de blocage est utilisé ici. "; break; // fin du commutateur // fin de foreach // fin siCe code est assez similaire à ce que j'ai utilisé précédemment. Seuls les noms d'identifiant et de variable sont différents.
Voici une capture d'écran affichant les modifications en mode de prévisualisation en direct.
C'est tout sur le triable option de type dans Titan Framework. Les possibilités ici sont infinies. Vous pouvez exiger un fichier contenant le code de ce bloc particulier au lieu de renvoyer le nom de ce bloc. Laissez couler votre créativité.
J'ai couvert presque tous les types d'options majeurs maintenant, donc nous nous retrouvons avec quelques-uns des trucs minuscules que je vais couvrir dans mes prochains articles. Si vous avez des questions, n'hésitez pas à commenter ci-dessous ou à nous contacter sur Twitter.
