建站教程 2022-04-05

WordPress網站如何添加文章自定義欄位填寫面板

WordPress網站文章自定義欄位可以按照自己需求進行數據的填寫。例網頁描述description和關鍵詞keywords這兩個meta標籤。

通常WordPress建網站在添加自定義欄位和其值的時候，我們都是手動去"自定義欄位"模塊下拉框中去選擇相應的欄位，然後再輸入其值，最後還要提交等待一小段時間，似乎有點麻煩。

那麼可不可以給這些常用的自定義欄位創建一個單獨的面板，直接在裡面填內容就可以了呢？就像文章標籤，直接添加標籤即可，不需要單獨提交。答案是可以的，下面是效果圖：

下面介紹一下如何製作這種文章自定義欄位面板的方法。

第一步：添加兩個自定義欄位，名稱分別為description_value和keywords_value，你可以給下面數組添加多個元素，實現添加多個自定義欄位的目的。

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000088;">$new_meta_boxes</span> <span style="color: #339933;">=</span><br><span style="color: #990000;">array</span><span style="color: #009900;">(</span><br><span style="color: #0000ff;">"description"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span><br><span style="color: #0000ff;">"name"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"description"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"std"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"這裡填默認的網頁描述"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"title"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"網頁描述:"</span><span style="color: #009900;">)</span><span style="color: #339933;">,</span><br><br><span style="color: #0000ff;">"keywords"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span><br><span style="color: #0000ff;">"name"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"keywords"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"std"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"這裡填默認的網頁關鍵字"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"title"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"關鍵字:"</span><span style="color: #009900;">)</span><br><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></div>

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap">$new_meta_boxes = array( "description" => array( "name" => "description", "std" => "這裡填默認的網頁描述", "title" => "網頁描述:"), "keywords" => array( "name" => "keywords", "std" => "這裡填默認的網頁關鍵字", "title" => "關鍵字:") );</div></div>

第二步：創建自定義域以及輸入框；

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000000; font-weight: bold;">function</span> new_meta_boxes<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #000088;">$new_meta_boxes</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">foreach</span><span style="color: #009900;">(</span><span style="color: #000088;">$new_meta_boxes</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000088;">$meta_box_value</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$meta_box_value</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">""</span><span style="color: #009900;">)</span><br><span style="color: #000088;">$meta_box_value</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'std'</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">echo</span><span style="color: #0000ff;">'&lt;input type="hidden" name="'</span><span style="color: #339933;">.</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_noncename" id="'</span><span style="color: #339933;">.</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_noncename" value="'</span><span style="color: #339933;">.</span>wp_create_nonce<span style="color: #009900;">(</span> plugin_basename<span style="color: #009900;">(</span><span style="color: #009900; font-weight: bold;">__FILE__</span><span style="color: #009900;">)</span> <span style="color: #009900;">)</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'" /&gt;'</span><span style="color: #339933;">;</span><br><br><span style="color: #666666; font-style: italic;">// 自定義欄位標題</span><br><span style="color: #b1b100;">echo</span><span style="color: #0000ff;">'&lt;h4&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'title'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/h4&gt;'</span><span style="color: #339933;">;</span><br><br><span style="color: #666666; font-style: italic;">// 自定義欄位輸入框</span><br><span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;textarea cols="60" rows="3" name="'</span><span style="color: #339933;">.</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value"&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$meta_box_value</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/textarea&gt;&lt;br /&gt;'</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span></div></div>

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap">function new_meta_boxes() { global $post, $new_meta_boxes; foreach($new_meta_boxes as $meta_box) { $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true); if($meta_box_value == "") $meta_box_value = $meta_box['std']; echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />'; // 自定義欄位標題 echo'<h4>'.$meta_box['title'].'</h4>'; // 自定義欄位輸入框 echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea> '; } }</div></div>

