• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

WordPress自定义栏目MetaBox简单框架推荐

WordPress 云落 2年前 (2016-03-11) 326次浏览 已收录 0个评论
文章目录[隐藏]

文篇文章将向大家简单的介绍如何使用这个简单的 WordPress 自定义栏目 metabox 框架,实现自己 WordPress 自定义栏目的强大功能

WordPress 自定义栏目 MetaBox 简单框架推荐

前言

自定义栏目

  先说说自定义,有的朋友可能对他不是怎么熟悉,这里简单比喻下,如果把一篇文章比作一个人,那个这个人的名字,身高,提供,性别,等等的附属信息就是属于这篇文章的自定义栏目,或者成为元数据,或者 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();
}
?>
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>'; ?>

没了。


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 自定义栏目 MetaBox 简单框架推荐
喜欢 (6)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址