Share
L'une des fonctionnalités les plus intéressantes de Titan Framework est qu'il peut générer automatiquement du CSS pour tous les types d'options. Il existe également un compilateur Sass qui non seulement compile mais minimise également le CSS. Deux manières différentes sont définies pour générer du CSS. Générons automatiquement du CSS pour vos options.
Il existe essentiellement deux manières de générer automatiquement des CSS avec TF (Titan Framework):
Accentsconagua
css paramètrecreateCSS une fonctionTout au long de la série, vous avez rencontré le css paramètre de définition des règles CSS dans la plupart des options. Il est indiqué dans la documentation que chaque fois que vous créez une option dans une page d’administrateur et / ou une section de personnalisation de thème, css paramètre génère CSS automatiquement (uniquement si vous utilisez ce paramètre). Énumérons toutes les options qui supportent ce paramètre:
Apprenons comment le css paramètre génère des propriétés CSS via un exemple.
Ici, je vais créer un Couleur type option dans un panneau d'administration. Utilisez le code suivant:
createAdminPanel (array (// Nommez le menu d'options 'name' => 'Options soignées')); / ** * * Créer les options de type de couleur dans un panneau d'administration * * / $ aa_panel-> createOption (array ('id' => 'aa_bg_color', // l'ID qui sera utilisé pour obtenir la valeur de cette option ' type '=>' color ', // Type d'option que nous créons' name '=>' Définir la couleur de fond ', // Nom de l'option qui sera affichée dans le panneau d'administration' desc '=>' Voici notre option ', // Description de l'option qui sera affichée dans le panneau d'administration' css '=>' .aa_bg_class background-color: value; ')); J'ai créé un Couleur tapez option à la ligne 19 qui définit la valeur de la couleur. J'ai défini le css paramètre à la ligne # 25. J'ai défini une classe, puis à l'intérieur, j'ai défini la propriété CSS où je souhaite que la valeur de la couleur soit imprimée. J'ai donc ajouté une classe aa_bg_class, et à l'intérieur j'ai ajouté une propriété CSS couleur de fond: valeur;. Voici le mot clé valeur sera échangé avec le résultat de cette option, c’est-à-dire quelle couleur sera choisie par l’utilisateur..
Titan génère automatiquement un fichier CSS contenant toutes vos règles CSS. Il crée le fichier à l'intérieur de WordPress les téléchargements dossier au format: titan-cadre-. Dans mon cas c'est titan-framework-neat-css.css.
Utilisons cette option pour générer automatiquement du CSS.
J'ai ajouté une balise div avec la classe aa_bg_class et du texte factice sur ma page.
Pellentesque habitant morbi tristique senectus et netus et malesuada est célèbre pour son turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Don Liberty sit amet quam egestas semper. Ultricies Aenean mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibule erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, condimentum éléctrique, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut Felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulgarisation magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, portemanteau, facilisis luctus, metus
Choisissons une couleur de démonstration à partir de l'admin.
Regardez, la couleur de fond a été appliquée automatiquement.
Il existe un autre moyen de générer des CSS avec TF. C'est via le createCSS fonction, qui déclare tous vos styles CSS.
Expliquons comment cela fonctionne avec un exemple.
J'utilise le même Couleur option de type qui a été expliqué précédemment.
createAdminPanel (array (// Nommez le menu d'options 'name' => 'Options soignées')); / ** * * Créer l'option de type de couleur dans $ aa_panel * * / $ aa_panel-> createOption (array ('id' => 'aa_color_opt', // l'ID qui sera utilisé pour obtenir la valeur de cette option 'type '=>' color ', // Type d'option que nous créons' name '=>' Choisir les paramètres de couleur ', // 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)); / ** * * Utilisez la fonction createCSS pour générer CSS * * / $ titan-> createCSS ('h1 color: $ aa_color_opt;'); Ici, j'ai créé un panneau d'administration nommé Options soignées à la ligne 7. Puis j'ai ajouté un Couleur tapez option à la ligne 18. Ensuite, j'ai défini le createCSS fonction à la ligne 33 qui prend la variable $ aa_color_opt. Ceci est fondamentalement l'ID du même Couleur tapez l'option que je viens de définir ci-dessus, et cette variable a la valeur de la couleur sélectionnée par l'utilisateur final dans le panneau d'administration.
Notez à nouveau qu’il s’agit d’une variable Sass (syntaxe impressionnante) qui correspond à l’ID de l’option dont vous souhaitez obtenir la valeur. Donc, ne le mélangez pas avec une variable PHP normale.
J'ai ajouté des guillemets simples pour éviter d'échapper au signe $ de la variable. Dans CSS, je cible les en-têtes h1. Je fais correspondre la valeur de l'option color à la propriété color de CSS à la ligne 34.
A ce stade, si vous prévisualisez le frontal, il affiche l'en-tête 1 dans sa couleur par défaut..
Choisissons une couleur de démonstration et sauvegardons-la. Supposons que je sélectionne # ed3325.
La couleur de l'en-tête passe maintenant à cette nouvelle valeur. Voici la capture d'écran:
Vous pouvez en savoir plus sur la fonction createCSS.
Amusez-vous à générer des CSS avec Titan Framework. Assurez-vous que vous utilisez la dernière version de Titan Framework..
A mon avis, le createCSS Cette fonction fonctionne vraiment bien lorsque vous devez ajouter plusieurs valeurs CSS de manière dynamique, de manière plus contrôlée et modulaire..
Si vous avez des questions, commentez ici ou contactez-moi sur Twitter.
