WordPress 進階教程 (四十一): 在文章快速編輯中添加字段

本工作室發佈的後台框架中，可以很方便的給文章編輯頁面添加字段。可是有的時候，修改一個字段總是要點擊進入編輯頁面很麻煩，如果能在快速編輯裏面快速修改則方便很多。剛好之前給客户做了一個網站，於是乾脆給客户做了這個功能：讓客户可以給每個頁面選擇單獨的菜單，能夠在快速編輯頁面快速選擇。

效果如下 1：

效果 2：

文章參考自：http://shibashake.com/WordPress-theme/expand-the-WordPress-quick-edit-menu

你可以將以下代碼放入 functions.php 文件中，也可以將下列所有代碼單獨放一個文件，然後在 functions.php 中 require 該文件即可: 比如阿樹將所有代碼放在了主題的 include/page-quick-edit.php 文件中，則在 functions.php 中加入以下代碼即可：

require get_template_directory() . '/include/page-quick-edit.php';

注意：我使用了阿樹工作室提供的類文件為單頁面添加一個名為"_left_menu"的字段。

第一步：在頁面快速編輯頁面添加列，相關教程請參考：WordPress 進階教程 (四): 在文章管理列表添加自定義列

// 如果是文章，使用 manage_post_posts_columns，自定義文章類型類似
add_filter('manage_page_posts_columns', 'ashuwp_add_page_columns');
function ashuwp_add_page_columns($columns) {
$columns['_left_menu'] = '左側菜單';
return $columns;
}
// 如果是文章，使用 manage_post_posts_column，自定義文章類型類似
add_action('manage_pages_custom_column', 'ashuwp_render_page_columns', 10, 2);
function ashuwp_render_page_columns($column_name, $id) {
switch ($column_name) {
case '_left_menu':
$menu_id = get_post_meta( $id, '_left_menu', TRUE); //獲取自定義字段的值
if($menu_id){
$menu_term = get_term($menu_id,'nav_menu'); //根據字段獲取菜單對象
if (is_object($menu_term))
echo $menu_term->name; //輸出菜單名稱
else
echo '默認';
}else{
echo '默認';
}
break;
}
}

添加完以上代碼，則能實現文章開頭效果 1 的效果，在文章管理頁面可以看到設置的值

第二步：在快速編輯裏面增加表單項

//在快速編輯裏面添加字段
add_action('quick_edit_custom_box', 'ashuwp_add_quick_edit', 10, 2);
function ashuwp_add_quick_edit($column_name, $post_type) {
if ($column_name != '_left_menu') return; //這裏的_left_menu 對應上面步驟的 $column_name
?>
<fieldset class="inline-edit-col-left">
<div class="inline-edit-col">
<span class="title"> 左側菜單</span>
<?php //注意下面的 input 很有用處，注意 name 和 id ?>
<input type="hidden" name="left_menu_set_noncename" id="left_menu_set_noncename" value="" />
<?php
$entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) ); //獲取所有菜單
?>
<?php //請注意上面 select 的 name 和 id ?>
<select name='_left_menu' id='left_menu_set'>
<option class='menu-option' value='0'> 默認</option>
<?php
//循環輸出菜單項此處暫時無法輸出默認選中項
foreach ($entries as $key => $entry){
$id = $entry->term_id;
$title = $entry->name;
echo "<option value='{$id}'>{$title}</option>
";
}
?>
</select>
</div>
</fieldset>
<?php
}

添加完步驟三的代碼，在後台快速編輯頁面你就能看到菜單選擇的表單項，也就是教程開頭效果 2 的效果。

此時雖然顯示可以，但是還沒發保存和更新數據。

步驟三：保存和更新數據

//保存和更新數據
add_action('save_post', 'ashuwp_save_quick_edit_data');
function ashuwp_save_quick_edit_data($post_id) {
// verify if this is an auto save routine. If it is our form has not been submitted, so we dont want
// to do anything
//如果是自動保存日誌，並非我們所提交數據，那就不處理
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
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;
}
$post = get_post($post_id);
if (isset($_POST['_left_menu']) && ($post->post_type != 'revision')) {
$left_menu_id = esc_attr($_POST['_left_menu']);
if ($left_menu_id)
update_post_meta( $post_id, '_left_menu', $left_menu_id);
else
delete_post_meta( $post_id, '_left_menu');
}
return $widget_set_id;
}

此時保存數據也有了，但是還不夠，如果僅僅做到這一步，你會發現，當你點擊」快速編輯「，菜單選擇的表單項沒有任何選項被選中，也就是沒有默認值，而在前面步驟二中代碼也提到，下拉框並不能輸出一個默認的選中項。

下面是原文中的方法，此方法暫時有缺陷，不過也能用。

步驟四：輸出 js

//輸出 js
add_action('admin_footer', 'ashuwp_quick_edit_javascript');
function ashuwp_quick_edit_javascript() {
$current_screen = get_current_screen();
if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return;
?>
<script type="text/javascript">
<!--
function set_inline_menu_set(menuSet, nonce) {
// revert Quick Edit menu so that it refreshes properly
inlineEditPost.revert();
var menuInput = document.getElementById('left_menu_set');
var nonceInput = document.getElementById('left_menu_set_noncename');
nonceInput.value = nonce;
// check option manually
for (i = 0; i < menuInput.options.length; i++) {
if (menuInput.options[i].value == menuSet) {
menuInput.options[i].setAttribute("selected", "selected");
} else { menuInput.options[i].removeAttribute("selected"); }
}
}
//-->
</script>
<?php
}

步驟五：更改「快速編輯」的 a 標籤