第三步：在文章編輯頁添加自定義欄位模塊，這其中這用了WordPress的添加模塊函數add_meta_box。

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000000; font-weight: bold;">function</span> create_meta_box<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$theme_name</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span> <span style="color: #990000;">function_exists</span><span style="color: #009900;">(</span><span style="color: #0000ff;">'add_meta_box'</span><span style="color: #009900;">)</span> <span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br>
add_meta_box<span style="color: #009900;">(</span> <span style="color: #0000ff;">'new-meta-boxes'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'自定義模塊'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'new_meta_boxes'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'post'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'normal'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'high'</span> <span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span></div></div>

add_meta_box( 'new-meta-boxes', '自定義模塊', 'new_meta_boxes', 'post', 'normal', 'high' ); } }</div></div>

第四步：保存文章數據。之前所有準備都做好了，最重要的還是保存我們的自定義欄位中的信息。

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000000; font-weight: bold;">function</span> save_postdata<span style="color: #009900;">(</span> <span style="color: #000088;">$post_id</span> <span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #000088;">$new_meta_boxes</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">foreach</span><span style="color: #009900;">(</span><span style="color: #000088;">$new_meta_boxes</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span> <span style="color: #339933;">!</span>wp_verify_nonce<span style="color: #009900;">(</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">[</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_noncename'</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span> plugin_basename<span style="color: #009900;">(</span><span style="color: #009900; font-weight: bold;">__FILE__</span><span style="color: #009900;">)</span> <span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #b1b100;">return</span> <span style="color: #000088;">$post_id</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><br><span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span> <span style="color: #0000ff;">'page'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'post_type'</span><span style="color: #009900;">]</span> <span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span> <span style="color: #339933;">!</span>current_user_can<span style="color: #009900;">(</span> <span style="color: #0000ff;">'edit_page'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post_id</span> <span style="color: #009900;">)</span><span style="color: #009900;">)</span><br><span style="color: #b1b100;">return</span> <span style="color: #000088;">$post_id</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #b1b100;">else</span> <span style="color: #009900;">{</span><br><span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span> <span style="color: #339933;">!</span>current_user_can<span style="color: #009900;">(</span> <span style="color: #0000ff;">'edit_post'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post_id</span> <span style="color: #009900;">)</span><span style="color: #009900;">)</span><br><span style="color: #b1b100;">return</span> <span style="color: #000088;">$post_id</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><br><span style="color: #000088;">$data</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">[</span><span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br><br><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span>get_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #009900;">)</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">""</span><span style="color: #009900;">)</span><br>
add_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$data</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">elseif</span><span style="color: #009900;">(</span><span style="color: #000088;">$data</span> <span style="color: #339933;">!=</span> get_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><br>
update_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$data</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">elseif</span><span style="color: #009900;">(</span><span style="color: #000088;">$data</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">""</span><span style="color: #009900;">)</span><br>
delete_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> get_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #000088;">$meta_box</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'_value'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span></div></div>

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap">function save_postdata( $post_id ) { global $post, $new_meta_boxes; foreach($new_meta_boxes as $meta_box) { if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) { return $post_id; } if ( 'page' == $_POST['post_type'] ) { if ( !current_user_can( 'edit_page', $post_id )) return $post_id; } else { if ( !current_user_can( 'edit_post', $post_id )) return $post_id; } $data = $_POST[$meta_box['name'].'_value']; if(get_post_meta($post_id, $meta_box['name'].'_value') == "")

add_post_meta($post_id, $meta_box['name'].'_value', $data, true); elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))

update_post_meta($post_id, $meta_box['name'].'_value', $data); elseif($data == "")

delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true)); } }</div></div>

第五步：將函數連接到指定action（動作）。這是最後一步，也是最重要的一步，我們要做的是將函數連接到指定action（動作），以讓WordPress程序執行我們之前編寫的函數：

好了，經過以上5步，就可以開發出自己的wordpress自定義欄位填寫面板了。

由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » WordPress網站如何添加文章自定義欄位填寫面板

分享到：