用户友好的自定义字段与WordPress中的Meta Boxes

  • 所需知识:PHP,使用WordPress的经验
  • 要求:WordPress的
  • 项目时间:30分钟

在之前的教程中我谈到过邮政格式,WordPress 3.1中引入的新功能。帖子格式是一段元信息,可以分配给各个帖子,并由主题用于自定义这些帖子的演示文稿。与Tumblr等服务相比,我还讨论了WordPress中Post Formats的当前局限性。使用Tumblr,无论选择哪种Post Format,都会确定您提供的表单字段。在Wordpress中,默认情况下,您只有标题和帖子编辑器字段。

我们当然可以使用添加额外的元数据到帖子自定义字段

自定义字段的问题是它们不是非常用户友好。如果您正在为客户设计,您需要解释它们是什么,需要输入什么,也希望它们不要忘记这样做。

这是Meta Boxes派上用场的地方!

01.什么是Meta Boxes?

一个元盒子是一个自定义部分,可以添加到帖子/页面屏幕。它可用于将自定义字段组合在一起并为其提供上下文。这是一个Meta Box,我和Post Formats一起用于我的博客(Ryanhavoctaylor.com):

您可以在Meta Box中拥有所需数量的表单字段,也可以使用其他输入类型,如复选框和单选按钮。在hud下,它们仍然是Custom Fields,你可以用相同的方式调用主题中的值:

get_post_meta($ post_id,$ key,$ single);

我们只是通过标签,说明和更好的格式化使管理UI更加实用。

02.创建一个Meta Box

当我构建WordPress主题时,我一直使用Meta Boxes和我的帖子,而且我经常使用自定义帖子类型(codex.wordpress.org/Post_Types)注册我还想要应用Meta Box。

我现在要通过的代码将使您能够快速将Meta Box添加到任何和所有主题的帖子类型。

我们首先将以下代码添加到我们的functions.php模板文件中(如果您的主题中不存在此文件,则创建它):

