Titan Framework入门指南：创建主题定制器部分

cunjie3951

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

阅读量170

点赞数

文章标签： python java php js linux ViewUI

在WordPress 3.4中添加的主题自定义API，允许开发人员自定义外观，并将控件添加到外观>自定义管理屏幕。 Titan Framework允许您扩展和使用大量字段/设置来基于Live Theme Customizer构建主题。

Titan框架是一个选项框架，仅需编写几行代码即可帮助创建多种类型的选项。让我们看看如何通过Titan框架利用主题定制器选项。

基本设定

安装了WordPress的演示网站
任何已安装和激活的主题
Titan Framework插件已安装并激活
项目中包含的titan-framework-checker.php文件

我将要使用的代码属于我的自定义主题Neat 。 Neat包含一个名为customizer-options-init.php的文件，该文件存在于assets/admin/ titanframework /customizer-options-init.php 。在这里，我实现了Titan框架，以注册本教程的所有设置，面板和部分。

创建主题定制器部分

这是在WP主题中添加定制程序部分的代码。

<?php
/**
 *
 * Creating customizer options via Titan Framework
 *
 * Getting started      : https://www.titanframework.net/get-started/
 * Customizer           : http://www.titanframework.net/theme-customizer-section/
 * Options              : http://www.titanframework.net/docs/
 * Getting Option Values: http://www.titanframework.net/getting-option-values/
 * Live preview         : http://www.titanframework.net/livepreview-parameter/
 */


add_action( 'tf_create_options', 'aa_customizer_options' );

function aa_customizer_options() {

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

    /**
        First section
     */


    $aa_section1 = $titan->createThemeCustomizerSection( array(

        // Name the options menu
        'name' => 'My Section',

        // Name of the panel where all sections will be present
        'panel' => 'My Panel'

    ) );
}

我在此文件的顶部放置了一些指向Titan框架文档的有用链接。我建议您通过这些链接。

接下来（第14行）是add_action()函数，该函数带有tf_create_options钩子和aa_customizer_options函数作为其参数。该挂钩有助于在定制程序部分中创建选项。

aa_customizer_options是用于注册设置，区域或面板的自定义函数。如果您阅读了以前的文章，那么我已经讨论了使用Titan Framework的规则：

每当需要与Titan框架交互时，调用getInstance()函数。

就像上面代码的第19行一样。这意味着调用了与变量$titan相关联的实例并且采用唯一参数，最好是您的主题名称。我正在使用 整洁，这是我主题的名称。

调用实例后，使用createThemeCustomizerSection()函数在定制器中添加一个部分。第26行到第34 $aa_section1 $titan创建一个名为$aa_section1 。所述createThemeCustomizerSection()占用的，如姓名，面板， 递减等参数的阵列

我正在使用其中两个参数（即名称和面板）来创建主题定制器面板，然后在其中创建一个部分。面板是一组区域，而一个区域内部包含设置。

我创建了一个名为“ My Panel ”的面板，并在面板内部创建了一个名为“ My Section”的菜单。

上面的屏幕快照显示了新修改的主题定制器。在这里，您可以找到新面板，即“ 我的面板” 。

在“ 我的面板”中有一个名为“ 我的部分”的部分 。

在上一篇文章中，我介绍了如何使用Titan Framework在主题定制器的自定义面板内创建自定义部分。让我们在创建的部分中创建一些选项/设置，并在前端实现我们的主题。

在主题定制器部分中创建选项

customizer-options-init.php粘贴到上一篇文章中编写的代码下方，位于customizer-options-init.php文件中。该文件通过admin-init.php文件包含在我们主题的functions.php中。

<?php
    
/**
 * Create the options
 *
 */

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

) );

// Body text color
$aa_section1->createOption( array(

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

) );

我正在使用Titan Framework的createOption()函数创建选项。由于我需要在名为$aa_section1的自定义部分中创建此选项，因此我已经通过第8行中的section变量调用了create options函数。

