Piklist入门教程七:创建Meta Boxes和Fields

Piklist可以在你的posts,pages或者自定义posts types添加meta boxes 和 fields。在本教程里我们将在posts里创建一个meta box 包含3个fields:select、text 和 colorpicker。
1.首先，我们在主题或插件的piklist目录parts下新建一个子目录”meta-boxes”。详情查阅《Piklist中文手册》的目录结构
2.记住我们在meta-boxes目录下新建的每一个php文件都是一个meta box
3.新建一个php文件，名为post-metabox.php，然后在代码注释属性里写上2个以上的注释参数，如下：

/*
Title: My Post Meta Box
Post Type: post
*/

效果预览：(创建了一个空字段的Metabox区域)

上面那两个注释属性，告诉我们post时会有一个”My Post Meta Box”标题显示的区域，”Post Type”参数就是指定在post时显示，你可以是page或自定义的Post Type。详情查阅《Piklist中文手册》的metabox文件属性。
4.现在我们开始添加一个fields。这里要注意一下：数组中的”field”名称，要全部小写，可以有数字，但不能有空格或者特殊字符。例如：”post_text”是正确的，”post text”是错误的：
5.添加一个text field

piklist('field', array(
'type' => 'text'
,'scope' => 'post_meta'
,'field' => 'post_text'
,'label' => 'Text box'
,'description' => 'Field Description'
,'value' => 'Default text'
,'attributes' => array(
        'class' => 'text'
    )
,'position' => 'wrap'
));

这个简单的数组参数就创建了一个text box在保存post时会自动保存在Post Meta里，要注意的两个参数：
type=>text 这是Piklist要渲染的控件
scope=>post_meta 这是Piklist将保存数据变post_meta。这意味着你可以混合其他fields保存数据到comment或user data,这便是用Piklist的灵活之处。
6.现在我们继续添加一个select field:

piklist('field', array(
    'type' => 'select'
,'scope' => 'post_meta'
,'field' => 'post_select'
,'label' => 'Select box'
,'description' => 'Choose from the dropdown.'
,'attributes' => array(
        'class' => 'text'
    )
,'choices' => array(
        'option1' => 'Option 1'
    ,'option2' => 'Option 2'
    ,'option3' => 'Option 3'
    )
,'position' => 'wrap'
));

注意：这个数组参数的变化，与上面text两处不同的地方：
type=>select 这里是渲染select控件
choices是一个数组定义选择项
7.最后我们再创建一个colorpicker 注意’type’=>’colorpicker’,渲染这个控件，会加载一些JS和CSS，这些都不是Piklist里的，只是该控件是基于JS

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

效果预览：

post-metabox.php 全部代码：

<?php
/*
Title: My Post Meta Box
Post Type: post
*/

piklist('field', array(
'type' => 'text'
,'scope' => 'post_meta'
,'field' => 'post_text'
,'label' => 'Text box'
,'description' => 'Field Description'
,'value' => 'Default text'
,'attributes' => array(
        'class' => 'text'
    )
,'position' => 'wrap'
));

piklist('field', array(
    'type' => 'select'
,'scope' => 'post_meta'
,'field' => 'post_select'
,'label' => 'Select box'
,'description' => 'Choose from the dropdown.'
,'attributes' => array(
        'class' => 'text'
    )
,'choices' => array(
        'option1' => 'Option 1'
    ,'option2' => 'Option 2'
    ,'option3' => 'Option 3'
    )
,'position' => 'wrap'
));

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

主题显示这些meta box 用WordPress的get_post_meta()

echo get_post_meta($post->ID, 'post_text', true);
echo get_post_meta($post->ID, 'post_select', true);
echo get_post_meta($post->ID, 'post_colorpicker', true);