wordpress进阶教程(四十一):在文章快速编辑中添加字段

本工作室发布的后台框架中,可以很方便的给文章编辑页面添加字段。可是有的时候,修改一个字段总是要点击进入编辑页面很麻烦,如果能在快速编辑里面快速修改则方便很多。刚好之前给客户做了一个网站,于是干脆给客户做了这个功能:让客户可以给每个页面选择单独的菜单,能够在快速编辑页面快速选择。

效果如下1:xiaoguo1
效果2:

xiaoguo2

 

文章参考自:http://shibashake.com/wordpress-theme/expand-the-wordpress-quick-edit-menu

你可以将以下代码放入functions.php文件中,也可以将下列所有代码单独放一个文件,然后在functions.php中require该文件即可:比如阿树将所有代码放在了主题的include/page-quick-edit.php文件中,则在functions.php中加入以下代码即可:

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

注意:我使用了阿树工作室提供的类文件为单页面添加一个名为"_left_menu"的字段。

第一步:在页面快速编辑页面添加列,相关教程请参考:wordpress进阶教程(四):在文章管理列表添加自定义列

  1. // 如果是文章,使用manage_post_posts_columns,自定义文章类型类似
  2. add_filter('manage_page_posts_columns', 'ashuwp_add_page_columns');
  3. function ashuwp_add_page_columns($columns) {
  4.     $columns['_left_menu'] = '左侧菜单';
  5.     return $columns;
  6. }
  7. // 如果是文章,使用manage_post_posts_column,自定义文章类型类似
  8. add_action('manage_pages_custom_column', 'ashuwp_render_page_columns', 10, 2);
  9. function ashuwp_render_page_columns($column_name$id) {
  10.     switch ($column_name) {
  11.     case '_left_menu':
  12.         $menu_id = get_post_meta( $id, '_left_menu', TRUE); //获取自定义字段的值
  13.         if($menu_id){
  14.         $menu_term = get_term($menu_id,'nav_menu'); //根据字段获取菜单对象
  15.         if (is_object($menu_term))
  16.           echo $menu_term->name; //输出菜单名称
  17.         else
  18.           echo '默认';
  19.         }else{
  20.           echo '默认';
  21.         }
  22.         break;
  23.     }
  24. }

添加完以上代码,则能实现文章开头效果1的效果,在文章管理页面可以看到设置的值

第二步:在快速编辑里面增加表单项

  1. //在快速编辑里面添加字段
  2. add_action('quick_edit_custom_box',  'ashuwp_add_quick_edit', 10, 2);
  3. function ashuwp_add_quick_edit($column_name$post_type) {
  4.     if ($column_name != '_left_menu') return//这里的_left_menu对应上面步骤的$column_name
  5.     ?>
  6.     <fieldset class="inline-edit-col-left">
  7.     <div class="inline-edit-col">
  8.         <span class="title">左侧菜单</span>
  9.         <?php //注意下面的input很有用处,注意name和id ?>
  10.         <input type="hidden" name="left_menu_set_noncename" id="left_menu_set_noncename" value="" />
  11.         <?php
  12.         $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) ); //获取所有菜单
  13.         ?>
  14.         <?php //请注意上面select的name和id ?>
  15.         <select name='_left_menu' id='left_menu_set'>
  16.             <option class='menu-option' value='0'>默认</option>
  17.             <?php
  18.             //循环输出菜单项 此处暂时无法输出默认选中项
  19.             foreach ($entries as $key => $entry){
  20.               $id = $entry->term_id;
  21.               $title = $entry->name;
  22.                 echo "<option class='menu-option' value='{$id}'>{$title}</option>\n";
  23.             }
  24.             ?>
  25.         </select>
  26.     </div>
  27.     </fieldset>
  28.     <?php
  29. }

添加完步骤三的代码,在后台快速编辑页面你就能看到菜单选择的表单项,也就是教程开头效果2的效果。

此时虽然显示可以,但是还没发保存和更新数据。

步骤三:保存和更新数据

  1. //保存和更新数据
  2. add_action('save_post', 'ashuwp_save_quick_edit_data');
  3. function ashuwp_save_quick_edit_data($post_id) {
  4.     // verify if this is an auto save routine. If it is our form has not been submitted, so we dont want
  5.     // to do anything
  6.     //如果是自动保存日志,并非我们所提交数据,那就不处理
  7.     if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
  8.         return $post_id;
  9.     // 验证权限
  10.     if ( 'page' == $_POST['post_type'] ) {
  11.         if ( !current_user_can( 'edit_page', $post_id ) )
  12.             return $post_id;
  13.     } else {
  14.         if ( !current_user_can( 'edit_post', $post_id ) )
  15.         return $post_id;
  16.     }
  17.     $post = get_post($post_id);
  18.     if (isset($_POST['_left_menu']) && ($post->post_type != 'revision')) {
  19.         $left_menu_id = esc_attr($_POST['_left_menu']);
  20.         if ($left_menu_id)
  21.             update_post_meta( $post_id, '_left_menu', $left_menu_id);
  22.         else
  23.             delete_post_meta( $post_id, '_left_menu');
  24.     }
  25.     return $widget_set_id;
  26. }

