Titan框架入门指南：自动为您的选项生成CSS

最新推荐文章于 2022-09-08 15:03:44 发布

cunjie3951

最新推荐文章于 2022-09-08 15:03:44 发布

阅读量490

点赞数

文章标签： python java css js javascript ViewUI

Titan Framework的最酷功能之一是，它可以为所有选项类型自动生成CSS。还有一个Sass编译器，它不仅可以编译CSS，而且可以缩小CSS。定义了两种不同的方式来生成CSS。让我们自动为您的选项生成CSS。

用TF生成CSS的方法

基本上有两种方法可以通过TF（Titan框架）自动生成CSS：

通过css参数
通过createCSS函数

1.通过CSS参数生成CSS

在整个系列中，您在大多数选项中都遇到了用于定义CSS规则的css参数。文档中指出，每当您在管理页面和/或主题定制器部分中创建任何选项时， css参数都会自动生成CSS（仅当您使用该参数时）。让我们列出所有支持此参数的选项：

文本
文字区
颜色
上载
数
编辑
复选框
字形
无线电
无线电调色板
广播影像
选择

让我们通过示例了解css参数如何生成CSS属性。

声明示例

在这里，我将在管理面板中创建color类型选项。使用以下代码：

<?php
    /**
     *
     * Create admin panel options page called $aa_panel
     *
     */
    $aa_panel = $titan->createAdminPanel( array(

        // Name the options menu
        'name' => 'Neat Options'

    ) );
    
    /**
     * 
     * Create the color type options in an Admin Panel
     *
     */
    $aa_panel->createOption( array(

        'id'   => 'aa_bg_color', // The ID which will be used to get the value of this option
        'type' => 'color', // Type of option we are creating
        'name' => 'Set Background Color', // Name of the option which will be displayed in the admin panel
        'desc' => 'This is our option', // Description of the option which will be displayed in the admin panel
        'css'  => '.aa_bg_class { background-color: value; }'

    ) );

我在第19行创建了一个color类型选项，用于设置颜色值。我在第25行定义了css参数。我已经定义了一个类，然后在其中定义了要打印颜色值CSS属性。因此，我添加了一个类aa_bg_class ，并在其中添加了CSS属性background-color: value; aa_bg_class 。此处，关键字value将与该选项的输出交换，即用户选择的任何颜色都将交换它。

Titan自动为您生成一个包含所有CSS规则CSS文件。它在WordPress的uploads文件夹中创建文件，格式为： titan-framework-<namespace>-css.css 。就我而言，它是titan-framework-neat-css.css 。

让我们使用此选项自动生成CSS。

用法示例

我在页面上添加了带有aa_bg_class类的div标签和一些虚拟文本。

<div class="aa_bg_class">

    <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, 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 vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> 

</div>

在前端显示结果

让我们从管理员中选择演示颜色。

看，背景颜色已自动应用。

2.通过CreateCSS函数生成CSS

还有另一种用TF生成CSS的方法。这是通过createCSS函数实现的，该函数声明了所有CSS样式。

让我们用一个例子来解释它是如何工作的。

声明示例

我使用的color类型选项与前面说明的相同。

<?php
    /**
     * 
     * Create admin panel options page called $aa_panel
     *
     */
    $aa_panel = $titan->createAdminPanel( array(

        // Name the options menu
        'name' => 'Neat Options'

    ) );

    /**
     * 
     * Create the color type option in $aa_panel
     *
     */
    $aa_panel->createOption( array(

        'id'   => 'aa_color_opt', // The ID which will be used to get the value of this option
        'type' => 'color', // Type of option we are creating
        'name' => 'Choose Color Settings ', // Name of the option which will be displayed in the admin panel
        'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel

    ) );

    /**
     * 
     * Use createCSS function to generate CSS
     * 
     */ 

    $titan->createCSS( ' h1 { color: $aa_color_opt; } ' );

在这里，我在第7行创建了一个名为Neat Options的管理面板。然后我在第18行添加了color类型选项。接下来，我在第33行定义了createCSS函数，该函数占用变量$aa_color_opt 。这基本上是我上面定义的相同color类型选项的ID，并且此变量具有最终用户在管理面板中选择的颜色值。

再次注意，这是一个Sass（语法上很棒的样式表）变量，它对应于您要获取其值的选项的ID。因此，请勿将其与普通的PHP变量混淆。

我添加了单引号，以避免转义变量的$符号。在CSS内，我的目标是h1标题。我在第34行针对CSS的color属性设置了color选项的值。