WordPress 添加Meta Box的方法
相信很多站長(zhǎng)都知道并且已經(jīng)在使用WordPress自定義字段,很多插件也使用了這一功能。
自定義字段是一個(gè)非常不錯(cuò)的功能,它能夠讓我們?yōu)槲恼绿砑痈鞣N自定義的屬性,高度靈活,操作簡(jiǎn)單。比如可以為文件添加一個(gè)SEO MetaDescription的自定義字段,我們可以輸入一段文字來概括文章內(nèi)容,在前臺(tái)顯示的時(shí)候可以根據(jù)該字段來生成HTML的<meta>標(biāo)簽,使搜索引擎更加方便的了解頁面的內(nèi)容,幫助索引。
但是,由于它的高度靈活,導(dǎo)致了一些問題,尤其因?yàn)樽远x字段的值的輸入是一個(gè)文本框,導(dǎo)致在輸入時(shí)會(huì)非常不便,例如,設(shè)計(jì)的是一個(gè)整形的字段,但是由于文本框沒有驗(yàn)證和提示,導(dǎo)致可能會(huì)輸入非整數(shù),在前臺(tái)使用時(shí)就會(huì)出現(xiàn)問題,甚至導(dǎo)致網(wǎng)站掛掉?;蛘咦侄蔚闹凳穷A(yù)定義的值集合中的一個(gè)(比如有個(gè)性別的字段,就只是男和女中的一個(gè)值),但是文本框是不會(huì)提示你可以輸入哪些值。
總的來說,不方便之處是文本框的單一輸入方式無法滿足不同場(chǎng)景下不同字段類型的輸入需求和驗(yàn)證需求。
那么,解決方案來了,使用自定義Meta Box來自定義編輯頁面。
以添加一個(gè)自定義字段——【推薦指數(shù)】為例,來講講如何使用Meta Box。
備注:推薦指數(shù),在本例中指的是文章作者對(duì)文章的打分,分?jǐn)?shù)在1~10分,為整數(shù)。分?jǐn)?shù)越高,越推薦。
先來看看最終的樣子,我們可以通過下拉列表來選擇值了。
首先,需要使用到add meta boxes Action,該Action允許我們?yōu)槿魏挝恼骂愋妥?cè)Meta Box,在該Action中,我們需要使用add_meta_box()方法來添加Meta Box的相關(guān)信息。代碼如下
- 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)頁面中的id,可通過JS獲取到該Meta Box
- '推薦指數(shù)', // 顯示的標(biāo)題
- 'render_rating_meta_box', // 回調(diào)方法,用于輸出Meta Box的HTML代碼
- $type, // 在哪個(gè)post type頁面添加
- 'side', // 在哪顯示該Meta Box
- 'default' // 優(yōu)先級(jí)
- );
- }
- }
- add_action( 'add_meta_boxes', 'add_rating_meta_box' );
接下來看看是如何渲染的
- 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,用來做安全檢查,然后,讀取推薦指數(shù)的值,循環(huán)1~10來輸出可供選擇的值,如果和推薦指數(shù)相同,則默認(rèn)選上。通過下拉框,既可以解決輸入不方便和無法驗(yàn)證的問題。記住這里下拉框的name屬性的值(rating_field),將通過它在下面的代碼中獲取選擇的值。
最后,當(dāng)文章被保存時(shí),需要將推薦指數(shù)也保存起來
- 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改為以下劃線開頭,這樣,WordPress就不會(huì)顯示出來了。注意有兩個(gè)地方要改。
- // 原來的代碼
- $rating_key = 'rating';
- // 改后的代碼
- $rating_key = '_rating';
上一篇:WordPress博客出現(xiàn)的絕對(duì)路徑泄露漏洞及修復(fù)方法
欄 目:WordPress
下一篇:WordPress統(tǒng)計(jì)當(dāng)前頁面數(shù)據(jù)庫(kù)查詢次數(shù)及消耗時(shí)間的方法
本文標(biāo)題:WordPress 添加Meta Box的方法
本文地址:http://mengdiqiu.com.cn/a1/WordPress/12662.html
您可能感興趣的文章
- 05-31wordpress修改后臺(tái)登錄地址教程
- 05-31WordPress自定義用戶頭像實(shí)現(xiàn)代碼
- 01-11修改wordpress上傳臨時(shí)目錄解決wordpress無法安裝插件包的方法
- 01-11WordPress增加文章排序方式
- 01-11自己做wordpress評(píng)論插件修改評(píng)論樣式(兩步美化評(píng)論內(nèi)容)
- 01-11wordpress get
- 01-11wordpress獲取文章評(píng)論數(shù)過濾掉作者代碼分享
- 01-11在wordpress文章末尾添加內(nèi)容的簡(jiǎn)單方法
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計(jì)功能代碼修改(原理分析)
- 01-11wordpress dynamic


閱讀排行
- 1C語言 while語句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 05-31wordpress修改后臺(tái)登錄地址教程
- 05-31WordPress自定義用戶頭像實(shí)現(xiàn)代碼
- 01-11WordPress增加文章排序方式
- 01-11修改wordpress上傳臨時(shí)目錄解決wordpre
- 01-11wordpress get
- 01-11自己做wordpress評(píng)論插件修改評(píng)論樣式
- 01-11在wordpress文章末尾添加內(nèi)容的簡(jiǎn)單方
- 01-11wordpress獲取文章評(píng)論數(shù)過濾掉作者代
- 01-11wordpress dynamic
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計(jì)功
隨機(jī)閱讀
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10delphi制作wav文件的方法
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 04-02jquery與jsp,用jquery
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁面的局部加載