WordPress 添加自定義欄目面板

Alkaid2015 2012-12-26

展開全文

WordPress 添加自定義欄目面板

11 月 19 日, Ray Chow 發(fā)表于小技巧, 58 回應(yīng)

WordPress 的自定義欄目（在 WordPress 2.9.x 中還稱為「自定義域」，以下統(tǒng)稱「自定義欄目」）功能為更方便的拓展 WordPress 功能提供了可能，然而默認的自定義欄目面板就不太友好了，很多自定義欄目都直接用英文儲存，需要填寫的時候還要手動添加；只能填寫文本，對于某些特殊要求（例如布爾型及有限個枚舉）的自定義欄目還要記住填寫方式。

我先推薦一個相當(dāng)強大的插件：Custom Field Template，因為要自定義的東西比較多，所以設(shè)置頁面顯得很繁雜，但要修改的內(nèi)容并不多。

對于主題開發(fā)者來說，總是希望集成更多的功能，也應(yīng)該盡可能的幫助使用者方便使用主題，如果告訴客戶，要添加產(chǎn)品信息需要先在「自定義欄目」里找到 product_info，點擊「添加」再輸入值，似乎是一件很囧的事情。所幸這篇網(wǎng)志：《Control your own WordPress custom fields》解決了大部分的問題。

囧啊囧，忘記放效果示例了，大家別再問這是神馬東西了，下圖就是，它出現(xiàn)在寫文章的文本框的下方……

按照慣例，我們需要在主題的 functions.php 中插入代碼，當(dāng)然你要根據(jù)自己的需要修改啦。

一、定義 myCustomFields 類

if ( !class_exists('myCustomFields') ) {
    class myCustomFields {
        /**
        * @var  string  $prefix  自定義欄目名的前綴
        */
        var $prefix = '_mcf_';
        /**
        * @var  array  $postTypes  包含了標(biāo)準的「文章」、「頁面」和自定義文章類型的數(shù)組，自定義欄目面板將出現(xiàn)在這些文章類型中
        */
        var $postTypes = array( "page", "post" );

如果自定義欄目名是以下劃線(_)開頭的，它將在 WordPress 自帶的「自定義欄目」面板中隱藏。如果想保留 WordPress 自帶「自定義欄目」面板，建議使用這個方法。

二、定義所有的自定義欄目

/**
*  @var  array  $customFields  定義了所有的自定義欄目
*/
var $customFields = array(
    array(
        "name"          => "block-of-text",
        "title"         => "多行文本",
        "description"   => "",
        "type"          => "textarea",
        "scope"         =>    array( "page" ),
        "capability"    => "edit_pages"
    ),
    array(
        "name"          => "short-text",
        "title"         => "單行文本",
        "description"   => "",
        "type"          =>    "text",
        "scope"         =>    array( "post" ),
        "capability"    => "edit_posts"
    ),
    array(
        "name"          => "checkbox",
        "title"         => "復(fù)選框",
        "description"   => "",
        "type"          => "checkbox",
        "scope"         =>    array( "post", "page" ),
        "capability"    => "manage_options"
    )
);

所有的自定義欄目都應(yīng)該寫在這里，當(dāng)然要遵循這樣的格式，不過這里只給出了單行文本框、多行文本框、富文本框、復(fù)選框四種類型，您可以在稍后自由添加。

每一個字段包含的值為：

name: 自定義欄目的名稱。這個名稱將加上前綴存儲在數(shù)據(jù)庫中；
title : 用于顯示在自定義欄目面板的標(biāo)題；
description : 顯示在每個自定義欄目的下方，給出提示；
type : 定義了顯示的類型，默認為單行文本（text）；
scope : 定義了每個自定義欄目的作用范圍，例如 post 文章、page 頁面；
capability : 定義了編輯每個自定義欄目需要的權(quán)限，如果對此不太了解，參見這篇文章：《Users, roles, and capabilities in WordPress》。

三、用于初始化的相關(guān)函數(shù)

/**
* 用于兼容 PHP 4 的構(gòu)造函數(shù)
*/
function myCustomFields() { $this->__construct(); }
/**
* 用于 PHP 5 的構(gòu)造函數(shù)
*/
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 );
        }
    }
}
/**
* 創(chuàng)建新的「自定義欄目」面板
*/
function createCustomFields() {
    if ( function_exists( 'add_meta_box' ) ) {
        foreach ( $this->postTypes as $postType ) {
            add_meta_box( 'my-custom-fields', 'Custom Fields', array( &$this, 'displayCustomFields' ), $postType, 'normal', 'high' );
        }
    }
}

其中包括了構(gòu)造函數(shù)（注意 PHP 4 與 PHP 5 承認的構(gòu)造函數(shù)并不相同，而 PHP 4 似乎沒有析構(gòu)函數(shù)），向 admin_menu 添加鉤子以顯示自定義欄目面板，向 save_post 添加鉤子以在文章保存時也能保存自定義欄目中的信息，向 do_meta_boxes 添加鉤子以移除 WordPress 自帶「自定義欄目」面板（如果不需要可以將之注釋）。

四、權(quán)限檢查

/**
* 顯示新的「自定義欄目」面板
*/
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 ) {
            // 范圍檢查
            $scope = $customField[ 'scope' ];
            $output = false;
            foreach ( $scope as $scopeItem ) {
                // 原作者在此處使用了 switch，估計是修改時忘記刪掉了
                if ( $post->post_type == $scopeItem ) {
                    $output = true;
                    break;
                }
            }
            // 權(quán)限檢查
            if ( !current_user_can( $customField['capability'], $post->ID ) )
                $output = false;

這一段是顯示新的「自定義面板」的函數(shù) displayCustomFields()，wp_nonce_field() 函數(shù)生成了一個包含隨機數(shù)的隱藏字段，用于檢查提交的內(nèi)容來自合法的位置。

首先檢查的是自定義欄目的作用范圍，如注釋中所述，原作者在此處使用了 switch，估計是修改時忘記刪掉了（因為前一個版本檢查方式與現(xiàn)在有一些差別）。接著檢查的是權(quán)限，檢查通過后才會顯示這個自定義欄目。

五、輸出自定義欄目

        // 如果允許，則輸出
        if ( $output ) { ?>
            <div class="form-field form-required">
                <?php
                switch ( $customField[ 'type' ] ) {
                    case "checkbox": {
                        // 輸出復(fù)選框
                        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="yes"';
                        if ( get_post_meta( $post->ID, $this->prefix . $customField['name'], true ) == "yes" )
                            echo ' checked="checked"';
                        echo '" style="width: auto;" />';
                        break;
                    }
                    case "textarea":
                    case "wysiwyg": {
                        // 輸出多行文本框
                        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>';
                        // 輸出富文本編輯框
                        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: {
                        // 輸出單行文本框
                        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 ( !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'] ];
                        // 為富文本框的文本自動分段
                        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
 
// 實例化類
if ( class_exists('myCustomFields') ) {
    $myCustomFields_var = new myCustomFields();
}