文篇文章将向大家简单的介绍如何使用这个简单的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>'; ?>
没了。
-- 完 --
你好大佬,能不能提供一份对应的前端调用代码拿来研究一下呢?这个我有一些没看懂,麻烦你了谢谢!