添加颜色类型和上传类型选项：Titan 框架初学者分步指南

向 wordpress 主题添加动态颜色选项非常常见。 titan framework 允许您创建颜色选项。让我们看看如何使用 titan 框架在管理面板、元框或主题定制器部分中添加颜色选择器。

Titan Framework 中的颜色类型选项

Titan 框架中有一个 color 类型字段，如下所示：

此选项会加载整个调色板，您可以从中选择任何颜色。要在Titan Framework中添加这个选项，需要了解它携带的参数，这些参数是：

• 名称：它控制选项的显示名称。
• id：此参数分配一个唯一的名称，该名称在整个过程中用于检索保存的选项值。
• desc：此参数添加带有选项名称的简短描述。
• default：设置默认的 color 值。
• 实时预览：（可选）它有助于显示主题定制器部分内更改的实时预览。
• css：（可选）当您在管理页面和/或主题定制器部分添加 color 选项时，它会自动生成 CSS。

所有这些参数的共同点是它们的类型，即字符串。

颜色类型选项的可用容器

可以在以下区域添加此选项：

• 管理面板
• 管理选项卡
• 元框
• 主题定制器部分

文本区域选项是如何创建的？

按照以下步骤在这些容器内创建 color 类型选项：

• 通过 getInstance() 函数获取实例。
• 通过 createOption() 函数创建选项。
• 通过 getOption() 函数获取保存的值。

您可以参考我之前的文章来了解这些容器的创建。

在管理面板内创建颜色类型选项

声明示例

首先，我将在管理面板中创建一个 color 类型选项：

<?php
    /**
     * 
     * Create the options
     * 
     */
    $aa_panel->createOption( array(

        'id'      => 'aa_color', // The ID which will be used to get the value of this option
        'type'    => 'color', // Type of option we are creating
        'name'    => 'My Color Option', // 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
        'default' => '#fffff' // Default value of the option which will be displayed in the admin panel

    ) );

我在管理面板 $aa_panel 中创建了一个 color 类型选项。然后，通过 createOption() 函数，我添加了一个 color 类型选项，其 ID 为 aa_color。该函数采用选项类型支持的参数数组。因此，会相应地使用 id、type、name、desc 和默认参数。请注意 id 的值，即aa_color，应该始终是唯一的。

上面的屏幕截图显示了一个名为 My Color Option 的 color 选项在Neat Options管理面板中。

用法示例

让我们获取保存的选项值。

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
// 2. Get the value via ID using getOption function
$aa_color_val = $titan->getOption( 'aa_color' );

/**
 *
 * Print Admin panel options
 * 
 */
 <h3> <?php echo $aa_color_val; ?> </h3>

要检索已保存的选项值，请通过 getInstance() 函数获取唯一实例。然后使用 getOption() 函数，并将 color 类型选项的 ID 注册为参数。将其值保存到新变量 $aa_color_val 中，然后在前端 echo 这个变量。

在前端显示结果

假设我选择了任何颜色，例如#cecece，并保存其值。

现在，根据代码，将打印所选颜色的十六进制值，如下所示。

在本文后面，我还将展示如何将此选项用作样式属性。

我们不会在生产主题中像这样打印它，而是将其用作内联样式，或者使用 Titan Framework 自动生成 CSS 文件，但这将在本系列的后面讨论，并且不在本文的范围。

在管理选项卡内创建颜色类型选项

声明示例

<?php
    
    // Create options for $aa_panel2 inside the $aa_tab1
    $aa_tab1->createOption( array(

        'id'      => 'aa_color_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option
        'type'    => 'color', // Type of option we are creating
        'name'    => 'My Color Option', // 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
        'default' => '#fffff' // Default value of the option which will be displayed in the admin panel

    ) );

这次我在管理选项卡 $aa_tab1 内创建了一个 color 类型选项。该选项的 ID 为 aa_color_in_tab1_panel2，该 ID 应该是唯一的。

您可以在管理的选项卡 1 中找到 color 选项面板Neat Options 2。

用法示例