我已经注册了两个设置。两者都是颜色类型选项，其中第一个选项可帮助配置主体背景颜色 （第10行至第13行）。

我为此颜色设置了几个参数， ID和名称是最重要的参数。 ID应该是唯一的，用于获取此选项的值，而名称是定制器中显示的名称。

接下来，我为正文文本颜色（第18至25行）创建了另一个选项。由于它是相同的选项类型，因此与前一个选项类型相似，但参数值不同。让我们看看定制器中会发生什么。

主体背景颜色和主体文本颜色设置将在名为“ 我的部分”的部分中以“ 站点背景颜色”和“ 站点文本颜色”的名称显示。

到目前为止，我已经在主题定制器中添加了选项。现在让我向您展示如何从中检索值。

获得价值

首先，我将检索两个选项的保存值并将它们保存在两个不同的变量中。然后，我将在文件内CSS中使用这两个变量来更改主题中颜色的值。为此，请将以下代码行粘贴到header.php文件的顶部。

<?php
/**
 * The header for our theme.
 *
 */

/**
 * Customizer options
 * 
 * Getting option values at this step
 *
 */

// 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' );

// Body txt color
$aa_sec_body_txt_clr_val = $titan->getOption( 'aa_sec_body_txt_clr' );

?>

使用此代码，我将获得在customizer-options-init.php文件中创建customizer-options-init.php 。需要完成两个步骤：

获取titan框架实例并将其保存到变量。
使用getOption()函数通过ID获取值。

第17行是我注册实例的位置。第20和＃23行是我检索这些选项的值的位置，这是第二步。这两行中的getOption()函数从aa_sec_body_bg_clr和aa_sec_body_txt_clr获取值，它们是“站点背景颜色”和“站点文本颜色”选项的唯一ID。

检索到的颜色值保存在变量$aa_sec_body_bg_clr_val和$aa_sec_body_txt_clr_val 。

让我们在前端使用这两个变量，它们包含用户选择的颜色值：

<?php wp_head(); ?>

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

将此代码粘贴到wp-head()函数下，以便我们的样式包含在主题的原始样式表之后。通过＃7和＃20行查看这些标签中的每个标签echo命令用于打印背景色和文本色的输出。

请注意，CSS属性已标记为!important ，以确保CSS优先级。

显示输出

请按照以下步骤实时预览更改。

转到WordPress仪表板。
然后按照以下路径操作： 外观>定制程序>我的面板>我的部分 。
单击选择颜色 网站背景颜色和网站文本颜色均适用。
将打开一个调色板。
选择您选择的任何颜色。

设置颜色后，您可以在网站上实时预览这些更改。

我选择#000000作为我的网站背景颜色，并选择#bfbfbf 作为网站文字颜色-您可以查看上面的预览屏幕截图。

完成后，单击“ 保存并发布”按钮。

结论

就是这样。现在，您可以使用Titan Framework在Theme Customizer中轻松创建选项。容易吗？如有任何疑问，请随时联系Twitter或在下面发表评论。

到目前为止，您已经知道如何使用Titan Framework创建任何类型的容器。我不能足够强调最后几篇文章的重要性。如果您不知道如何创建这些容器，那么您将很难理解接下来的任何文章。因此，回过头来修改关于如何使用Titan Framework创建不同类型的容器的概念。您应该知道如何创建：

从下一篇文章开始，我将讨论可随Titan框架添加的每种可能的选项类型。敬请期待！

翻译自: https://code.tutsplus.com/articles/a-beginners-guide-to-titan-framework-creating-a-theme-customizer-section--cms-24417

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Titan Framework入门指南：创建主题定制器部分

在WordPress 3.4中添加的主题自定义API，允许开发人员自定义外观，并将控件添加到外观>自定义管理屏幕。 Titan Framework允许您扩展和使用大量字段/设置来基于Live Theme Customizer构建主题。 Titan框架是一个选项框架，仅需编写几行代码即可帮助创建多种类型的选项。让我们看看如何通过Titan框架利用主题定制器选项。基本设定安...
复制链接

扫一扫