Titan Framework入门指南：添加日期类型选项

最新推荐文章于 2024-07-16 19:26:54 发布

cunjie3951

最新推荐文章于 2024-07-16 19:26:54 发布

阅读量153

点赞数

文章标签： python java javascript php js ViewUI

在本文中，我们将探讨Titan框架中的date类型选项：其工作方式以及提供的参数。了解如何在自定义WordPress管理面板，元框或自定义程序部分中创建日期选择器。

Titan Framework中的日期类型选项

在Titan框架中，有一个date类型选项，该选项允许最终用户在其主题中动态输入日期和时间设置。此选项将加载整个日历，并且您可以设置选择的任何日期。这是此选项的布局：

让我们看一下该选项支持的参数列表：

name ：它定义date类型选项的显示名称。
id ：此参数指定一个唯一名称，该名称有助于获取保存的值。
desc ：显示带有选项名称的简短描述。
default ：（可选）设置默认date设置。此参数采用特定的值格式，即Ymd表示日期， H:i表示时间， Ymd H:i表示日期和时间。
date ：（可选）如果为false ，则不显示此选项。默认情况下将其设置为true 。
time ：（可选）如果为true ，那么将出现此选项。默认情况下将其设置为false 。

参数date和time按类型为boolean ，其余为string类型。

日期类型选项的可用容器

date类型选项可以在以下位置创建：

管理面板
管理员标签
元框
主题定制器部分

无论容器类型如何，都通过遵循类似的代码例程来创建此选项：

通过getInstance()函数获取唯一的实例。
通过createOption()函数添加一个选项。
通过getOption()函数获取保存的值。

但是，如果您想了解如何使用Titan Framework创建这些容器，则可以在本系列的前几篇文章中找到详细信息。

在管理面板中创建日期类型选项

声明示例

首先，我将在管理面板中创建此选项类型。

<?php
    /**
     * 
     * Create date type options in an admin panel
     *
     */
    $aa_panel->createOption( array(

        'id'      => 'aa_date', // The ID which will be used to get the value of this option
        'type'    => 'date', // Type of option we are creating
        'name'    => 'My Date 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' => '2015-8-15' //Default value
    ) );

通过createOption()函数（第7行createOption()在管理面板$aa_panel创建date类型选项。我已经定义了参数id，type，name，desc和default 。 ID（即aa_date ）应始终是唯一的。

您可以看到名为My Date Option的选项存在于管理面板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_date_epoch_val = $titan->getOption( 'aa_date' );

// Convert the date's epoch value
echo date( 'r', $aa_date_epoch_val ); // output as RFC 2822 date - returns local time - For more read http://goo.gl/g9tZLi

?>

在第3行中，通过getInstance()函数获取了一个实例，该函数采用唯一的参数，最好是您的主题名称（我使用过neat ）。通过第6行中的getOption()函数检索保存的值，该函数将ID aa_date注册为参数并将其值保存在新变量$aa_date_val 。

代码的最后一部分在前端打印值。在大多数情况下，服务器可以为我们返回一个纪元值，我们需要使用PHP的date()函数进行转换。纪元值的讨论不在本教程的讨论范围内，但是您可以在此处阅读更多内容。

在前端显示结果

现在，我将设置任何演示日期值并保存。例如，我选择2015-08-20 。

让我们在前端看到它的输出。

保存的日期设定和时间正确打印。由于time禁用了time参数，因此不会显示任何时间设置。您如何设定时间？我会介绍一下。

在管理标签内创建日期类型选项

声明示例

现在，我将在管理选项卡中添加此选项，但它将同时显示date和time设置。

<?php

    /**
     *
     * Create date type option in an admin tab
     * 
     */
    $aa_tab1->createOption( array(

        'id'      => 'aa_date_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option
        'type'    => 'date', // Type of option we are creating
        'name'    => 'My Date 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' => '2015-8-15 00:00', //Default value for date & time
        'time'    => true //Time settings enabled.

    ) );

这次，我在管理标签$aa_tab1添加date类型选项。它的ID是aa_date_in_tab1_panel2 。查看参数列表。它显示time设置为true 。这意味着时间选择已启用。请注意default值的格式，该格式同时设置为date和time 。

您可以在标签1中找到“ 我的日期”选项 管理面板的“ 整洁选项” 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.

// 2. Get the value via ID using getOption function
$aa_date_in_tab1_panel2_val = $titan->getOption( 'aa_date_in_tab1_panel2' );
    
