首页 WordPress教程 WordPress文章添加自定义字段面板教程
正文 评论

WordPress文章添加自定义字段面板教程

今天群里一个朋友找我求助,问主题君WordPress文章编辑那里如何添加自定义字段面板,这个其实有点复杂,不过还是可以添加的。

只需要给文章类型添加Meta Box,通俗点理解就是自定义字段表单。

下面以添加产品价格为例进行说明。

自定义Meta Box需要用到add_meta_box函数:

add_meta_box( $id, $title, $callback, $post_type, $context,$priority, $callback_args );

参数说明

  • $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}

提示:添加上面代码后,新建文章时,在右则就可以看到一个产品价格的输入框。

这时候表单还不能用,因为提交文章之后并没有保存这个 MetaBox 的内容,下面是验证保存内容的代码:

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;}
-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,955
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,774
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,697
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,619
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,503
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,357
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。