//更改快速編輯
add_filter('page_row_actions', 'ashuwp_expand_quick_edit_link', 10, 2);
function ashuwp_expand_quick_edit_link($actions, $post) {
$current_screen = get_current_screen();
if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return $actions;
$nonce = wp_create_nonce( 'left_menu_set'.$post->ID);
$menu_id = get_post_meta( $post->ID, '_left_menu', TRUE);
//將「快速編輯」的 a 標籤中增加一個 onclick
$actions['inline hide-if-no-js'] = '<a href="#" class="editinline" title="';
$actions['inline hide-if-no-js'] .= esc_attr( __( 'Edit this item inline' ) ) . '" ';
$actions['inline hide-if-no-js'] .= " onclick="set_inline_menu_set('{$menu_id}', '{$nonce}')">";
$actions['inline hide-if-no-js'] .= __( 'Quick Edit' );
$actions['inline hide-if-no-js'] .= '</a>';
return $actions;
}
?>

至此，我們可以在快速編輯頁面快速的設置字段。此教程並沒有普適性，請看客根據註釋自行修改。
下面是整個的代碼

完整代碼：

<?php
// 如果是文章，使用 manage_post_posts_columns，自定義文章類型類似
add_filter('manage_page_posts_columns', 'ashuwp_add_page_columns');
function ashuwp_add_page_columns($columns) {
$columns['_left_menu'] = '左側菜單';
return $columns;
}
// 如果是文章，使用 manage_post_posts_column，自定義文章類型類似
add_action('manage_pages_custom_column', 'ashuwp_render_page_columns', 10, 2);
function ashuwp_render_page_columns($column_name, $id) {
switch ($column_name) {
case '_left_menu':
$menu_id = get_post_meta( $id, '_left_menu', TRUE); //獲取自定義字段的值
if($menu_id){
$menu_term = get_term($menu_id,'nav_menu'); //根據字段獲取菜單對象
if (is_object($menu_term))
echo $menu_term->name; //輸出菜單名稱
else
echo '默認';
}else{
echo '默認';
}
break;
}
}
//在快速編輯裏面添加字段
add_action('quick_edit_custom_box', 'ashuwp_add_quick_edit', 10, 2);
function ashuwp_add_quick_edit($column_name, $post_type) {
if ($column_name != '_left_menu') return; //這裏的_left_menu 對應上面步驟的 $column_name
?>
<fieldset class="inline-edit-col-left">
<div class="inline-edit-col">
<span class="title"> 左側菜單</span>
<?php //注意下面的 input 很有用處，注意 name 和 id ?>
<input type="hidden" name="left_menu_set_noncename" id="left_menu_set_noncename" value="" />
<?php
$entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) ); //獲取所有菜單
?>
<?php //請注意上面 select 的 name 和 id ?>
<select name='_left_menu' id='left_menu_set'>
<option class='menu-option' value='0'> 默認</option>
<?php
//循環輸出菜單項此處暫時無法輸出默認選中項
foreach ($entries as $key => $entry){
$id = $entry->term_id;
$title = $entry->name;
echo "<option value='{$id}'>{$title}</option>
";
}
?>
</select>
</div>
</fieldset>
<?php
}
//保存和更新數據
add_action('save_post', 'ashuwp_save_quick_edit_data');
function ashuwp_save_quick_edit_data($post_id) {
// verify if this is an auto save routine. If it is our form has not been submitted, so we dont want
// to do anything
//如果是自動保存日誌，並非我們所提交數據，那就不處理
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
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;
}
$post = get_post($post_id);
if (isset($_POST['_left_menu']) && ($post->post_type != 'revision')) {
$left_menu_id = esc_attr($_POST['_left_menu']);
if ($left_menu_id)
update_post_meta( $post_id, '_left_menu', $left_menu_id);
else
delete_post_meta( $post_id, '_left_menu');
}
return $widget_set_id;
}
//輸出 js
add_action('admin_footer', 'ashuwp_quick_edit_javascript');
function ashuwp_quick_edit_javascript() {
$current_screen = get_current_screen();
if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return;
?>
<script type="text/javascript">
<!--
function set_inline_menu_set(menuSet, nonce) {
// revert Quick Edit menu so that it refreshes properly
inlineEditPost.revert();
var menuInput = document.getElementById('left_menu_set');
var nonceInput = document.getElementById('left_menu_set_noncename');
nonceInput.value = nonce;
// check option manually
for (i = 0; i < menuInput.options.length; i++) {
if (menuInput.options[i].value == menuSet) {
menuInput.options[i].setAttribute("selected", "selected");
} else { menuInput.options[i].removeAttribute("selected"); }
}
}
//-->
</script>
<?php
}
//更改快速編輯
add_filter('page_row_actions', 'ashuwp_expand_quick_edit_link', 10, 2);
function ashuwp_expand_quick_edit_link($actions, $post) {
$current_screen = get_current_screen();
if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return $actions;
$nonce = wp_create_nonce( 'left_menu_set'.$post->ID);
$menu_id = get_post_meta( $post->ID, '_left_menu', TRUE);
//將「快速編輯」的 a 標籤中增加一個 onclick
$actions['inline hide-if-no-js'] = '<a href="#" class="editinline" title="';
$actions['inline hide-if-no-js'] .= esc_attr( __( 'Edit this item inline' ) ) . '" ';
$actions['inline hide-if-no-js'] .= " onclick="set_inline_menu_set('{$menu_id}', '{$nonce}')">";
$actions['inline hide-if-no-js'] .= __( 'Quick Edit' );
$actions['inline hide-if-no-js'] .= '</a>';
return $actions;
}
?>

WordPress 進階教程 (四十一): 在文章快速編輯中添加字段

WordPress 進階教程 (四十一): 在文章快速編輯中添加字段

訂單服務

媒體中心

服務支持

使用條款

關於公司