Titan Framework入门指南：添加代码类型选项

最新推荐文章于 2023-05-24 14:27:34 发布

cunjie3951

最新推荐文章于 2023-05-24 14:27:34 发布

阅读量251

点赞数

文章标签： python java javascript css linux ViewUI

有时，在构建插件或主题时，开发人员喜欢为最终用户提供添加自定义代码的能力。今天，我将讨论如何在Titan框架中添加code类型选项，它使您可以创建一个可以在其中添加任何自定义代码的编辑器。让我们来看看吧！

Titan Framework中的代码类型选项

在Titan框架中，可以通过其code类型选项创建用于输入代码的文本区域。 textarea支持语法突出显示，因此无论您使用哪种语言编写代码，都将采用其相应的突出显示。此选项具有自动使CSS和JavaScript入队的功能-这有多酷？在仪表板上，它看起来像这样：

让我们看一下该选项的参数：

name ：它指定此选项的显示名称。
id ：它分配一个唯一的名称来检索保存的值。
desc ：添加带有选项名称的单行描述。
default ：（可选）设置选项的默认值。
livepreview ：（可选）每当您在主题定制器部分中添加code类型选项时，您都会看到此参数的实时更改预览。
lang ：（可选）此参数定义用于语法突出显示的语言。默认设置为css 。这是所有支持的语言的列表。
theme ：（可选）您可以使用此参数设置颜色主题。默认值为chrome 。这是所有受支持主题的列表。
height ：（可选）它配置代码编辑器的高度。默认高度为200像素。

所有参数都是按类型string ，除了' height'是int 。

代码类型选项的可用容器

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

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

您可以按照以下步骤在容器内添加此选项：

首先通过getInstance()函数获取一个实例。
接下来，通过createOption()函数添加一个选项。
最后，通过getOption()函数获取保存的选项值。

要修订有关使用Titan Framework创建容器的概念，请阅读本系列的先前文章。

在管理面板中创建代码类型选项

声明示例

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

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

        'id'   => 'aa_code_opt', // The ID which will be used to get the value of this option
        'type' => 'code', // Type of option we are creating
        'name' => 'Enter Custom Code', // 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
        'lang' => 'css' // Language used for syntax highlighting

    ) );

我在第7行中使用createOption()函数创建了该选项，以便在自定义管理面板容器$aa_panel添加code类型选项。我定义了一个参数列表： name，id，type，lang和desc 。 ID的值应始终唯一，即aa_code_opt 。 lang的值是css ，这意味着将采用CSS的语法高亮显示。

在上面的屏幕截图中，有一个管理面板 在整洁的选项中 ，您可以在其中找到一个名为Enter Custom Code的code类型选项。

用法示例

现在，我将获取保存的值。

<div class="aa_content" >

    <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>

code类型选项可用于允许最终用户在主题或插件中添加自定义CSS / JS代码。因此，考虑这个示例，让我向您展示它如何工作。

Titan Framework将根据您选择的lang值自动将您的代码加入lang 参数。如果将其设置为css或javascript ，则将包含用户代码CSS或JS文件放入队列。

作为lang的价值参数是css ，它将使用我的自定义代码将CSS文件放入队列。我什么也不需要做看一下上面的代码-它有一个div，其中包含类aa_content和伪文本。

在前端显示结果

就在这个阶段，我的前端看起来像这样：

我在仪表板内的code选项中输入了.aa_content类的自定义CSS。

前端带有.aa_content类的div的样式如下：

这些变化在上面的屏幕截图中非常明显。

在管理标签内创建代码类型选项

声明示例

接下来，我将在管理标签中创建此选项。

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

        'id'   => 'aa_code_opt_in_tab', // The ID which will be used to get the value of this option
        'type' => 'code', // Type of option we are creating
        'name' => 'Enter Custom Code', // 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
        'lang' => 'css' // Language used for syntax highlighting

    ) );

在这里，我将此选项添加到管理选项卡$aa_tab1 。其ID的值为aa_code_opt_in_tab而lang为css 。

在图像中，“ 整洁选项2 ”面板的选项卡1内有一个code类型选项。

用法示例

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

<div class="aa_content">

    <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>

同样是具有.aa_content类的div标签和一段伪文本。

在前端显示结果

为了在前端显示结果，我添加了自定义CSS代码并将其保存。

现在前端看起来像这样：

在元框内创建代码类型选项

声明示例

现在，我将在一个metabox中创建此选项。

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

        'id'   => 'aa_code_opt_in_metabox', // The ID which will be used to get the value of this option
        'type' => 'code', // Type of option we are creating
        'name' => 'Enter Custom Code', // Name of the option which will be displayed 
        'desc' => 'This is our option', // Description of the option which will be displayed 
        'lang' => 'css' // Language used for syntax highlighting

    ) );

我在ID为aa_code_opt_in_metabox $aa_metbox添加了另一个code类型选项。其余参数相同。

您可以在名为Metabox Options的metabox中找到此选项。它出现在所有页面和后期编辑屏幕上。

用法示例

使用以下代码从metabox获取保存的值。

<div class="aa_content">

    <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>

div标签中具有.aa_content类的相同伪文本。

在前端显示结果

这次我使用了以下代码。

前端看起来像这样：

在主题定制器部分中创建代码类型选项

声明示例

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

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

        'id'   => 'aa_code_opt_in_sec', // The ID which will be used to get the value of this option
        'type' => 'code', // Type of option we are creating
        'name' => 'Enter Custom Code', // Name of the option which will be displayed 
        'desc' => 'This is our option', // Description of the option which will be displayed 
        'lang' => 'css' // Language used for syntax highlighting

    ) );

我在主题定制器部分$aa_section1创建了此选项。它的唯一ID是aa_code_opt_in_sec 。

在此图像中，自定义程序部分My Section中有一个名为Enter Custom Code的code类型选项。

用法示例

这次，我在单个帖子的div标签中添加了.aa_content类。

在前端显示结果

这是实时预览更改的屏幕截图。

结论

就是这样尽管关于是否应提供具有添加自定义CSS功能的自定义代码选项的争论不休，但如果这样做，则有一个重要的优势。

这样，最终用户的修改或自定义代码将保存在选项数据库中，而不是写入主题文件中，因此，当他们更新主题时，更改仍将存在。

如果您有任何疑问，请通过评论告诉我，或在Twitter上与我们联系。

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

cunjie3951

关注

0
点赞
踩
0

收藏

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

有时，在构建插件或主题时，开发人员喜欢为最终用户提供添加自定义代码的能力。今天，我将讨论如何在Titan框架中添加code类型选项，它使您可以创建一个可以在其中添加任何自定义代码的编辑器。让我们来看看吧！ Titan Framework中的代码类型选项在Titan框架中，可以通过其code类型选项创建用于输入代码的文本区域。 textarea支持语法突出显示，因此无论您使用哪种语言编...
复制链接

扫一扫