Titan框架入门指南：使用Titan创建管理面板

cunjie3951

于 2020-06-10 09:04:10 发布

阅读量953

点赞数

文章标签： python java php vue js ViewUI

WordPress管理面板非常开放，可以进行修改，并且Web开发人员已充分利用了它。由于功能的扩展级别，这些修改在主题中更为常见，但是您也可以在一些著名的插件中找到完整的选项框架集。让我们回顾一下在使用Titan Framework创建选项时在管理面板内可以做什么。

Titan是一个选项框架，仅需编写几行代码即可帮助为您的开发项目添加管理面板。今天，我将解释如何在Titan Framework中创建管理面板。不仅如此，我还将在前端检索保存的值。所以，让我们开始吧！

在这一点上，我假设您已经设置了以下内容：

安装在本地计算机上的演示WordPress演示版
Titan Framework插件已安装并已激活或嵌入到主题中
项目中包含的titan-framework-checker.php文件，无论是插件还是主题

创建管理面板

首先，我将创建一个简单的管理面板，向其中添加选项，并在前端获取其值。这是它的代码。

<?php

add_action( 'tf_create_options', 'aa_options_creating_function' );

function aa_options_creating_function() {

    // Initialize Titan with your theme name.
    $titan = TitanFramework::getInstance( 'neat' );

    /**
     * First Admin panel.
     */

    $aa_panel = $titan->createAdminPanel( array(
        'name' => 'Neat Options' // Name the options menu.
    ) );

    /**
     * Create the options.
     */

    $aa_panel->createOption( array(
        'id'   => 'aa_txt', // The ID which will be used to get the value of this option.
        'type' => 'text', // Type of option we are creating.
        'name' => 'My Text 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.
    ) );

    /**
     * Save button for options.
     */

    $aa_panel->createOption( array(
        'type' => 'save'
    ) );

}

第3–9行

这是我以前的文章中已经介绍过的Titan的基本设置，因此您绝对应该阅读它们。在此代码中，我已将我的功能作为操作添加到名为tf_create_options的钩子中。然后，我通过getInstance()函数注册了一个实例，该实例使用您的主题/插件/程序包名称初始化了一个唯一的Titan实例。就我而言，我给它一个唯一的参数'整洁' 。在我们的函数开始处需要一个唯一的实例来创建将要在其中创建选项的上下文。

第15-17行

此代码在WordPress仪表板中添加了一个新的管理面板。 createAdminPanel()函数在Titan框架中创建一个新面板。因此，我创建了一个管理面板，即$aa_panel 。它会在仪表板上以“整洁的选项”名称出现。

上面的屏幕截图显示了此代码的结果。

第23–28行

现在，我在管理面板$aa_panel添加了选项。第23行具有createOption()函数，该函数用于在管理面板$aa_panel创建选项。现在，我只添加一个选项，即名为“我的文本选项”的文本字段。 createOption()函数是一个数组，并包含几个参数，例如名称，ID，类型等。

最重要的参数是' id ' ，它基本上是我们选项的名称，也是我们在需要使用它时引用它的唯一方法。确保添加的所有ID都是唯一的，因为两个ID不能相同，这可能会导致PHP致命错误。

上面的屏幕截图显示了我创建的“ 我的文本选项”字段。这很容易-只需几行代码，因此HMTL不会发生混乱。

第34–36行

现在，我将在此文本字段中输入我的值。因此，我这里需要一个“ 保存 ”按钮，因为没有其他方法可以保存选项。因此，这些代码行将在我的管理面板选项中添加“ 保存”和“ 重置”按钮。

这是到目前为止我开发的最终外观，您可以在其中找到管理面板的“ 整洁选项”和“ 我的文本选项” 。

从整洁的选项面板中获取保存的值

我之前已经详细讨论了获取保存的选项值的过程。确保阅读了该系列。因此，我直接编写了将检索值的代码行。您可以将这些行添加到Web开发项目的任何文件中。

我将建议您创建一个新的页面模板，并在其中添加代码，以便您可以查看是否一切正常。

