WordPress中添加Add_Meta_Box使用方法

2024-09-07 00:51:46

字體：大中小

來源：轉載

供稿：網友

Add_Meta_Box是從wordpress2.5以來出的一個插件了,我們可以利用它來實現添加meta模塊了,具體來看一些例子,希望對各位有幫助.

描述:add_meta_box() 函數是在 WordPress 2.5 添加的,用來給插件開發者添加 Meta模塊到管理界面.

用法:

<?php

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

?>

參數:

$id（字符串）（必需）Meta模塊的 HTML“ID”屬性

$title（字符串）（必需）Meta模塊的標題，對用戶可見

$callback（回調）（必需）為Meta模塊輸出 HTML代碼的函數

$post_type（字符串）（必需）顯示Meta模塊的文章類型，可以是文章（post）、頁面（page）、鏈接（link）、附件（attachment）或自定義文章類型（自定義文章類型的別名）

$context（字符串）（可選）Meta模塊的顯示位置（'normal','advanced', 或 'side'）

默認值：'advanced'

$priority:（字符串）（可選）Meta模塊顯示的優先級別（'high', 'core', 'default'or 'low'）

默認值: 'default'

$callback_args:（數組）（可選）傳遞到 callback 函數的參數。callback 函數將接收 $post 對象和其他由這個變量傳遞的任何參數。

以添加一個自定義字段——【推薦指數】為例，來講講如何使用Meta Box。

備注:推薦指數，在本例中指的是文章作者對文章的打分，分數在1~10分，為整數。分數越高，越推薦。這樣我們可以通過下拉列表來選擇值了。

首先,需要使用到add meta boxes Action,該Action允許我們為任何文章類型注冊Meta Box,在該Action中,我們需要使用add_meta_box()方法來添加Meta Box的相關信息,代碼如下:

function add_rating_meta_box($post_type, $post) {

    // 需要哪些post type添加推薦指數 Meta Box

    $types = array( 'post', 'page' );



    foreach ( $types as $type ) {

        add_meta_box(

            'rating_meta_box_id', // Meta Box在前臺頁面中的id，可通過JS獲取到該Meta Box

            '推薦指數', // 顯示的標題

            'render_rating_meta_box', // 回調方法，用于輸出Meta Box的HTML代碼

            $type, // 在哪個post type頁面添加

            'side', // 在哪顯示該Meta Box

            'default' // 優先級

        ); //開源軟件:Vevb.com

    }

}

add_action( 'add_meta_boxes', 'add_rating_meta_box' );

這里我們在$types數組中定義了Post和Page都需要推薦指數這個自定義字段,然后告訴WordPress使用“render_rating_meta_box”方法來渲染Meta Box,位置在側邊欄(side),因為內容不多,所以側邊欄足夠,若內容較多,可以將“side”改為“advanced”,這樣就會在主內容區域渲染Meta Box.

接下來看看是如何渲染的,代碼如下:

function render_rating_meta_box( $post ) {

    // 添加 nonce 項用于后續的安全檢查

    wp_nonce_field( 'rating_nonce_action', 'rating_nonce_name' );

    // 獲取推薦指數的值

    $rating_key = 'rating';

    $rating_value = get_post_meta( $post->ID, $rating_key, true );

    $rating_value = (int)$rating_value;

    $html = '<select name="rating_field">';

    for ($i = 0; $i <= 10; $i++) {

        $selected = '';

        if ($i == $rating_value) {

            $selected = 'selected="selected"';

        }//開源軟件:Vevb.com

        $html .= sprintf('<option value="%s" %s>%s星</option>', $i, $selected, $i/2);

    }

    $html .= '</select>';

    echo $html;

}

這里先使用wp_nonce_field()添加了一個nonce field，用來做安全檢查,然后,讀取推薦指數的值，循環1~10來輸出可供選擇的值,如果和推薦指數相同,則默認選上,通過下拉框，既可以解決輸入不方便和無法驗證的問題,記住這里下拉框的name屬性的值（rating_field）,將通過它在下面的代碼中獲取選擇的值.

最后,當文章被保存時,需要將推薦指數也保存起來,代碼如下:

function save_rating_post_data( $post_id ) {

    // 檢查nonce是否設置

    if (!isset($_POST['rating_nonce_name'])) {

        return $post_id;

    }

    $nonce = $_POST['rating_nonce_name'];

    // 驗證nonce是否正確

    if (!wp_verify_nonce( $nonce, 'rating_nonce_action')) {

        return $post_id;

    }

    // 如果是系統自動保存，則不操作

    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {

        return $post_id;

    }



    // 檢查用戶權限

    if ($_POST['post_type'] == 'post') {

        if (!current_user_can('edit_post', $post_id )) {

            return $post_id;

        }

    }

    $rating_key = 'rating';

    // 獲取數據

    $rating_value = $_POST['rating_field'];

    // 更新數據

    update_post_meta( $post_id, $rating_key, $rating_value );

}

add_action( 'save_post', 'save_rating_post_data' );

