Titan Framework入门指南：添加可排序类型选项

最新推荐文章于 2020-06-10 09:54:10 发布

cunjie3951

最新推荐文章于 2020-06-10 09:54:10 发布

阅读量199

点赞数

文章标签： java python php javascript js ViewUI

今天，我将讨论Titan框架中的sortable类型选项。它为最终用户提供了许多选项，这些选项可以通过拖放界面重新排列，并且可以启用或禁用。您可以在希望用户动态重新排列主题部分的地方集成此选项。

Titan Framework中的Sortable Type选项

如今，一些高级WordPress主题允许最终用户重新排列/排序主题中的不同块。对于新开发人员而言，开发拖放式可排序界面可能是一项艰巨的任务。 Titan Framework提供了一种轻松且无膨胀的方式来提供此选项。使用其sortable类型选项，您可以创建可排序选项的列表，这些列表可以按照您想要的任何方式进行重新排列。它具有垂直布局，如下图所示：

此选项支持一些参数：

name ：此参数分配sortable类型选项的名称。
id ：它分配一个唯一名称，该名称将获取已保存的选项值。
desc ：添加简短说明。
options ：（可选）此参数包含一个值-标签对的数组，它们在选项中出现在可排序字段中。
visible_button ：（可选）这是基于检查的参数，如果为true ，则隐藏已切换的可排序值。如果为false ，则不显示该按钮。默认设置为true 。
default ：（可选）作为默认值，它包含一个可见值数组。如果visible_button设置为false并且您在此处提供默认值，则visible_button将自动设置为true 。

所有参数都是string按类型，除“ 选项”其是array和“visible_button”，这是boolean的性质。

可排序类型选项的可用容器

您可以在内部添加此选项：

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

这些容器可以使用Titan Framework轻松创建。如果您不知道该怎么做，请浏览本系列的前几篇文章。

通过执行以下步骤添加此选项类型。

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

这是Titan框架提供的绝佳选择之一，所以让我们实现它。

在管理面板中创建可排序类型选项

声明示例

首先，让我们在管理面板中创建此选项。

<?php
    /**
     * 
     * Create sortable type option in an Admin Panel
     * 
     */
    $aa_panel->createOption( array(

        'id'      =>   'aa_sortable_opt', // The ID which will be used to get the value of this option
        'type'    => 'sortable', // Type of option we are creating
        'name'    => 'My Sortable 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
        'options' => array(             // An array of value-label pairs.

            'aa_products_blk' => 'Products Block',
            'aa_features_blk' => 'Features Block',
            'aa_stats_blk'    => 'Statistics Block',
            'aa_comments_blk' => 'Comments Block'
      
        )

    ) );

我在第8行中通过自定义管理面板$aa_panel的createOption()函数添加了sortable类型选项。接下来，我定义了一个参数列表，即名称，id，类型，选项和desc 。 ID的值是aa_sortable_opt ，应该始终是唯一的。

此options唯一参数在第15行。它包含一组值标签对，它们以可排序的选项的形式出现。在这段代码中，我定义了四个这样的对，每个对都是一个唯一的可排序选项。

因此，标签aa_products_blk ， aa_features_blk ， aa_stats_blk和aa_commenst_blk显示了相应的选项，即“ Products Block”，“ Features Block”，“ Statistics Block”和“ Comment Block” 。将这些选项视为主题的块，您希望最终用户能够重新排列或禁用这些块。

Adding Sortable Type Options to the Dashboard

在上面的屏幕截图中，管理面板Neat Options中存在一个sortable类型选项。查看如何显示可排序选项。

每个选项名称旁边都有两个图标。第一个图标显示控制“ 选项可见性 ”的眼睛。如果单击它，则该特定选项将被禁用。

Viewing the Sortable Options in the Dashboard

我已禁用上述屏幕快照中前两个选项的可见性。

第二个图标显示可排序的行，这有助于拖放这些选项。

用法示例

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

<?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_getsortable_array = $titan->getOption( 'aa_sortable_opt' );
	
    /**
     * 
     * Printing array contents
     * 
	 */
	var_dump( $aa_getsortable_array );
	
?>

要获取保存的值，请首先通过第3行中的getinstance()函数获取一个实例。接下来，在getOption()函数中注册选项ID aa_sortable_opt作为其参数。这些值保存在一个变量中，该变量是一个数组$aa_getsortable_array 。

返回值包含一个值数组，这些值按照最终用户如何在自定义管理面板中排列和保存标签的顺序排列。

我在第15行使用var_dump()命令转储了该数组。让我们看看结果。

Viewing the values for the sortable options

这就是我在管理面板中安排选项的方式（我通过单击眼睛图标再次启用了前两个选项）。

让我们看看如果我在管理面板中更改顺序并保存后会发生什么。