<?php

// Initialize Titan with your theme name.
$titan = TitanFramework::getInstance( 'neat' );

// Get the value.
$aa_txt_val = $titan->getOption( 'aa_txt' );

// Print the value of our text option.
echo $aa_txt_val;

首先，我们得到了泰坦的一个特定实例。然后，我使用了getOption()函数，该函数将从aa_txt获取保存的值，其中aa_txt是我在管理面板中创建的选项的ID。

再次注意，您需要为每个选项提供唯一的ID，因为不是“名称”而是“ id”将一个选项与另一个选项区分开。最后，我使用echo命令在aa_txt选项中打印保存的值。

例如，我输入了AA-Text-Option并保存了结果。让我们找出前端显示的内容。

上面的屏幕截图显示了结果。您可以在红色突出显示的区域中找到AA-Text-Option 。

创建管理面板

现在，一个更复杂的情况呢？在本部分中，我将创建一个新的管理面板，其中将包含管理选项卡和选项。激动吗开始吧！

首先，我创建了一个管理面板。以前，我创建了一个名为“ Neat Options ”的面板，所以我将这个新面板命名为Neat Options 2 。这是它的代码：

<?php

// Initialize Titan with your theme name.
$titan = TitanFramework::getInstance( 'neat' );

$aa_panel2 = $titan->createAdminPanel( array(
    'name' => 'Neat Options 2' // Name the options menu.
) );

首先，我注册了Titan的唯一实例，然后通过createAdminPanel()函数创建了一个管理面板$aa_panel2 。它将在WordPress仪表板中与名称Neat Options 2相对 。

上面的屏幕截图显示了结果。它还显示了我在上一篇文章中创建的第一个管理面板（即Neat Options）。

当您单击Neat Options 2时 ，它将为空。现在有两种方法：要么直接在其中创建选项，要么创建用于扩展功能的管理选项卡，然后在选项卡内创建选项。前者已经讨论过。因此，让我们看一下后一种情况。

创建管理标签

标签是组织管理面板设置或选项的最佳方法之一。对于包含很多选项的WordPress主题，选项卡极大地简化了用户体验。因此，Titan是一个选项框架，有助于在WordPress中创建选项卡式设置。让我们看看如何。

<?php

$aa_tab1 = $aa_panel2->createTab( array(
    'name' => 'Tab 1' // Name the tab. Don't use anything else but alpha numeric name with no characters expect space.
) );

我利用Titan框架中的createTab()函数来创建管理标签。在上面的代码中，我创建了一个名为$aa_tab1的管理标签。如果看这段代码的第一行，您会看到在$aa_panel2面板中正在创建一个新选项卡。该标签页名为“ 标签页1 ”。通过createTab()创建选项卡时，指出要在哪个面板中创建它非常重要。您可以在下面的屏幕快照中看到选项卡1。

在“标签1”中创建选项

现在让我们在选项卡1中创建一个选项。

<?php

$aa_tab1->createOption( array(
    'id'   => 'aa_txt_in_tab1_panel2',
    'type' => 'text', // Type of option we are creating.
    'name' => 'My Text 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.
) );

/**
 * Save button for options.
 */

$aa_panel2->createOption( array(
    'type' => 'save'
) );

createOption()函数在$aa_tab1内添加一个新选项。再次请记住，这些ID应该始终是唯一的。该ID将用于获取此选项的值。在这种情况下，我们创建的选项的ID为$aa_txt_in_tab1_panel2 。代码的最后几行创建一个“ 保存”按钮（我们之前已经看到过）。

屏幕截图显示了一个文本字段，即“ 我的文本选项 ”，该字段已添加到选项卡1内 。您还可以找到“ 保存”和“ 重置”按钮。

我敢肯定，到目前为止解释的事情已经很清楚了。如何创建另一个标签？

在同一管理面板中，我以相同的方式创建了另一个名为“ Tab 2”的标签。但是这次我将在其中添加一个文本区域选项。

<?php

/**
 * 
 * Create second tab.
 * 
 */