此时保存数据也有了,但是还不够,如果仅仅做到这一步,你会发现,当你点击”快速编辑“,菜单选择的表单项没有任何选项被选中,也就是没有默认值,而在前面步骤二中代码也提到,下拉框并不能输出一个默认的选中项。

下面是原文中的方法,此方法暂时有缺陷,不过也能用。

步骤四:输出js

  1. //输出js
  2. add_action('admin_footer', 'ashuwp_quick_edit_javascript');
  3. function ashuwp_quick_edit_javascript() {
  4.     $current_screen = get_current_screen();
  5.     if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return;
  6.     ?>
  7.     <script type="text/javascript">
  8.     <!--
  9.     function set_inline_menu_set(menuSet, nonce) {
  10.         // revert Quick Edit menu so that it refreshes properly
  11.         inlineEditPost.revert();
  12.         var menuInput = document.getElementById('left_menu_set');
  13.         var nonceInput = document.getElementById('left_menu_set_noncename');
  14.         nonceInput.value = nonce;
  15.         // check option manually
  16.         for (i = 0; i < menuInput.options.length; i++) {
  17.             if (menuInput.options[i].value == menuSet) {
  18.                 menuInput.options[i].setAttribute("selected""selected");
  19.             } else { menuInput.options[i].removeAttribute("selected"); }
  20.         }
  21.     }
  22.     //-->
  23.     </script>
  24.     <?php
  25. }

步骤五:更改“快速编辑”的a标签

  1. //更改快速编辑
  2. add_filter('page_row_actions', 'ashuwp_expand_quick_edit_link', 10, 2);
  3. function ashuwp_expand_quick_edit_link($actions$post) {
  4.     $current_screen = get_current_screen();
  5.     if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return $actions;
  6.     $nonce = wp_create_nonce( 'left_menu_set'.$post->ID);
  7.     $menu_id = get_post_meta( $post->ID, '_left_menu', TRUE);
  8.     //将“快速编辑”的a标签中增加一个onclick
  9.     $actions['inline hide-if-no-js'] = '<a href="#" class="editinline" title="';
  10.     $actions['inline hide-if-no-js'] .= esc_attr( __( 'Edit this item inline' ) ) . '" ';
  11.     $actions['inline hide-if-no-js'] .= " onclick=\"set_inline_menu_set('{$menu_id}', '{$nonce}')\">";
  12.     $actions['inline hide-if-no-js'] .= __( 'Quick&nbsp;Edit' );
  13.     $actions['inline hide-if-no-js'] .= '</a>';
  14.     return $actions;
  15. }
  16. ?>

至此,我们可以在快速编辑页面快速的设置字段。此教程并没有普适性,请看客根据注释自行修改。
下面是整个的代码

