Piklist入门教程五:创建Settings Pages

创建WordPress 的 Settings Pages ,用Piklist很容易的添加任意的表单控件。首先,我们要先注册一个Settings Pages,然后再添加Settings Sections(表单控件)。Piklist使用WordPress标准的Settings API,扩展了功能和使它更容易使用。你可以查看《Piklist中文手册》中的表单控件,那里介绍了能使用的表单控件和Tab标签选项。

下面实例,我们将创建Settings Pages包含Select,text 和 colorPicker控件:

注册你的Settings Page

在Piklist的hook事件函数里,很多时候我们都是用一个简单的数组定义参数。如果你的Settings Pages在主题里写在functions.php。如果在插件里就写在主php文件里,勾住piklist_admin_pages

add_filter('piklist_admin_pages', 'piklist_setting_pages');
function piklist_setting_pages($pages)
{
    $pages[] = array(
     'page_title'  => 'Web Settings'          // 菜单标题
    ,'menu_title' => 'Web Settings'           // 菜单连接标题
    ,'sub_menu'   => 'options-general.php'    // 显示哪个菜单,如:themes.php不填就是顶级菜单
    ,'capability' => 'manage_options'         // 能看到这个页的权限
    ,'menu_slug'  => 'piklist-setting-fields' // 菜单 slug
    ,'setting'    => 'piklist-setting'        // settings 名称 关联的控件php文件用到
    ,'icon'       => 'options-general'        // 图标
    ,'save'       => true                     // true = 显示保存按钮 / false = 隐藏保存按钮
    ,'default_tab' => 'Basic'                 //设置标签选项页
    );

    return $pages;
}

setting_pages

创建Settings Section
1.我们先在主题或者插件Piklist的parts目录下新建一个settings目录

setting_folder

2.所有相关的settings的php文件都放在该目录下,然后我们新建一个demo-settings.php文件,并写上至少两个注释属性的文件结构参数

<?php
/*
Title: Web Settings Section
Setting: piklist-setting
*/

上面settings的两个注释参数告诉我们的settings名为”Web Settings Section” 并且setting参数对应我们前面定义的Settings Pages,而实际应用中可能会使用其他注释参数,请查阅《Piklist中文手册》中的Settings文件结构。

下面我们创建第一个表单控件 text 控件

piklist('field', array(
    'type' => 'text'
,'field' => 'text'
,'label' => 'Text Box'
,'description' => 'Field Description'
,'value' => 'Default text'
,'attributes' => array(
        'class' => 'text'
    )
));

WordPress Settings API创建一个text box用了一个简单的数组定义。参数type=>text 就是Piklist渲染出的控件,注意,这非常类似创建一个meta-boxes要区别分清楚。

接下来再创建一个Select控件

piklist('field', array(
    'type' => 'select'
    ,'field' => 'select'
    ,'label' => 'Select Box'
    ,'description' => 'Choose from the drop-down.'
    ,'attributes' => array(
      'class' => 'text'
    )
    ,'choices' => array(
      'option1' => 'Option 1'
      ,'option2' => 'Option 2'
      ,'option3' => 'Option 3'
    )
  ));

注意这里和上面创建text控件有两处不同:

  • type=>select
  • choices 是一个数组定义选择项目

最后我们再添加一个colorPicker 控件 type=>colorpicker

piklist('field', array(
    'type' => 'colorpicker'
    ,'field' => 'colorpicker'
    ,'label' => 'Choose a color'
    ,'value' => '#aee029'
    ,'description' => 'Click in the box to select a color.'
    ,'attributes' => array(
      'class' => 'text'
    )
  ));

最终预览效果:
setting_pages2

deom-settings.php全部代码:

<?php
/*
Title: Web Settings Section
Setting: piklist-setting
*/

piklist('field', array(
    'type' => 'text'
,'field' => 'text'
,'label' => 'Text Box'
,'description' => 'Field Description'
,'value' => 'Default text'
,'attributes' => array(
        'class' => 'text'
    )
));

piklist('field', array(
    'type' => 'select'
,'field' => 'select'
,'label' => 'Select Box'
,'description' => 'Choose from the drop-down.'
,'attributes' => array(
        'class' => 'text'
    )
,'choices' => array(
        'option1' => 'Option 1'
    ,'option2' => 'Option 2'
    ,'option3' => 'Option 3'
    )
));

piklist('field', array(
    'type' => 'colorpicker'
,'field' => 'colorpicker'
,'label' => 'Choose a color'
,'value' => '#aee029'
,'description' => 'Click in the box to select a color.'
,'attributes' => array(
        'class' => 'text'
    )
));

在主题上输出这些控件值:(记得先在Settings Pages页上先保存一下数据)
我们只需要在主题需要的地方用WordPress的 get_option函数取值并echo输出就可以了。

<?php
$setting_options = get_option('piklist-setting');

$text_field = $setting_options['text'];
$select_field = $setting_options['select'];
$colorpicker_field = $setting_options['colorpicker'];

echo 'text field: ' . $text_field .'<br />';
echo 'select field: ' . $select_field .'<br />';
echo 'colorpicker field: ' . $colorpicker_field;

刷新你的浏览器:
text field: Default text
select field: option1
colorpicker field: #aee029

文章分类 Piklist, 经验分享 标签: ,
One comment on “Piklist入门教程五:创建Settings Pages
  1. admin说道:

    好详细啊……

发表评论


Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /var/www/wp/code/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048