$aa_tab2 = $aa_panel2->createTab( array(
    'name' => 'Tab 2' // Name the tab.
) );

// Create options inside tab2.
$aa_tab2->createOption( array(
    'id'   => 'aa_txtarea_in_tab2_panel2', // Ids should always be unique. This id will be used to get the value of this option.
    'type' => 'textarea', // Type of option we are creating.
    'name' => 'My Text Area', // 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.
) );

/**
 * Save button for options.
 */
$aa_panel2->createOption( array(
    'type' => 'save'
) );

在上面编写的代码的1-12行中，我创建了一个新标签页，即Tab 2，使用相同的createTab()函数将其保存在管理面板$aa_panel2中的变量$aa_tab2 。然后，我在选项卡2中创建了一个ID为aa_txtarea_in_tab2_panel2的textarea类型选项（第12-17行）。最后是最后的“ 保存”和“ 重置”按钮。

结果如下：

综上所述，我创建了一个新的管理面板Neat Options 2，然后在其中添加了两个选项卡，分别称为Tab 1和Tab2。然后在Tab 1中放置了type text选项，在Tab 2中放置了type textarea选项。

上图显示了到目前为止的结果。现在，让我们跳到实际的事情，即获取保存的选项的值。

获取保存的选项的值

以下代码行将用于从我们创建的两个选项中检索保存的值。第11行和第14行使用了getOption()函数，该$aa_txt_in_tab2_panel2在新的管理面板中检索$aa_txt_in_tab1_panel2和$aa_txt_in_tab2_panel2选项的值。我将值保存在两个变量中，即$aa_txt_in_tab1_panel2_val和$aa_txt_in_tab2_panel2_val 。

然后，我创建了两个段落（第23和24行），每个选项卡各一个，然后使用echo命令在前端打印输出。

所有这些代码都放在一个新的自定义页面 模板中 （有关获取保存的值的详细过程，请参阅我以前的文章）。

<?php

/* Template Name: Titan Framework */

get_header();

// Initialize Titan with your theme name.
$titan = TitanFramework::getInstance( 'neat' );

// Value of first tab text box.
$aa_txt_in_tab1_panel2_val = $titan->getOption( 'aa_txt_in_tab1_panel2' );

// Value of second tab textarea.
$aa_txtarea_in_tab2_panel2_val = $titan->getOption( 'aa_txtarea_in_tab2_panel2' );

/**
 * Second Admin panel options.
 */

// Let's use this value in HTML
?>

<p>Value of first tab text box is : <?php echo $aa_txt_in_tab1_panel2_val; ?></p>
<p>Value of second tab textarea is : <?php echo $aa_txtarea_in_tab2_panel2_val; ?></p>

现在，假设我在选项卡1的文本字段中输入了AA-Text-Option ，在选项卡2的文本区域中输入了一些虚拟文本。

发布带有自定义页面模板的页面后，我保存了最终设置并预览了结果。

可以清楚地观察到保存值的输出。

结论

这就是用Titan框架创建管理面板的全部内容。我相信您会发现整个过程非常简单，现在您可以轻松制作带有标签的管理面板。

我希望您尝试一下，因为在有关选项的文章中，我假设您知道如何创建管理面板。您了解下一步的重要步骤。

在下一篇文章中，我将讨论如何使用Titan Framework创建一个meta框。直到有任何疑问，请在下面发表评论或通过Twitter与我联系。

翻译自: https://code.tutsplus.com/articles/a-beginners-guide-to-titan-framework-creating-an-admin-panel-with-titan--cms-24358

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Titan框架入门指南：使用Titan创建管理面板

WordPress管理面板非常开放，可以进行修改，并且Web开发人员已充分利用了它。由于功能的扩展级别，这些修改在主题中更为常见，但是您也可以在一些著名的插件中找到完整的选项框架集。让我们回顾一下在使用Titan Framework创建选项时在管理面板内可以做什么。 Titan是一个选项框架，仅需编写几行代码即可帮助为您的开发项目添加管理面板。今天，我将解释如何在Titan Fram...
复制链接

扫一扫