echo date( 'r', $aa_date_in_tab1_panel2_val ); // output as RFC 2822 date - returns local time - For more read http://goo.gl/g9tZLi

?>

这段代码确实没有什么新内容。

在前端显示结果

假设我的演示日期和时间值为2015-09-06和08:45。 还有一个“ 立即”按钮，可一键设置当前时间值。

前端如下所示：

在metabox中创建日期类型选项

声明示例

让我们编写其代码。

<?php

    /**
     *
     * Create date type option in a metabox
     * 
     */
    $aa_metbox->createOption( array(

        'id'      => 'aa_mb_date', // IDs should always be unique. The ID which will be used to get the value of this option
        'type'    => 'date', // Type of option we are creating
        'name'    => 'Select Time Settings', // Name of the option which will be displayed
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'default' =>  '00:00', //Default value for time
        'date'    => false, //Date settings disabled.
        'time'    => true //Date settings enabled.

    ) );

createOption()函数在$aa_metbox （第5行createOption()添加date类型选项。但是此代码仅显示time设置，因为date设置为false。这就是为什么我相应地更改了此选项的名称和默认值的原因。

上面的屏幕截图显示了一个名为“ 选择时间设置”的时间选择器。在metabox中。它出现在所有页面和后期编辑屏幕上。

用法示例

让我们获取保存的时间值。

<?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_mb_time_epoch_val = $titan->getOption( 'aa_mb_date', get_the_ID() );

echo date( 'r', $aa_mb_time_epoch_val ); // output as RFC 2822 date - returns local time - For more read http://goo.gl/g9tZLi
 
 ?>

我只是检索时间值，然后使用date()函数将其转换。

在前端显示结果

我的演示时间值是13：03。

输出显示如下：

在主题定制器部分中创建日期类型选项

声明示例

最后，我将在主题定制器部分中添加此选项。

<?php

    /**
     * 
     * Create date type option in a customizer section
     * 
     */
    $aa_section1->createOption( array(

        'id'      => 'aa_sec_date', // IDs should always be unique. The ID which will be used to get the value of this option
        'type'    => 'date', // Type of option we are creating
        'name'    => 'Select Date/Time Settings', // Name of the option which will be displayed
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'default' =>  '2015-08-01', //Default value for date & time
        'date'    => true, //Date settings enabled.
        'time'    => true //Time settings enabled.

    ) );

最后，我在主题定制器部分按照相同的步骤添加了此选项。

屏幕截图清楚地显示了它。

用法示例

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

<?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_sec_date_epoch_val = $titan->getOption( 'aa_sec_date' );

?>


<div>
    Value of date/time is 
    <?php echo date( 'r' , $aa_sec_date_epoch_val ); // output as RFC 2822 date - returns local time - For more read http://goo.gl/g9tZLi ?>
</div>

我将在header.php文件中获取其保存的值。因此，首先获取一个实例，并在getOption()函数中注册唯一ID。接下来创建一个div并通过date()函数（第13行date()输出变量$aa_sec_date_val的输出。

在前端显示结果

这是发生的更改的屏幕截图。

结论

这是您可以在WordPress主题和插件中添加动态日期和时间设置的方法。每当您希望最终用户出于任何原因输入日期和时间时，此选项都会派上用场。

例如，我正在构建这个WordPress主题，我想在其中添加一个事件自定义帖子类型（通过插件）。当时，我可以选择添加任何最常用的事件插件，也可以自己编写一个简洁的小插件。

因此，我没有为客户提供看起来像飞机驾驶舱的事件插件，而是使用了Titan框架。我在两个不同的元框中为事件日期两次使用了date类型选项。

将此选项集成到您的项目中，减轻了编写冗长代码的负担。在下一篇文章中，我们将探讨Titan框架中的radio类型选项。

你有任何问题吗？将它们发布在下面的评论中，或在Twitter上进行推广。

翻译自: https://code.tutsplus.com/articles/a-beginners-guide-to-titan-framework-adding-a-date-type-option--cms-24634

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Titan Framework入门指南：添加日期类型选项

在本文中，我们将探讨Titan框架中的date类型选项：其工作方式以及提供的参数。了解如何在自定义WordPress管理面板，元框或自定义程序部分中创建日期选择器。 Titan Framework中的日期类型选项在Titan框架中，有一个date类型选项，该选项允许最终用户在其主题中动态输入日期和时间设置。此选项将加载整个日历，并且您可以设置选择的任何日期。这是此选项的布局： ...
复制链接

扫一扫