Viewing the results of the sortable options when they've been changed.

在上图中，数组内容的顺序相应更改。

现在，让我向您展示在前端使用此选项的另一种方法。

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

/**
 * 
 * Getting output at front-end
 * 
 */
    
if ( $aa_getsortable_array ) { 
        
    foreach ( $aa_getsortable_array as $option ) {
        
        switch ( $option ) {
            
            case 'aa_products_blk':
                echo "Product Block code is used here. </br>"; 
                break;
            
            case 'aa_features_blk':
                echo "Feature Block code is used here. </br>"; 
                break;
            
            case 'aa_stats_blk':
                echo "Stats Block code is used here. </br>"; 
                break;
            
            case 'aa_comments_blk':
                echo "Comments Block code is used here. </br>"; 
                break;
            
        } // end of switch

    } // end of foreach

} // end if

因此，我在第3行上注册了一个唯一的titan实例，在第6行上，我使用了带有aa_sortable_opt作为参数的getOption()函数来检索最终用户设置的sortable选项的值。记住，我们在上方设置了值-标签对-在代码中使用值，而在仪表板设置内显示标签。

因此，我们将获得用户按其在管理面板中对可排序选项进行排序的顺序选择的值的数组。现在，我们需要按照最终用户选择的顺序打印这些块。我使用了switch-case检查来打印块名称。

第20行：

我在这里检查数组$aa_getsortable_array是否有值。

第22行：

在这里，我使用了foreach循环foreach $aa_getsortable_array数组的所有元素，并将该数组的一个元素命名为$option 。

第34至42行：

我使用开关盒以与阵列中出现的顺序相同的顺序打印选项（这是用户选择的顺序）。如果查看第26至28行，则可能是在检查$option内的值是否为aa_products_blk然后回显所选的Products块，然后中断该块。同样，还有三个。

在前端显示结果

让我们首先使用默认设置。这是显示在前端的输出的屏幕截图。

The output that appears on the front-end

如果我禁用一些选项怎么办？并重新排列所有这些？像这样：

因此，由于我已将其禁用，因此不应显示Product Block，而其他Block应该自行排列。

The result of modifying the sortable elements.

如上面的屏幕快照所示，这就是发生的情况。

在管理标签内创建可排序类型选项

声明示例

现在，我将在管理标签中创建此选项。

<?php
    /**
     * 
     * Create sortable type option in an Admin Tab
     * 
     */
    $aa_tab1->createOption( array(

        'id'             =>   'aa_sortable_opt_in_tab', // The ID which will be used to get the value of this option
        'type'           => 'sortable', // Type of option we are creating
        'name'           => 'My Sortable 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
        'visible_button' => 'false',
        'options'        => array(             // An array of value-label pairs.

            'aa_products_blk' => 'Products Block',
            'aa_features_blk' => 'Features Block',
            'aa_stats_blk'    => 'Statistics Block',
            'aa_comments_blk' => 'Comments Block'
        )

    ) );

现在，我添加了一个sortable在管理标签类型选项$aa_tab1与ID aa_sortable_opt_in_tab 。这次，我在第15行中定义了visible_count参数，并将其值设置为false 。这意味着可见性指示器的眼睛图标不应出现。

Adding a Sortable option to tabbed navigation

在此图像中，您可以在Neat Options 2面板的Tab 1中找到sortable类型选项。请注意，可见性图标不会与选项名称一起出现。

用法示例

使用此代码获取保存的值。

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

/**
 * 
 * Getting the output at front-end
 * 
 */
    
if ( $aa_tab_getsortable_array ) {
        
    foreach ( $aa_tab_getsortable_array as $option ) {
        
        switch ( $option ) {
            
            case 'aa_products_blk':
                echo "Product Block code is used here. </br>"; 
                break;
            
            case 'aa_features_blk':
                echo "Feature Block code is used here. </br>"; 
                break;
            
            case 'aa_stats_blk':
                echo "Stats Block code is used here. </br>"; 
                break;
            
            case 'aa_comments_blk':
                echo "Comments Block code is used here. </br>"; 
                break;
            
        } // end of switch

    } // end of foreach

} //end if

此代码与我在管理面板中编写的代码非常相似。因此，让我总结一下其所有步骤：

通过第3行中的getInstance()函数获取实例。
通过getOption()函数获取保存的值，并在第6行中将选项ID注册为其参数。
通过第19至37行的switch-case语句在前端打印相应的块。

在前端显示结果

这是前端的屏幕截图。

The results of the change as viewed on the front-end

在元框内创建可排序类型选项

声明示例

接下来，我将在一个metabox中创建此选项。