完整代码:

  1. <?php
  2. // 如果是文章,使用manage_post_posts_columns,自定义文章类型类似
  3. add_filter('manage_page_posts_columns', 'ashuwp_add_page_columns');
  4. function ashuwp_add_page_columns($columns) {
  5.     $columns['_left_menu'] = '左侧菜单';
  6.     return $columns;
  7. }
  8. // 如果是文章,使用manage_post_posts_column,自定义文章类型类似
  9. add_action('manage_pages_custom_column', 'ashuwp_render_page_columns', 10, 2);
  10. function ashuwp_render_page_columns($column_name$id) {
  11.     switch ($column_name) {
  12.     case '_left_menu':
  13.         $menu_id = get_post_meta( $id, '_left_menu', TRUE); //获取自定义字段的值
  14.         if($menu_id){
  15.         $menu_term = get_term($menu_id,'nav_menu'); //根据字段获取菜单对象
  16.         if (is_object($menu_term))
  17.           echo $menu_term->name; //输出菜单名称
  18.         else
  19.           echo '默认';
  20.         }else{
  21.           echo '默认';
  22.         }
  23.         break;
  24.     }
  25. }
  26. //在快速编辑里面添加字段
  27. add_action('quick_edit_custom_box',  'ashuwp_add_quick_edit', 10, 2);
  28. function ashuwp_add_quick_edit($column_name$post_type) {
  29.     if ($column_name != '_left_menu') return//这里的_left_menu对应上面步骤的$column_name
  30.     ?>
  31.     <fieldset class="inline-edit-col-left">
  32.     <div class="inline-edit-col">
  33.         <span class="title">左侧菜单</span>
  34.         <?php //注意下面的input很有用处,注意name和id ?>
  35.         <input type="hidden" name="left_menu_set_noncename" id="left_menu_set_noncename" value="" />
  36.         <?php
  37.         $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) ); //获取所有菜单
  38.         ?>
  39.         <?php //请注意上面select的name和id ?>
  40.         <select name='_left_menu' id='left_menu_set'>
  41.             <option class='menu-option' value='0'>默认</option>
  42.             <?php
  43.             //循环输出菜单项 此处暂时无法输出默认选中项
  44.             foreach ($entries as $key => $entry){
  45.               $id = $entry->term_id;
  46.               $title = $entry->name;
  47.                 echo "<option class='menu-option' value='{$id}'>{$title}</option>\n";
  48.             }
  49.             ?>
  50.         </select>
  51.     </div>
  52.     </fieldset>
  53.     <?php
  54. }
  55. //保存和更新数据
  56. add_action('save_post', 'ashuwp_save_quick_edit_data');
  57. function ashuwp_save_quick_edit_data($post_id) {
  58.     // verify if this is an auto save routine. If it is our form has not been submitted, so we dont want
  59.     // to do anything
  60.     //如果是自动保存日志,并非我们所提交数据,那就不处理
  61.     if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
  62.         return $post_id;
  63.     // 验证权限
  64.     if ( 'page' == $_POST['post_type'] ) {
  65.         if ( !current_user_can( 'edit_page', $post_id ) )
  66.             return $post_id;
  67.     } else {
  68.         if ( !current_user_can( 'edit_post', $post_id ) )
  69.         return $post_id;
  70.     }
  71.     $post = get_post($post_id);
  72.     if (isset($_POST['_left_menu']) && ($post->post_type != 'revision')) {
  73.         $left_menu_id = esc_attr($_POST['_left_menu']);
  74.         if ($left_menu_id)
  75.             update_post_meta( $post_id, '_left_menu', $left_menu_id);
  76.         else
  77.             delete_post_meta( $post_id, '_left_menu');
  78.     }
  79.     return $widget_set_id;
  80. }
  81. //输出js
  82. add_action('admin_footer', 'ashuwp_quick_edit_javascript');
  83. function ashuwp_quick_edit_javascript() {
  84.     $current_screen = get_current_screen();
  85.     if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return;
  86.     ?>
  87.     <script type="text/javascript">
  88.     <!--
  89.     function set_inline_menu_set(menuSet, nonce) {
  90.         // revert Quick Edit menu so that it refreshes properly
  91.         inlineEditPost.revert();
  92.         var menuInput = document.getElementById('left_menu_set');
  93.         var nonceInput = document.getElementById('left_menu_set_noncename');
  94.         nonceInput.value = nonce;
  95.         // check option manually
  96.         for (i = 0; i < menuInput.options.length; i++) {
  97.             if (menuInput.options[i].value == menuSet) {
  98.                 menuInput.options[i].setAttribute("selected""selected");
  99.             } else { menuInput.options[i].removeAttribute("selected"); }
  100.         }
  101.     }
  102.     //-->
  103.     </script>
  104.     <?php
  105. }
  106. //更改快速编辑
  107. add_filter('page_row_actions', 'ashuwp_expand_quick_edit_link', 10, 2);
  108. function ashuwp_expand_quick_edit_link($actions$post) {
  109.     $current_screen = get_current_screen();
  110.     if (!is_object($current_screen) || ($current_screen->id != 'edit-page') || ($current_screen->post_type != 'page')) return $actions;
  111.     $nonce = wp_create_nonce( 'left_menu_set'.$post->ID);
  112.     $menu_id = get_post_meta( $post->ID, '_left_menu', TRUE);
  113.     //将“快速编辑”的a标签中增加一个onclick
  114.     $actions['inline hide-if-no-js'] = '<a href="#" class="editinline" title="';
  115.     $actions['inline hide-if-no-js'] .= esc_attr( __( 'Edit this item inline' ) ) . '" ';
  116.     $actions['inline hide-if-no-js'] .= " onclick=\"set_inline_menu_set('{$menu_id}', '{$nonce}')\">";
  117.     $actions['inline hide-if-no-js'] .= __( 'Quick&nbsp;Edit' );
  118.     $actions['inline hide-if-no-js'] .= '</a>';
  119.     return $actions;
  120. }
  121. ?>

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容?你可以通过搜索你要找的内容,或者给我们留言。

已有3条评论

  1. webster
    webster : 回复

    我想做个这样的功能
    快速编辑里可以选择置顶到首页或者置顶到某分类 可以提供个思路吗

    • 阿树工作室
      阿树工作室 回复webster: 回复

      默认的“文章”自带了置顶功能,自定义文章类型,是没有置顶这个功能的。
      若是需要自己写一个置顶,那把教程里面的下拉表单,改成复选框即可。

  2. laiydesign
    laiydesign : 回复

    如何给文章添加,您这个只是给页面添加了该功能是吗?

发表评论