自定義字段是一個(gè)非常不錯(cuò)的功能，它能夠讓我們?yōu)槲恼绿砑痈鞣N自定義的屬性，高度靈活，操作簡(jiǎn)單。比如可以為文件添加一個(gè)SEO MetaDescription的自定義字段，我們可以輸入一段文字來(lái)概括文章內(nèi)容，在前臺(tái)顯示的時(shí)候可以根據(jù)該字段來(lái)生成HTML的<meta>標(biāo)簽，使搜索引擎更加方便的了解頁(yè)面的內(nèi)容，幫助索引。
但是，由于它的高度靈活，導(dǎo)致了一些問(wèn)題，尤其因?yàn)樽远x字段的值的輸入是一個(gè)文本框，導(dǎo)致在輸入時(shí)會(huì)非常不便，例如，設(shè)計(jì)的是一個(gè)整形的字段，但是由于文本框沒(méi)有驗(yàn)證和提示，導(dǎo)致可能會(huì)輸入非整數(shù)，在前臺(tái)使用時(shí)就會(huì)出現(xiàn)問(wèn)題，甚至導(dǎo)致網(wǎng)站掛掉。或者字段的值是預(yù)定義的值集合中的一個(gè)（比如有個(gè)性別的字段，就只是男和女中的一個(gè)值），但是文本框是不會(huì)提示你可以輸入哪些值。
總的來(lái)說(shuō)，不方便之處是文本框的單一輸入方式無(wú)法滿足不同場(chǎng)景下不同字段類型的輸入需求和驗(yàn)證需求。
那么，解決方案來(lái)了，使用自定義Meta Box來(lái)自定義編輯頁(yè)面。
以添加一個(gè)自定義字段——【推薦指數(shù)】為例，來(lái)講講如何使用Meta Box。
備注：推薦指數(shù)，在本例中指的是文章作者對(duì)文章的打分，分?jǐn)?shù)在1~10分，為整數(shù)。分?jǐn)?shù)越高，越推薦。
先來(lái)看看最終的樣子，我們可以通過(guò)下拉列表來(lái)選擇值了。
首先，需要使用到add meta boxes Action，該Action允許我們?yōu)槿魏挝恼骂愋妥?cè)Meta Box，在該Action中，我們需要使用add_meta_box()方法來(lái)添加Meta Box的相關(guān)信息。代碼如下
PHP Code復(fù)制內(nèi)容到剪貼板
- function add_rating_meta_box($post_type, $post) {
- // 需要哪些post type添加推薦指數(shù) Meta Box
- $types = array( 'post', 'page' );
- foreach ( $types as $type ) {
- add_meta_box(
- 'rating_meta_box_id', // Meta Box在前臺(tái)頁(yè)面中的id，可通過(guò)JS獲取到該Meta Box
- '推薦指數(shù)', // 顯示的標(biāo)題
- 'render_rating_meta_box', // 回調(diào)方法，用于輸出Meta Box的HTML代碼
- $type, // 在哪個(gè)post type頁(yè)面添加
- 'side', // 在哪顯示該Meta Box
- 'default' // 優(yōu)先級(jí)
- );
- }
- }
- add_action( 'add_meta_boxes', 'add_rating_meta_box' );
接下來(lái)看看是如何渲染的
PHP Code復(fù)制內(nèi)容到剪貼板
- function render_rating_meta_box( $post ) {
- // 添加 nonce 項(xiàng)用于后續(xù)的安全檢查
- wp_nonce_field( 'rating_nonce_action', 'rating_nonce_name' );
- // 獲取推薦指數(shù)的值
- $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()添加了一個(gè)nonce field，用來(lái)做安全檢查，然后，讀取推薦指數(shù)的值，循環(huán)1~10來(lái)輸出可供選擇的值，如果和推薦指數(shù)相同，則默認(rèn)選上。通過(guò)下拉框，既可以解決輸入不方便和無(wú)法驗(yàn)證的問(wèn)題。記住這里下拉框的name屬性的值（rating_field），將通過(guò)它在下面的代碼中獲取選擇的值。
最后，當(dāng)文章被保存時(shí)，需要將推薦指數(shù)也保存起來(lái)
PHP Code復(fù)制內(nèi)容到剪貼板
- function save_rating_post_data( $post_id ) {
- // 檢查nonce是否設(shè)置
- if (!isset($_POST['rating_nonce_name'])) {
- return $post_id;
- }
- $nonce = $_POST['rating_nonce_name'];
- // 驗(yàn)證nonce是否正確
- if (!wp_verify_nonce( $nonce, 'rating_nonce_action')) {
- return $post_id;
- }
- // 如果是系統(tǒng)自動(dòng)保存，則不操作
- if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
- return $post_id;
- }
- // 檢查用戶權(quán)限
- if ($_POST['post_type'] == 'post') {
- if (!current_user_can('edit_post', $post_id )) {
- return $post_id;
- }
- }
- $rating_key = 'rating';
- // 獲取數(shù)據(jù)
- $rating_value = $_POST['rating_field'];
- // 更新數(shù)據(jù)
- update_post_meta( $post_id, $rating_key, $rating_value );
- }
- add_action( 'save_post', 'save_rating_post_data' );
這里做了一系列檢查，包括對(duì)剛剛設(shè)置的nonce檢查，用戶權(quán)限的檢查，排除自動(dòng)保存的情況。然后使用update_post_meta()方法將數(shù)據(jù)存入數(shù)據(jù)庫(kù)。
至此，我們就完成了對(duì)推薦指數(shù)自定義字段的改裝，可以很方便的選擇文章的推薦指數(shù)。
等等。。。
細(xì)心的朋友可能發(fā)現(xiàn)了，在應(yīng)用了上面三段代碼后，的確可以實(shí)現(xiàn)功能。但是，在默認(rèn)的自定義欄目區(qū)域下，是可以看到，有一個(gè)名為“rating”的欄目，這就是我們剛剛選擇的推薦指數(shù)。如果想讓他不在自定義欄目下，顯示，可以將上述代碼中的$rating_key改為以下劃線開(kāi)頭，這樣，WordPress就不會(huì)顯示出來(lái)了。注意有兩個(gè)地方要改。
PHP Code復(fù)制內(nèi)容到剪貼板
- // 原來(lái)的代碼
- $rating_key = 'rating';
- // 改后的代碼
- $rating_key = '_rating';
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。