<?php
    /**
     * 
     * Create sortable type option in a Metabox
     * 
     */
    $aa_metbox->createOption( array(

        'id'      =>   'aa_sortable_opt_in_metabox', // The ID which will be used to get the value of this option
        'type'    => 'sortable', // Type of option we are creating
        'name'    => 'My Sortable Option', // Name of the option which will be displayed
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'options' => array(             // An array of value-label pairs.

            'aa_products_blk' => 'Products Block',
            'aa_features_blk' => 'Features Block',
            'aa_stats_blk'    => 'Statistics Block',
            'aa_comments_blk' => 'Comments Block'

        )

    ) );

在这里，我在metabox $aa_metbox创建了一个选项。它的唯一ID是aa_sortable_opt_in_metabox 。其余参数相同。

在上图中，在名为My Sortable Option的metabox中存在一个sortable type选项。它出现在所有页面和后期编辑屏幕上。

用法示例

现在，我将获得保存的元框值。

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


/**
 * 
 * Getting output at front-end
 * 
 */

if ( $aa_metabox_getsortable_array ) {
        
    foreach ( $aa_metabox_getsortable_array as $option ) {
        
        switch ( $option ) {
            
            case 'aa_products_blk':
                echo "Product Block code is used here. </br>"; 
                break;
            
            case 'aa_features_blk':
                echo "Feature Block code is used here. </br>"; 
                break;
            
            case 'aa_stats_blk':
                echo "Stats Block code is used here. </br>"; 
                break;
            
            case 'aa_comments_blk':
                echo "Comments Block code is used here. </br>"; 
                break;
            
        } // end of switch

    } // end of foreach

} // end if

此代码与以前几乎相同。区别可以在第6行中发现，在该行中我已使用get_the_ID()函数作为附加参数。它用于获取特定的页面或帖子ID。

在前端显示结果

让我们禁用一些功能块，观察前端发生了什么变化。

The result of adding blocks in the meta box

前端将打印以下内容：

Displaying updated content on the front-end

在主题定制器部分中创建可排序的类型选项

声明示例

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

<?php
    /**
     * 
     * Create sortable type option in a Theme Customizer Section
     * 
     */
    $aa_section1->createOption( array(

        'id'      =>   'aa_sortable_opt_in_sec', // The ID which will be used to get the value of this option
        'type'    => 'sortable', // Type of option we are creating
        'name'    => 'My Sortable Option', // Name of the option which will be displayed
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'options' => array(             // An array of value-label pairs.

            'aa_products_blk' => 'Products Block',
            'aa_features_blk' => 'Features Block',
            'aa_stats_blk'    => 'Statistics Block',
            'aa_comments_blk' => 'Comments Block'

        )

    ) );

我在主题定制器部分$aa_section1创建了ID为aa_sortable_opt_in_sec的sortable类型选项。

屏幕快照在名为My Section的定制器部分中显示此选项。

用法示例

使用以下代码。

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

/**
 * 
 * Getting output at front-end
 * 
 */
    
if ( $aa_sec_getsortable_array ) {
        
    foreach ( $aa_sec_getsortable_array as $option ) {
        
        switch ( $option ) {
            
            case 'aa_products_blk':
                echo "Product Block code is used here. </br>"; 
                break;
            
            case 'aa_features_blk':
                echo "Feature Block code is used here. </br>"; 
                break;
            
            case 'aa_stats_blk':
                echo "Stats Block code is used here. </br>"; 
                break;
            
            case 'aa_comments_blk':
                echo "Comments Block code is used here. </br>"; 
                break;
            
        } // end of switch

    } // end of foreach

} // end if

此代码与我以前使用的代码非常相似。仅ID和变量名称不同。

在前端显示结果

这是显示实时预览模式中更改的屏幕截图。

Previewing Sortable Type Results in the Customizer

结论

这就是Titan框架中的sortable类型选项。这里的可能性是无限的。您可以要求一个文件，其中包含该特定块的代码，而不是回显该块的名称。让您的创意汁流淌。

现在我已经涵盖了几乎所有主要的选项类型，因此我们剩下一些小东西，这些我将在我的后续文章中介绍。如有任何疑问，请随时在下面评论或在Twitter上进行关注。

翻译自: https://code.tutsplus.com/tutorials/a-beginners-guide-to-titan-framework-adding-a-sortable-type-option--cms-24727

cunjie3951

关注

0
点赞
踩
0

收藏

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

今天，我将讨论Titan框架中的sortable类型选项。它为最终用户提供了许多选项，这些选项可以通过拖放界面重新排列，并且可以启用或禁用。您可以在希望用户动态重新排列主题部分的地方集成此选项。 Titan Framework中的Sortable Type选项如今，一些高级WordPress主题允许最终用户重新排列/排序主题中的不同块。对于新开发人员而言，开发拖放式可排序界面可能是...
复制链接

扫一扫