自定義字段是一個非常不錯的功能,它能夠讓我們為文章添加各種自定義的屬性,高度靈活,操作簡單。比如可以為文件添加一個SEO MetaDescription的自定義字段,我們可以輸入一段文字來概括文章內容,在前臺顯示的時候可以根據該字段來生成HTML的<meta>標簽,使搜索引擎更加方便的了解頁面的內容,幫助索引。
但是,由于它的高度靈活,導致了一些問題,尤其因為自定義字段的值的輸入是一個文本框,導致在輸入時會非常不便,例如,設計的是一個整形的字段,但是由于文本框沒有驗證和提示,導致可能會輸入非整數,在前臺使用時就會出現問題,甚至導致網站掛掉?;蛘咦侄蔚闹凳穷A定義的值集合中的一個(比如有個性別的字段,就只是男和女中的一個值),但是文本框是不會提示你可以輸入哪些值。
總的來說,不方便之處是文本框的單一輸入方式無法滿足不同場景下不同字段類型的輸入需求和驗證需求。
那么,解決方案來了,使用自定義Meta Box來自定義編輯頁面。
以添加一個自定義字段——【推薦指數】為例,來講講如何使用Meta Box。
備注:推薦指數,在本例中指的是文章作者對文章的打分,分數在1~10分,為整數。分數越高,越推薦。
先來看看最終的樣子,我們可以通過下拉列表來選擇值了。

首先,需要使用到add meta boxes Action,該Action允許我們為任何文章類型注冊Meta Box,在該Action中,我們需要使用add_meta_box()方法來添加Meta Box的相關信息。代碼如下
PHP Code復制內容到剪貼板
- 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' // 優先級
- );
- }
- }
- add_action( 'add_meta_boxes', 'add_rating_meta_box' );
接下來看看是如何渲染的
PHP Code復制內容到剪貼板
- 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"';
- }
- $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),將通過它在下面的代碼中獲取選擇的值。
最后,當文章被保存時,需要將推薦指數也保存起來
PHP Code復制內容到剪貼板
- 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就不會顯示出來了。注意有兩個地方要改。
PHP Code復制內容到剪貼板
- // 原來的代碼
- $rating_key = 'rating';
- // 改后的代碼
- $rating_key = '_rating';
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。