//我们创建一个名为$ Meta_box的数组,并将数组键设置为相关的帖子类型
$ meta_box ['post'] = array(

//这是应用于元框的id
'id'=>'post-format-meta',

//这是元框容器上显示的标题
'title'=>'其他帖子格式元',

//这定义了应该显示编辑屏幕部分的页面部分
'context'=>'正常',

//这会在框应显示的上下文中设置优先级
'priority'=>'high',

//这里我们在元框中定义我们想要的所有字段
'fields'=> Array(
阵列(
'name'=>'链接 - 网址',
'desc'=>'链接的网址',
'id'=>'pf_link_url',
'type'=>'text',
'default'=>''

阵列(
'name'=>'报价 - 来源',
'desc'=>'(可选)引用源的URL',
'id'=>'pf_quote_source',
'type'=>'text',
'default'=>''


);

这只是一个数组声明,我们将传递给一系列函数来创建我的Meta Box。接下来我们将查看这些函数,但是一旦编写完成,您需要做的就是将上面的数组条目添加到您的function.php文件中,以快速将Meta Box添加到您的主题中。

以上条目将添加额外的帖子格式元我在博客上用到帖子屏幕的框。

如果您使用的是自定义帖子类型,则可以通过添加另一个数组条目向其添加元组。以下是名为Books的帖子类型的示例:

$ Meta_box ['books'] =数组(
'id'=>'book-meta-details',
'title'=>'预订Meta Details',
'context'=>'正常',
'priority'=>'high',
'fields'=> Array(
阵列(
'name'=>'摘要',
'desc'=>'(最多45个字)注意:如果图书尚未开售,请将所有其他字段留空。',
'id'=>'book_summary',
'type'=>'textarea',
'default'=>''

阵列(
'name'=>'立即购买网址:',
'desc'=>'',
'id'=>'book_ buy_now_link',
'type'=>'text',
'default'=>''

阵列(
'name'=>'价格:',
'desc'=>'例如£9.95',
'id'=>'book_price',
'type'=>'text',
'default'=>''

阵列(
'name'=>'书正在出售?',
'desc'=>'',
'id'=>'book_on_sale',
'type'=>'复选框',
'default'=>''

阵列(
'name'=>'示例PDF Url',
'desc'=>'(可选)链接到示例PDF。',
'id'=>'book_sample_url',
'type'=>'text',
'default'=>''


);

请注意,我们更改数组键以反映该条目适用的帖子类型。一旦创建了所需的所有数组条目,就需要添加以下代码行来运行实际创建Meta Box的函数。

add_action('admin_menu','plib_add_box');

请注意,此行只需运行一次。

03.保持一切整洁

这是一个可选步骤,但为了保持一切整洁,我创建了一个名为preset-library.php的文件,我将其添加到我的主题中并包含在function.php的顶部,如下所示:

包括( '预设library.php');

我发现分离函数永远不会从调用它们的代码改变而不是让所有东西聚集在一起。

如果您也想这样做,请将以下函数添加到preset-library.php,否则将它们添加到functions.php的顶部。

04.添加Meta Box

第一个功能是一个相对简单的功能。

//为帖子类型添加元框
function plib_add_box(){
全球$ Meta_box;

foreach($ meta_box as $ post_type => $ value){
add_meta_box($ value ['id'],$ value ['title'],'plib_format_box',$ post_type,$ value ['context'],$ value ['priority']);
}
}

我们遍历我们之前定义的$ meta_box数组,并将每个条目传递给WordPress函数add_meta_box(codex.wordpress.org/Function_Reference/add_meta_box)。您将看到此函数的一个参数是对另一个名为plib_format_box的函数的回调。接下来我们将介绍这个。

05.格式化Meta Box

此函数在Meta Box中为每个输入字段应用HTML格式。

//格式化元框
function plib_format_box(){
全球$ Meta_box,$ Post;

//使用nonce进行验证
回声' “;

回声'

“;

foreach($ meta_box [$ post-> post_type] ['fields'] as $ field){
//获取当前发布的元数据
$ meta = get_post_meta($ post-> ID,$ field ['id'],true);

回声'
”。
”。
“;
}

回声'
“;
Switch($ Field ['type']){
案例'文字':
回声' ”。 “
”。 $字段[ '降序'];
打破;
案例'textarea':
回声' ”。 “
”。 $字段[ '降序'];
打破;
案例'选择':
回声' “;
打破;
案例'电台':
foreach($ field ['options'] as $ option){
回声' '。 $选项[ '名'];
}
打破;
案例'复选框':
回声' “;
打破;
}
回声'
''
“;

}

该函数循环通过领域$ Meta_box数组的每个条目的一部分,并打印出提供的值。

06.从Meta Box保存数据

最后,我们需要告诉WordPress这些字段是否存在以及如何使用Post保存它们。

//从元框中保存数据
function plib_save_data($ post_id){
全球$ Meta_box,$ Post;

//验证nonce
if(!wp_verify_nonce($ _ POST ['plib_meta_box_nonce'],basename(__ FILE__))){
Return $ Post_id;
}

//检查自动保存
if(已定义('DOING_AUTOSAVE')&& DOING_AUTOSAVE){
Return $ Post_id;
}

//检查权限
if('page'== $ _POST ['post_type']){
if(!current_user_can('edit_page',$ post_id)){
Return $ Post_id;
}
} elseif(!current_user_can('edit_post',$ post_id)){
Return $ Post_id;
}

foreach($ meta_box [$ post-> post_type] ['fields'] as $ field){
$ old = get_post_meta($ post_id,$ field ['id'],true);
$ new = $ _POST [$ field ['id']];

if($ new && $ new!= $ old){
update_post_meta($ post_id,$ field ['id'],$ new);
} elseif(''== $ new && $ old){
delete_post_meta($ post_id,$ field ['id'],$ old);
}
}
}

add_action('save_post','plib_save_data');

07.结论

就是这样!如果您的主题需要的信息比基本标题和帖子编辑器字段更多,那么Meta Boxes是提高用户自定义字段可用性的好方法,无论它们是否是技术性的。

莱恩泰勒Ryanhavoctaylor.com/是一名自由设计师和前端开发人员。他在Havoc Inspired经营自己的事业(Havocinspired),博客Ryanhavoctaylor.com和@ryanhavoc下的推文(Twitter.com/ryanhavoc)。他痴迷于干净,高效和语义的HTML,CSS和jQuery(他最喜欢的框架)。