以前我们在WordPress教程中分享了创建自定义文章类型方法。创建的文章类型仅有标题和正文内容,但是我们在开发WordPress主题时,以及wordpress 自定义字段操作函数,但是对于自定义字段的时候,在后台添加的使用通过那个面板添加十分不方便,比如你要使用自定义字段来实现 SEO 功能,那么你每次都需要重复输入字段名称。特别对于产品文章类型来说,不仅仅标题和正文,还需要单独设置一些其它的参数,如产品价格、产品型号、规格大小等,那么就需要给文章类型添加 Meta Box,通俗点理解就是自定义字段表单,下面以添加产品价格为例进行说明。自定义 Meta Box 需要用到 add_meta_box 函数:
add_meta_box( $id, $title, $callback, $post_type, $context,$priority, $callback_args );
目录
创建回调函数 product_director_meta_box
参数说明:
$id:字段id,唯一
$title:标题名称
$callback:回调函数
$post_type:文章类型
$context:显示位置
$priority:优先级
注册一个 Meta Box 示例
add_action( 'add_meta_boxes', 'product_director' );
function product_director() {
add_meta_box(
'product_director',
'产品价格',
'product_director_meta_box',
'product',
'side',
'low'
);
}
创建回调函数 product_director_meta_box
配置参数里面指定了回调函数 product_director_meta_box,需要在这个函数里面创建表单:
function product_director_meta_box($post) {
// 创建临时隐藏表单,为了安全
wp_nonce_field( 'product_director_meta_box', 'product_director_meta_box_nonce' );
// 获取之前存储的值
$value = get_post_meta( $post->ID, '_product_director', true );
?>
<label for="product_director"></label>
<input type="text" id="product_director" name="product_director" value="<?php echo esc_attr( $value ); ?>" placeholder="输入产品价格">
<?php
}
提示:添加上面代码后,新建文章时,在右则就可以看到一个产品价格的输入框。
这时候表单还不能用,因为提交文章之后并没有保存这个 Meta Box 的内容,下面是验证保存内容的代码:
add_action( 'save_post', 'product_director_save_meta_box' );
function product_director_save_meta_box($post_id){
// 安全检查
// 检查是否发送了一次性隐藏表单内容(判断是否为第三者模拟提交)
if ( ! isset( $_POST['product_director_meta_box_nonce'] ) ) {
return;
}
// 判断隐藏表单的值与之前是否相同
if ( ! wp_verify_nonce( $_POST['product_director_meta_box_nonce'], 'product_director_meta_box' ) ) {
return;
}
// 判断该用户是否有权限
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
// 判断 Meta Box 是否为空
if ( ! isset( $_POST['product_director'] ) ) {
return;
}
$product_director = sanitize_text_field( $_POST['product_director'] );
update_post_meta( $post_id, '_product_director', $product_director );
把上面的代码按顺序添加到主题的 functions.php 文件,至此,Meta Box 注册完成,就可以开始添加参数了:
调用代码
<?php
if(get_post_meta($post->ID,'_product_director',true)){
echo get_post_meta($post->ID,'_product_director',true);
}
?>
扩展应用
把 Meta Box 添加把后台所有产品列表字段中显示,通过manage_$post_type_posts_custom_column 实现,代码如下:
add_action("manage_posts_custom_column", "product_custom_columns");
add_filter("manage_edit-product_columns", "product_edit_columns");
function product_custom_columns($column){
global $post;
switch ($column) {
case "product_director":
echo get_post_meta( $post->ID, '_product_director', true );
break;
}
}
function product_edit_columns($columns){
$columns['product_director'] = '产品价格';
return $columns;
}
在主题 functions.php 文件中接着上面的代码添加,效果如下:
完整代码:
add_action( 'add_meta_boxes', 'product_director' );
function product_director() {
add_meta_box(
'product_director',
'产品价格',
'product_director_meta_box',
'product',
'side',
'low'
);
}
function product_director_meta_box($post) {
// 创建临时隐藏表单,为了安全
wp_nonce_field( 'product_director_meta_box', 'product_director_meta_box_nonce' );
// 获取之前存储的值
$value = get_post_meta( $post->ID, '_product_director', true );
?>
<label for="product_director"></label>
<input type="text" id="product_director" name="product_director" value="<?php echo esc_attr( $value ); ?>" placeholder="输入产品价格">
<?php
}
add_action( 'save_post', 'product_director_save_meta_box' );
function product_director_save_meta_box($post_id){
if ( ! isset( $_POST['product_director_meta_box_nonce'] ) ) {
return;
}
if ( ! wp_verify_nonce( $_POST['product_director_meta_box_nonce'], 'product_director_meta_box' ) ) {
return;
}
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
if ( ! isset( $_POST['product_director'] ) ) {
return;
}
$product_director = sanitize_text_field( $_POST['product_director'] );
update_post_meta( $post_id, '_product_director', $product_director );
}
add_action("manage_posts_custom_column", "product_custom_columns");
add_filter("manage_edit-product_columns", "product_edit_columns");
function product_custom_columns($column){
global $post;
switch ($column) {
case "product_director":
echo get_post_meta( $post->ID, '_product_director', true );
break;
}
}
function product_edit_columns($columns){
$columns['product_director'] = '产品价格';
return $columns;
}
给WordPress网站添加文章自定义字段填写面板
WordPress 网站文章自定义字段可以按照自己需求进行数据的填写。例网页描述 description 和关键词 keywords 这两个 meta 标签。
通常在添加自定义字段和其值的时候,我们都是手动去"自定义字段"模块下拉框中去选择相应的字段,然后再输入其值,最后还要提交等待一小段时间,似乎有点麻烦。那么可不可以给这些常用的自定义字段创建一个单独的面板,直接在里面填内容就可以了呢?就像文章标签,直接添加标签即可,不需要单独提交。答案是可以的,下面是效果图:
下面介绍一下如何制作这种文章自定义字段面板的方法。
1、添加两个自定义字段,名称分别为 description_value 和 keywords_value,你可以给下面数组添加多个元素,实现添加多个自定义字段的目的。
$new_meta_boxes =
array(
"description" => array(
"name" => "description",
"std" => "这里填默认的网页描述",
"title" => "网页描述:"),
"keywords" => array(
"name" => "keywords",
"std" => "这里填默认的网页关键字",
"title" => "关键字:")
);
2、创建自定义域以及输入框:
function new_meta_boxes() {
global $post, $new_meta_boxes;
foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
if($meta_box_value == "")
$meta_box_value = $meta_box['std'];
echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
// 自定义字段标题
echo'<h4>'.$meta_box['title'].'</h4>';
// 自定义字段输入框
echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><br />';
}
}
3、在文章编辑页添加自定义字段模块,这其中这用了 WordPress 的添加模块函数 add_meta_box。
function create_meta_box() {
global $theme_name;
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}
4、保存文章数据,之前所有准备都做好了,最重要的还是保存我们的自定义字段中的信息。
function save_postdata( $post_id ) {
global $post, $new_meta_boxes;
foreach($new_meta_boxes as $meta_box) {
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}
if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
}
else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}
$data = $_POST[$meta_box['name'].'_value'];
if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
}
}
5、将函数连接到指定 action(动作)。这是最后一步,也是最重要的一步,我们要做的是将函数连接到指定 action(动作),以让 WordPress 程序执行我们之前编写的函数:
add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');
好了,经过以上 5 步,就可以开发出自己的 wordpress 自定义字段填写面板了。