這里做了一系列檢查,包括對剛剛設置的nonce檢查,用戶權限的檢查,排除自動保存的情況,然后使用update_post_meta()方法將數據存入數據庫.

至此,我們就完成了對推薦指數自定義字段的改裝,可以很方便的選擇文章的推薦指數,等等。。。

細心的朋友可能發現了,在應用了上面三段代碼后,的確可以實現功能,但是,在默認的自定義欄目區域下,是可以看到，有一個名為“rating”的欄目,這就是我們剛剛選擇的推薦指數,如果想讓他不在自定義欄目下,顯示,可以將上述代碼中的$rating_key改為以下劃線開頭,這樣,WordPress就不會顯示出來了,注意有兩個地方要改,代碼如下:

// 原來的代碼

$rating_key = 'rating';

// 改后的代碼

$rating_key = '_rating';

添加meta box 來上傳圖片

1.首先要支持圖片的上傳,要在functions.php中加入一下代碼:

function my_add_edit_form_multipart_encoding() {

echo ' enctype="multipart/form-data"';

}

add_action('post_edit_form_tag', 'my_add_edit_form_multipart_encoding');

2.然后安裝meta box,代碼如下:

function my_setup_meta_boxes() {

add_meta_box('my_image_box', 'Upload Image', 'my_render_image_attachment_box', 'page', 'normal', 'high');//這個地方的參數大家可以去官方網站查看，我只是要說明一下第4個參數，如果想讓post支持就填寫post如果是page就填寫page，如果是自定義類型就填寫自定義類型的名稱

}

add_action('admin_init','my_setup_meta_boxes');

3.添加回調函數,代碼如下:

function my_render_image_attachment_box($post) {

    // 顯示添加的圖片

    $existing_image_id = get_post_meta($post->ID,'_my_attached_image', true);

    if(is_numeric($existing_image_id)) {

        echo '<div>';

            $arr_existing_image = wp_get_attachment_image_src($existing_image_id, 'large');

            $existing_image_url = $arr_existing_image[0];

            echo '<img src="' . $existing_image_url . '" />';

        echo '</div>';

    }

    // 如果已經上傳了圖片就提示

    if($existing_image) {

        echo '<div>Attached Image ID: ' . $existing_image . '</div>';

    }

    echo 'Upload an image: <input type="file" name="my_image" id="my_image" />';

    // 獲得圖片的狀態

    $status_message = get_post_meta($post->ID,'_my_attached_image_upload_feedback', true);

    // 顯示圖片狀態

    if($status_message) {

        echo '<div class="upload_status_message">';

            echo $status_message;

        echo '</div>';

    }

    // 自動保存

    echo '<input type="hidden" name="my_manual_save_flag" value="true" />';

}

4.圖片的更新,代碼如下:

function my_update_post($post_id, $post) {

//獲得圖片類型

    $post_type = $post->post_type;

    if($post_id && isset($_POST['my_manual_save_flag'])) {

        switch($post_type) {

            case 'page':

                if(isset($_FILES['my_image']) && ($_FILES['my_image']['size'] > 0)) {

                    $arr_file_type = wp_check_filetype(basename($_FILES['my_image']['name']));

                    $uploaded_file_type = $arr_file_type['type'];

                    $allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');

                    if(in_array($uploaded_file_type, $allowed_file_types)) {

                        $upload_overrides = array( 'test_form' => false );

                        $uploaded_file = wp_handle_upload($_FILES['my_image'], $upload_overrides);

                        if(isset($uploaded_file['file'])) {

                            $file_name_and_location = $uploaded_file['file'];

                            $file_title_for_media_library = 'your title here';

                            $attachment = array(

                                'post_mime_type' => $uploaded_file_type,

                                'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),

                                'post_content' => '',

                                'post_status' => 'inherit'

                            );

                            $attach_id = wp_insert_attachment( $attachment, $file_name_and_location );

                            require_once(ABSPATH . "wp-admin" . '/includes/image.php');

                            $attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );

                            wp_update_attachment_metadata($attach_id,  $attach_data);

                            $existing_uploaded_image = (int) get_post_meta($post_id,'_my_attached_image', true);

                            if(is_numeric($existing_uploaded_image)) {

                                wp_delete_attachment($existing_uploaded_image);

                            }

                            update_post_meta($post_id,'_my_attached_image',$attach_id);

                            $upload_feedback = false;

                        } else {

                            $upload_feedback = 'There was a problem with your upload.';

                            update_post_meta($post_id,'_my_attached_image',$attach_id);

                        }

                    } else {

                        $upload_feedback = 'Please upload only image files (jpg, gif or png).';

                        update_post_meta($post_id,'_my_attached_image',$attach_id);

                    }

                } else {

                    $upload_feedback = false;

                }

                update_post_meta($post_id,'_my_attached_image_upload_feedback',$upload_feedback);

            break;

            default:

        }

    return;

}

    return;

}

add_action('save_post','my_update_post',1,2);