文篇文章将向大家简单的介绍如何使用这个简单的WordPress自定义栏目metabox框架，实现自己WordPress自定义栏目的强大功能
前言
之前听过一个朋友说过，如果不会使用WordPress自定义栏目应该不算真的会玩WordPress，虽说这话有点绝对，但是自定义栏目在WordPress里面确实是非常重要的部分，今天云落介绍一个简单方便快捷的使用自定义栏目的方法。
自定义栏目
先说说自定义，有的朋友可能对他不是怎么熟悉，这里简单比喻下，如果把一篇文章比作一个人，那个这个人的名字，身高，提供，性别，等等的附属信息就是属于这篇文章的自定义栏目，或者成为元数据，或者metabox，利用metabox可以极大的增强WordPress的功能，metabox功能可以说是付费主题的必备功能，一个功能强大的主题也肯定会用到自定义。
其实一般主题也会用到自定义栏目，但是都是使用WordPress自带的自定义栏目，显得不是太高大上，这里说的是可视化的处理自定义栏目。
关于自定义栏目框架的预览，可以看下这篇文章：
Git主题发布自定义面板功能测试
通过上面这篇文章就可以知道我说的自定义面板的东西，下面云落说下实现方法。
框架代码
云落的Git主题最近更新了，其中自定义面板救房市其中的一个亮点的，主要就是添加了theme-metabox.php下面直接看下代码吧。
<?php
if ( !class_exists('myCustomFields') ) {
class myCustomFields {
/**
* @var string $prefix 自定义栏目前缀，一个完整的自定义栏目是需要前缀+name的，比如我的前缀是git_,name下面有baidu_submit，那么完整的自定义栏目就是git_baidu_submit.
*/
var $prefix = 'git_';
/**
* @var array $postTypes 这是自定义面板的使用范围，这里一般就是在文章以及页面
*/
var $postTypes = array( "page", "post" );
/**
* @var array $customFields 开始组件自定义面板数组
*/
var $customFields = array(
array(
"name" => "baidu_submit",
"title" => "启用百度实时推送",
"description" => "选择之后可以实时推送至百度，不选择的话默认不推送",
"type" => "checkbox",
"scope" => array( "post", "page" ),
"capability" => "manage_options"
),
array(
"name" => "remote_pic",
"title" => "启用远程图片本地化",
"description" => "选择之后文章中的远程图片可以实现本地化，不选择默认不保存",
"type" => "checkbox",
"scope" => array( "post", "page" ),
"capability" => "manage_options"
),
array(
"name" => "weibo_sync",
"title" => "启用新浪微博同步",
"description" => "选择之后文章可以同步到新浪微博，不选择默认不同步【需配置好新浪微博同步】",
"type" => "checkbox",
"scope" => array( "post", "page" ),
"capability" => "manage_options"
),
array(
"name" => "thumb",
"title" => "自定义缩略图",
"description" => "这里可以输入您的自定义缩略图链接",
"type" => "text",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
/*没有这个功能，暂时留着而已
array(
"name" => "singlecode",
"title" => "自定义jq",
"description" => "这里可以输入您的自定义jq代码",
"type" => "wysiwyg",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
*/
array(
"name" => "zhuanzai_name",
"title" => "转载来源名字",
"description" => "这里可以输入文章转载名字，不填写的话，不显示转载标签",
"type" => "text",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
array(
"name" => "zhuanzai_link",
"title" => "转载来源链接",
"description" => "这里可以输入您的转载来源链接",
"type" => "text",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
array(
"name" => "download_name",
"title" => "单页下载文件名字",
"description" => "这里可以输入您的下载文件的名字",
"type" => "text",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
array(
"name" => "download_size",
"title" => "单页下载文件大小",
"description" => "这里可以输入您的下载文件的大小，可以加上单位，比如：233KB或者233MB",
"type" => "text",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
array(
"name" => "download_link",
"title" => "单页下载下载链接",
"description" => "这里可以输入您的下载链接，这里使用的是A标签，如果多个的话就加入多个A标签",
"type" => "textarea",
"scope" => array( "post", "page" ),
"capability" => "edit_posts"
),
array(
"name" => "demo",
"title" => "代码演示",
"description" => "请在这里输入您的演示代码",
"type" => "textarea",
"scope" => array( "post", "page" ),
"capability" => "edit_pages"
)
);
/**
* PHP 5 Constructor
*/
function __construct() {
add_action( 'admin_menu', array( $this, 'createCustomFields' ) );
add_action( 'save_post', array( $this, 'saveCustomFields' ), 1, 2 );
// 下面这句可以关闭WordPress自带的自定义栏目，但是不推荐，需要的话可以开启
//add_action( 'do_meta_boxes', array( $this, 'removeDefaultCustomFields' ), 10, 3 );
}
/**
* 移除WordPress自带的自定义栏目
function removeDefaultCustomFields( $type, $context, $post ) {
foreach ( array( 'normal', 'advanced', 'side' ) as $context ) {
foreach ( $this->postTypes as $postType ) {
remove_meta_box( 'postcustom', $postType, $context );
}
}
}
*/
/**
* 创建一组你自己的自定义栏目
*/
function createCustomFields() {
if ( function_exists( 'add_meta_box' ) ) {
foreach ( $this->postTypes as $postType ) {
add_meta_box( 'my-custom-fields', 'Git 主题文章发布选项', array( $this, 'displayCustomFields' ), $postType, 'normal', 'high' );
}
}
}
/**
* 在文章发布页显示出来面板
*/
function displayCustomFields() {
global $post;
?>
<div class="form-wrap">
<?php
wp_nonce_field( 'my-custom-fields', 'my-custom-fields_wpnonce', false, true );
foreach ( $this->customFields as $customField ) {
// Check scope
$scope = $customField[ 'scope' ];
$output = false;
foreach ( $scope as $scopeItem ) {
switch ( $scopeItem ) {
default: {
if ( $post->post_type == $scopeItem )
$output = true;
break;
}
}
if ( $output ) break;
}
// 检查权限
if ( !current_user_can( $customField['capability'], $post->ID ) )
$output = false;
// 通过则输出
if ( $output ) { ?>
<div class="form-field form-required">
<?php
switch ( $customField[ 'type' ] ) {
case "checkbox": {
// Checkbox 组件
echo '<label for="' . $this->prefix . $customField[ 'name' ] .'" style="display:inline;"><b>' . $customField[ 'title' ] . '</b></label> ';
echo '<input type="checkbox" name="' . $this->prefix . $customField['name'] . '" id="' . $this->prefix . $customField['name'] . '" value="1"';
if ( get_post_meta( $post->ID, $this->prefix . $customField['name'], true ) == "1" )
echo ' checked="checked"';
echo '" style="width: auto;" />';
break;
}
case "textarea":
case "wysiwyg": {
// Text area
echo '<label for="' . $this->prefix . $customField[ 'name' ] .'"><b>' . $customField[ 'title' ] . '</b></label>';
echo '<textarea name="' . $this->prefix . $customField[ 'name' ] . '" id="' . $this->prefix . $customField[ 'name' ] . '" columns="30" rows="3">' . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . '</textarea>';
// WYSIWYG
if ( $customField[ 'type' ] == "wysiwyg" ) { ?>
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery( "<?php echo $this->prefix . $customField[ 'name' ]; ?>" ).addClass( "mceEditor" );
if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
tinyMCE.execCommand( "mceAddControl", false, "<?php echo $this->prefix . $customField[ 'name' ]; ?>" );
}
});
</script>
<?php }
break;
}
default: {
// Plain text field
echo '<label for="' . $this->prefix . $customField[ 'name' ] .'"><b>' . $customField[ 'title' ] . '</b></label>';
echo '<input type="text" name="' . $this->prefix . $customField[ 'name' ] . '" id="' . $this->prefix . $customField[ 'name' ] . '" value="' . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . '" />';
break;
}
}
?>
<?php if ( $customField[ 'description' ] ) echo '<p>' . $customField[ 'description' ] . '</p>'; ?>
</div>
<?php
}
} ?>
</div>
<?php
}
/**
* 保存自定义栏目数据
*/
function saveCustomFields( $post_id, $post ) {
if ( !isset( $_POST[ 'my-custom-fields_wpnonce' ] ) || !wp_verify_nonce( $_POST[ 'my-custom-fields_wpnonce' ], 'my-custom-fields' ) )
return;
if ( !current_user_can( 'edit_post', $post_id ) )
return;
if ( ! in_array( $post->post_type, $this->postTypes ) )
return;
foreach ( $this->customFields as $customField ) {
if ( current_user_can( $customField['capability'], $post_id ) ) {
if ( isset( $_POST[ $this->prefix . $customField['name'] ] ) && trim( $_POST[ $this->prefix . $customField['name'] ] ) ) {
$value = $_POST[ $this->prefix . $customField['name'] ];
// Auto-paragraphs for any WYSIWYG
if ( $customField['type'] == "wysiwyg" ) $value = wpautop( $value );
update_post_meta( $post_id, $this->prefix . $customField[ 'name' ], $value );
} else {
delete_post_meta( $post_id, $this->prefix . $customField[ 'name' ] );
}
}
}
}
} // End Class
} // End if class exists statement
// Instantiate the class
if ( class_exists('myCustomFields') ) {
$myCustomFields_var = new myCustomFields();
}
?>
云落这里就是直接将git主题的自定义栏目文件复制出来的，没有做简化，自己看着明白就好，怎么和自己主题联系起来，其实很简单，直接include就好了
include ('metabox.php');
这就可以了，至于自定义栏目的创建和使用，看下这个就行了。
<?php
$zhuanzai = get_post_meta($post->ID, 'git_zhuanzai_name', true);
if ( $zhuanzai ) echo '<span class="muted"><i class="fa fa-info-circle"></i> 来源：<a target="_blank" href="' . get_post_meta($post->ID, 'git_zhuanzai_link', true) . '">' .get_post_meta($post->ID, 'git_zhuanzai_name', true) . '</a></span>'; ?>
没了。
-- 完 --
你好大佬，能不能提供一份对应的前端调用代码拿来研究一下呢？这个我有一些没看懂，麻烦你了谢谢！