现在我将获取保存的选项值。

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
// Value of tab.
$aa_color_in_tab1_panel2_val = $titan->getOption( 'aa_color_in_tab1_panel2' );

/**
 *
 * Print Admin tab options
 * 
 */
 <div>
    Value of my color is : <?php echo $aa_color_in_tab1_panel2_val; ?>
 </div>

我将通过 getInstance() 函数获取一个实例，然后使用 getOption() 函数。在此函数（第 5 行）内，我输入 ID aa_color_in_tab1_panel2 作为其参数。最后，我创建了一个div并以文本形式打印了保存的值。

在前端显示结果

这次我选择了 #0bc47d 作为我的颜色值。因此，输出将像这样打印：

在 Metabox 内创建颜色类型选项

声明示例

<?php
    /**
     * 
     * Create the options for metabox
     * 
     */
    $aa_metbox->createOption( array(

        'id'      => 'aa_mb_color', // The ID which will be used to get the value of this option
        'type'    => 'color', // Type of option we are creating
        'name'    => 'My Color Option', // 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
        'default' => '#fffff' // Default value of the option which will be displayed

    ) );

现在，我将通过 createOption() 函数在元框 $aa_metbox 中创建一个 color 类型选项。该选项的 ID 为 aa_mb_color，用于检索保存的选项值。元框出现在所有帖子/页面编辑屏幕上。

您可以在页面编辑结束时显示的元框中找到 color 类型选项屏幕。

用法示例

接下来我将获取选项值。

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
/**
 *
 * Getting Values.
 *
 * Notice the use of get_the_ID(). It is because metabox is created for all
 * the post types we defined. TO get the value of a metabox option for a specific page/post
 * we need to give getOptions() function the ID of our post/page. Which is done like this.
 *
 */
$aa_mb_color_val = $titan->getOption( 'aa_mb_color', get_the_ID() );

/**
 * 
 * Print metabox options
 * 
 */

<div class="aa_content" style= "background: <?php echo $aa_mb_color_val; ?>;"></div>

现在，这段代码与为管理面板和选项卡编写的代码有些不同。但是，getInstance() 和 getOption() 函数的使用是相同的。差异在于第 13 行，其中 getOption() 函数带有两个参数：

• aa_mb_color，颜色类型选项ID

• get_the_ID() 函数，返回当前帖子/页面/帖子类型的 ID

接下来看第 19 行，我在 div 中使用了内联 CSS 样式。这意味着 color 类型选项的值在前端显示为颜色。

在前端显示结果

我选择 #ffff00 作为我的十六进制颜色值并发布了该页面。这是我得到的：

现在您可以在上面的屏幕截图中看到保存的值显示为颜色，并且整个 div 更改其背景颜色.

在主题定制器中创建颜色类型选项

声明示例

<?php

    /**
     * 
     * Create the options for $aa_section1
     * 
     */
    
    // Body bg color
    $aa_section1->createOption( array(

        'id'      => 'aa_sec_body_bg_clr', // The ID which will be used to get the value of this option
        'type'    => 'color', // Type of option we are creating
        'name'    => 'Site Background Color',// Name of the option which will be displayed in the admin panel
        'default' => '#fff' // Default value of our option

    ) );

createOption() 函数在主题定制器部分 $aa_section1 中添加 color 类型选项。该选项的ID是aa_sec_body_bg_clr，用于设置body背景颜色。

屏幕截图显示了一个名为网站背景颜色的 color 选项定制器面板我的部分。

用法示例

最后，我将获得保存的选项值。

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// Body bg color
$aa_sec_body_bg_clr_val = $titan->getOption( 'aa_sec_body_bg_clr' );

/**
 *
 * Print customizer options
 * 
 */

<style>
/* ----------------------------------------------------------------------------
 * CSS values from customizer
 * ------------------------------------------------------------------------- */
    body{
        background: <?php echo $aa_sec_body_bg_clr_val; ?> !important;
    
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    
</style>

一切都几乎相同，除了我通过

PHP学习

技术支持

返回顶部