wordpress留言板_扩展WordPress仪表板中的快速编辑操作

wordpress留言板

The inbuilt ‘Quick Edit’ feature in the administration screens in WordPress gives you a simple and quick way to change the content of your posts, without the need to jump into the full post editor.

WordPress管理屏幕中内置的“快速编辑”功能为您提供了一种简单快捷的方法来更改帖子的内容，而无需跳入完整的帖子编辑器。

By default WordPress includes several fields to speed up your editing process, such as the title, slug, taxonomies and metadata like the publish date and post status selectors. However if you’ve extended your post types then you’ll find you can’t change these values here. That’s what we’re going to look at now.

默认情况下，WordPress包含几个字段来加快您的编辑过程，例如标题，子词，分类法和元数据(例如发布日期和发布状态选择器)。 但是，如果您扩展了帖子类型，则会发现您无法在此处更改这些值。 这就是我们现在要看的。

为我们的功能创建一个插件 (Creating a Plugin for Our Functionality)

It’s good practice to create plugins when we’re modifying functionality (you can find a guide for beginners if you’re just starting out with plugin development). Start by creating a class that will act as our plugins entry point. There are several moving parts to get this up and running, so start with a basic structure.

在我们修改功能时创建插件是一个好习惯( 如果您只是从插件开发开始，可以找到适合初学者的指南 )。 首先创建一个将充当我们插件入口点的类。 有几个移动部件来启动和运行它，因此从一个基本结构开始。

/*
Plugin Name: Extend Quick Edit
Plugin URI: https://elevate360.com.au/plugins/extend-quick-edit
Description: Extends the quick-edit interface to display additional post meta
Version: 1.0.0
Author: Simon Codrington
Author URI: http://simoncodrington.com.au
Text Domain: post-quick-edit-extension
Domain Path: /languages
*/

class el_extend_quick_edit{

    private static $instance = null;

    public function __construct(){

        add_action('manage_post_posts_columns', array($this, 'add_custom_admin_column'), 10, 1); //add custom column
        add_action('manage_posts_custom_column', array($this, 'manage_custom_admin_columns'), 10, 2); //populate column
        add_action('quick_edit_custom_box', array($this, 'display_quick_edit_custom'), 10, 2); //output form elements for quickedit interface
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_scripts_and_styles')); //enqueue admin script (for prepopulting fields with JS)
        add_action('add_meta_boxes', array($this, 'add_metabox_to_posts'), 10, 2); //add metabox to posts to add our meta info
        add_action('save_post', array($this, 'save_post'), 10, 1); //call on save, to update metainfo attached to our metabox

    }

    //adds a new metabox on our single post edit screen
    public function add_metabox_to_posts($post_type, $post){

    }
    //metabox output function, displays our fields, prepopulating as needed
    public function display_metabox_output($post){

    }
    //enqueue admin js to pre-populate the quick-edit fields
    public function enqueue_admin_scripts_and_styles(){

    }
    //Display our custom content on the quick-edit interface, no values can be pre-populated (all done in JS)
    public function display_quick_edit_custom($column){

    }
    //add a custom column to hold our data
    public function add_custom_admin_column($columns){

    }
    //customise the data for our custom column, it's here we pull in meatdata info
    public function manage_custom_admin_columns($column_name, $post_id){

    }
    //saving meta info (used for both traditional and quick-edit saves)
    public function save_post($post_id){

    }
    //gets singleton instance
    public static function getInstance(){
        if(is_null(self::$instance)){
            self::$instance = new self();
        }
        return self::$instance;
    }


}
$el_extend_quick_edit = el_extend_quick_edit::getInstance();

添加自定义元字段 (Adding Custom Meta-fields)

Since we eventually want to extend the Quick Edit screen, we need to start by adding a new meta field to our posts. We’ll add a custom metabox and then output a few different types of form elements:

由于我们最终想要扩展“快速编辑”屏幕，因此我们需要首先在帖子中添加一个新的meta字段。 我们将添加一个自定义的metabox，然后输出几种不同类型的表单元素：

• A checkbox to determine if our post will be ‘featured’, which we could then use somewhere in our theme for unique styling.
  一个复选框，用于确定我们的帖子是否将被“精选”，然后我们可以在主题的某个地方使用它来进行独特的样式设置。
• A list of numbers to be used as the posts ‘rating’. This will be displayed as a select element. This could be used by the theme to limit post output to certain rankings and higher
  用作帖子“评分”的数字列表。 这将显示为选择元素。 主题可以使用它来将帖子输出限制为某些排名或更高
• A simple text input to hold the ‘subtitle’ for our post, somewhat like a trainee that could be displayed below the posts main title.
  一个简单的文本输入，用于保留我们帖子的“字幕”，有点像受训者，可以显示在帖子主标题下方。

If you’re new to adding custom meta fields to your post types, feel free to read up on our recent article where we looked at adding custom metaboxes/fields.

如果您不熟悉在帖子类型中添加自定义元字段，请随时阅读我们最近发表的文章，其中介绍了如何添加自定义元框/字段 。

//adds a new metabox on our single post edit screen
public function add_metabox_to_posts($post_type, $post){

    add_meta_box(
        'additional-meta-box',
        __('Additional Info', 'post-quick-edit-extension'),
        array($this, 'display_metabox_output'),
        'post',
        'side',
        'default'
    );
}

Now that we have our metabox we need to add our fields. For each of our different fields we need to output the markup and pre-select/populate values if we already have them set.

现在我们有了元框，我们需要添加字段。 对于我们每个不同的字段，我们都需要输出标记并预先选择/填充值(如果我们已经设置了它们)。

//metabox output function, displays our fields, prepopulating as needed
public function display_metabox_output($post){

    $html = '';
    wp_nonce_field('post_metadata', 'post_metadata_field');

    $post_featured = get_post_meta($post->ID, 'post_featured', true);
    $post_rating = get_post_meta($post->ID, 'post_rating', true);
    $post_subtitle = get_post_meta($post->ID, 'post_subtitle', true);

    //Featured post (radio)
    $html .= '<p>';
        $html .= '<p><strong>Featured Post?</strong></p>';
        $html .= '<label for="post_featured_no">';
            if($post_featured == 'no' || empty($post_featured)){
                $html .= '<input type="radio" checked name="post_featured" id="post_featured_no" value="no"/>';
            }else{
                $html .= '<input type="radio" name="post_featured" id="post_featured_no" value="no"/>';
            }
        $html .= ' No</label>';
        $html .= '</br>';
        $html .= '<label for="post_featured_yes">';
            if($post_featured == 'yes'){
                $html .= '<input type="radio" checked name="post_featured" id="post_featured_yes" value="yes"/>';
            }else{
                $html .= '<input type="radio" name="post_featured" id="post_featured_yes" value="yes"/>';
            }
        $html .= ' Yes</label>';
    $html .= '</p>';

    //Internal Rating (select)
    $html .= '<p>';
        $html .= '<p>';
            $html .= '<label for="post_rating"><strong>Post Rating</strong></label>';
        $html .= '</p>';
        $html .= '<select name="post_rating" id="post_rating" value="' . $post_rating .'" class="widefat">';
            $html .= '<option value="1" ' . (($post_rating == '1') ? 'selected' : '') . '>1</option>';
            $html .= '<option value="2" ' . (($post_rating == '2') ? 'selected' : '') . '>2</option>';
            $html .= '<option value="3" ' . (($post_rating == '3') ? 'selected' : '') . '>3</option>';
            $html .= '<option value="4" ' . (($post_rating == '4') ? 'selected' : '') . '>4</option>';
            $html .= '<option value="5" ' . (($post_rating == '5') ? 'selected' : '') . '>5</option>';
        $html .= '</select>';

    $html .= '</p>';


    //Subtitle (text)
    $html .= '<p>';
        $html .= '<p>';
            $html .= '<label for="post_subtitle"><strong>Subtitle</strong></label>';
        $html .= '</p>';
        $html .= '<input type="text" name="post_subtitle" id="post_subtitle" value="' . $post_subtitle .'" class="widefat"/>';
    $html .= '</p>';


    echo $html;

}

Most of our output is fairly self explanatory, we’re outputting our form controls after we display our nonce field and then populating our various values. All of this content will be displayed inside of your metabox when editing your post and should look similar to the image below.

我们的大部分输出都是很容易解释的，在显示现时字段然后填充各种值之后，我们将输出表单控件。 编辑帖子时，所有这些内容都将显示在您的metabox内，外观应类似于下图。

保存我们的新元数据 (Saving Our New Metadata)

Since we’re adding new fields we need to hook into the save_post hook so we can update our data. This information is shown on our custom columns and eventually used to pre-populate our Quick Edit controls. Copy the following into the save_post method of the plugin.

由于我们要添加新字段，因此我们需要挂钩到save_post挂钩，以便我们可以更新数据。 此信息显示在我们的自定义列中，并最终用于预先填充我们的快速编辑控件。 将以下内容复制到插件的save_post方法中。

//saving meta info (used for both traditional and quick-edit saves)
public function save_post($post_id){

    $post_type = get_post_type($post_id);

    if($post_type == 'post'){

        //check nonce set
        if(!isset($_POST['post_metadata_field'])){
            return false;
        }

        //verify nonce
        if(!wp_verify_nonce($_POST['post_metadata_field'], 'post_metadata')){
            return false;
        }


        //if not autosaving
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return false;
        }

        //all good to save
        $featured_post = isset($_POST['post_featured']) ? sanitize_text_field($_POST['post_featured']) : '';
        $post_rating = isset($_POST['post_rating']) ? sanitize_text_field($_POST['post_rating']) : '';
        $post_subtitle = isset($_POST['post_subtitle']) ? sanitize_text_field($_POST['post_subtitle']) : '';

        update_post_meta($post_id, 'post_featured', $featured_post);
        update_post_meta($post_id, 'post_rating', $post_rating);
        update_post_meta($post_id, 'post_subtitle', $post_subtitle);
    }   

}

The first part of our function checks that our nonce is set and that it’s valid. This nonce is outputted at the top of our metabox an acts as a simple security method. We collect our values, sanitize them and save them with update_post_meta.

函数的第一部分检查是否设置了现时值并且有效。 此随机数在我们的元框的顶部输出，这是一种简单的安全方法。 我们收集我们的值，对其进行净化处理，并使用update_post_meta保存它们。

添加自定义列 (Adding Custom Columns)

To add custom output to the Quick Edit screen you need to have at least one custom column in your post manage screen; there is no way around this as the hook we use later to output our content only fires when there’s a custom admin column.

要将自定义输出添加到“快速编辑”屏幕，您需要在帖子管理屏幕中至少有一个自定义列； 这是没有办法的，因为我们稍后使用的用于输出内容的挂钩仅在存在自定义admin列时才会触发。

These columns are important as it’s here we will be outputting our posts current value for our metadata (as the Quick Edit output function doesn’t have the ability to pre-populate our values). Copy the following into your plugin.

这些列很重要，因为在这里我们将为元数据输出帖子的当前值(因为“快速编辑”输出功能无法预先填充值)。 将以下内容复制到您的插件中。

//add a custom column to hold our data
public function add_custom_admin_column($columns){
    $new_columns = array();

    $new_columns['post_featured'] = 'Featured?';
    $new_columns['post_rating'] = 'Rating';
    $new_columns['post_subtitle'] = 'Subtitle';

    return array_merge($columns, $new_columns);
}

We hook into the manage_post_posts_columnsfilter to add our own custom columns to the post content type. For our example we’re adding three columns, but you could add as many or as few as you like.

我们连接到manage_post_posts_columns过滤器，以将自己的自定义列添加到post内容类型。 对于我们的示例，我们要添加三列，但您可以根据需要添加任意数量的列。

填充我们的自定义列以显示当前值 (Populating our Custom Columns to Display Current Values)

Now that we have our custom columns we need to populate them with values from our post. We hook into the manage_posts_custom_column action and compare the column_name variable so we can populate our column.

现在我们有了自定义列，我们需要使用帖子中的值填充它们。 我们连接到manage_posts_custom_column操作并比较column_name变量，以便我们可以填充列。

An important part here is that for each of our meta values we’re wrapping them in a div with an id such as post_featured_{$post_id}. This is intentional so that later on when we need to get the current meta values and pre-populate our fields outputted in the Quick Edit screen.

这里重要的一点是，对于我们的每个元值，我们都将它们包装在具有诸如post_featured_{$post_id}类的id的div 。 这是有意的，以便以后需要获取当前元值并预填充在“快速编辑”屏幕中输出的字段时使用。

//customise the data for our custom column, it's here we pull in metadata info for each post. These will be referred to in our JavaScript file for pre-populating our quick-edit screen
public function manage_custom_admin_columns($column_name, $post_id){

    $html = '';

    if($column_name == 'post_featured'){
        $post_featured = get_post_meta($post_id, 'post_featured', true);

        $html .= '<div id="post_featured_' . $post_id . '">';
        if($post_featured == 'no' || empty($post_featured)){
            $html .= 'no';
        }else if ($post_featured == 'yes'){
            $html .= 'yes';
        }
        $html .= '</div>';
    }
    else if($column_name == 'post_rating'){
        $post_rating = get_post_meta($post_id, 'post_rating', true);

        $html .= '<div id="post_rating_' . $post_id . '">';
            $html .= $post_rating;
        $html .= '</div>';
    }
    else if($column_name == 'post_subtitle'){
        $post_subtitle = get_post_meta($post_id, 'post_subtitle', true);

        $html .= '<div id="post_subtitle_' . $post_id . '">';
            $html .= $post_subtitle;
        $html .= '</div>';
    }

    echo $html;
}

自定义快速编辑界面 (Customizing the Quick Edit Interface)

To customize this section we need to hook into the quick_edit_custom_box action. This action is triggered for each of our posts in the admin interface, rendering all of the default quick actions and giving us access to add our own custom ones.

要自定义此部分，我们需要加入quick_edit_custom_box操作。 系统会在管理界面中为我们的每个帖子触发此操作，呈现所有默认的快速操作，并允许我们添加自己的自定义操作。

This function is called once for every custom column registered. It’s here we hook into to extend the interface.

每个注册的自定义列都将调用一次此函数。 在这里，我们可以扩展接口。

//Display our custom content on the quick-edit interface, no values can be pre-populated (all done in JavaScript)
public function display_quick_edit_custom($column){

    $html = '';
    wp_nonce_field('post_metadata', 'post_metadata_field');

    //output post featured checkbox
    if($column == 'post_featured'){
        $html .= '<fieldset class="inline-edit-col-left clear">';
            $html .= '<div class="inline-edit-group wp-clearfix">';
                $html .= '<label class="alignleft" for="post_featured_no">';
                    $html .= '<input type="radio" name="post_featured" id="post_featured_no" value="no"/>';
                $html .= '<span class="checkbox-title">Post Not Featured</span></label>';
                $html .= '<label class="alignleft" for="post_featured_yes">';
                    $html .= '<input type="radio" name="post_featured" id="post_featured_yes" value="yes"/>';
                $html .= '<span class="checkbox-title">Post Featured</span></label>';

            $html .= '</div>';
        $html .= '</fieldset>';
    }
    //output post rating select field
    else if($column == 'post_rating'){     
        $html .= '<fieldset class="inline-edit-col-center ">';
            $html .= '<div class="inline-edit-group wp-clearfix">';
                $html .= '<label class="alignleft" for="post_rating">Post Rating</label>';
                $html .= '<select name="post_rating" id="post_rating" value="">';
                    $html .= '<option value="1">1</option>';
                    $html .= '<option value="2">2</option>';
                    $html .= '<option value="3">3</option>';
                    $html .= '<option value="4">4</option>';
                    $html .= '<option value="5">5</option>';
                $html .= '</select>';
            $html .= '</div>';
        $html .= '</fieldset>';    
    }
    //output post subtitle text field 
    else if($column == 'post_subtitle'){
        $html .= '<fieldset class="inline-edit-col-right ">';
            $html .= '<div class="inline-edit-group wp-clearfix">';
                $html .= '<label class="alignleft" for="post_rating">Post Subtitle</label>';
                $html .= '<input type="text" name="post_subtitle" id="post_subtitle" value="" />';
            $html .= '</div>';
        $html .= '</fieldset>';    
    }

    echo $html;
}

The overall process for outputting these fields is similar to what we did for our metabox. We want to display our featured checkbox, rating select field and text input controls. The classes used on our elements are the same ones that WordPress uses for their layout. You will need to experiment with them if you’re after a particular style, but using inline-edit-col-left, inline-edit-col-center and inline-edit-col-right will align your layout for you.

输出这些字段的总体过程类似于我们对metabox所做的过程。 我们要显示精选复选框，评级选择字段和文本输入控件。 我们的元素上使用的类与WordPress用于其布局的类相同。 如果您追求特定的风格，则需要对它们进行试验，但是使用inline-edit-col-left ， inline-edit-col-center和inline-edit-col-right可以使您的布局更符合您的需求。

使我们的Admin JavaScript文件入队 (Enqueuing Our Admin JavaScript File)

The Quick Edit interface isn’t created when WordPress outputs the post admin screen. When the user presses the ‘edit’ button, WordPress will dynamically create the edit controls, populating the title, slug, author and other information.

当WordPress输出后管理屏幕时，不会创建快速编辑界面。 当用户按下“编辑”按钮时，WordPress将动态创建编辑控件，填充标题，文档，作者和其他信息。

Since this is all dynamic we can’t just output our metadata in PHP, we need to collect our values using JavaScript.

由于这是动态的，我们不能只用PHP输出元数据，我们需要使用JavaScript收集值。

Add the following function to include our admin only JavaScript file. I’ve added it in the base directory of the plugin but you could change up the structure if you wanted it in a dedicated JavaScript folder.

添加以下功能以包含仅管理员JavaScript文件。 我已将其添加到插件的基本目录中，但是如果需要，可以在专用JavaScript文件夹中更改结构。

public function enqueue_admin_scripts_and_styles(){
    wp_enqueue_script('quick-edit-script', plugin_dir_url(__FILE__) . '/post-quick-edit-script.js', array('jquery','inline-edit-post' ));
}

用值动态填充快速编辑屏幕 (Dynamically Populating the Quick Edit Screen with Values)

The quick_edit_custom_box action we used before outputs all of the form controls for the Quick Edit control. However as mentioned before, this control is made dynamically with JavaScript so it’s not possible to pre-populate our meta fields automatically.

我们在输出快速编辑控件的所有表单控件之前使用的quick_edit_custom_box操作。 但是，如前所述，此控件是使用JavaScript动态创建的，因此无法自动预填充我们的元字段。

There are two methods you can use to get your values:

您可以使用两种方法获取值：

1. Create a custom method to get your information: Hook onto the edit action and trigger an Ajax call to a registered function. To get this to work you can pass on the ID of the post from the Quick Edit interface and then use get_post_meta function to retrieve and return your values.

   创建一个自定义方法来获取您的信息 ：钩住edit动作并触发对已注册函数的Ajax调用。 为了使它起作用，您可以从“快速编辑”界面传递帖子的ID，然后使用get_post_meta函数检索并返回您的值。

2. Leverage WordPress’s existing functionality: Copy the existing WordPress JavaScript function and extend it to collect your custom values.

   利用WordPress的现有功能 ：复制现有的WordPress JavaScript功能并将其扩展以收集您的自定义值。

The first method is good, but requires a bit more leg work with a return trip to the server for more information. Our second option is a bit easier, we can hook into the JavaScript function used to render the Quick Edit box, and then extend it to collect our metadata. That is the route we’ll be taking.

第一种方法不错，但是需要更多的腿部工作才能返回服务器以获取更多信息。 我们的第二个选项要简单一些，我们可以加入用于渲染“快速编辑”框JavaScript函数，然后对其进行扩展以收集我们的元数据。 这就是我们要走的路线。

Open up your new enqueued JavaScript file and add the following. We’ll take a look at how it all works shortly.

打开新的排队JavaScript文件并添加以下内容。 我们将在短期内看一下它们的工作方式。

/*
 * Post Bulk Edit Script
 * Hooks into the inline post editor functionality to extend it to our custom metadata
 */

jQuery(document).ready(function($){

    //Prepopulating our quick-edit post info
    var $inline_editor = inlineEditPost.edit;
    inlineEditPost.edit = function(id){

        //call old copy 
        $inline_editor.apply( this, arguments);

        //our custom functionality below
        var post_id = 0;
        if( typeof(id) == 'object'){
            post_id = parseInt(this.getId(id));
        }

        //if we have our post
        if(post_id != 0){

            //find our row
            $row = $('#edit-' + post_id);

            //post featured
            $post_featured = $('#post_featured_' + post_id);
            post_featured_value = $post_featured.text(); 
            if(post_featured_value == 'yes'){
                $row.find('#post_featured_yes').val(post_featured_value).attr('checked', true);
            }else{
                $row.find('#post_featured_no').val(post_featured_value).attr('checked', true);
            }

            //post rating
            $post_rating = $('#post_rating_' + post_id);
            $post_rating_value = $post_rating.text();
            $row.find('#post_rating').val($post_rating_value);
            $row.find('#post_rating').children('[value="' + $post_rating_value + '"]').attr('selected', true);

            //post subtitle
            $post_subtitle= $('#post_subtitle_' + post_id);
            post_subtitle_value = $post_subtitle.text();
            $row.find('#post_subtitle').val(post_subtitle_value);


        }

    }

});

We start by getting the inline editor object with inlineEditPost.edit. We keep this copy and replace it’s functionality. Inside of our new function we call the old function using $inline_editor.apply( this, arguments);, this ensures that our default WordPress functionality for creating the Quick Edit box is preserved.

我们首先使用inlineEditPost.edit获得内联编辑器对象。 我们保留此副本并替换其功能。 在新函数内部，我们使用$inline_editor.apply( this, arguments);调用旧函数$inline_editor.apply( this, arguments); ，这可以确保保留用于创建“快速编辑”框的默认WordPress功能。

It’s at this point now that we can trigger our functionality. We ensure that the id variable passed to the function is an object and then get the post_id from it.

至此，我们可以触发功能了。 我们确保传递给函数的id变量是一个object ，然后从中获取post_id 。

We use this post_id to look for our custom admin columns where our metadata is saved. For example if we’re editing post 2100 we can look for it’s post rating by finding the column with the ID ofpost_rating_2100.

我们使用此post_id查找保存元数据的自定义管理列。 例如，如果我们正在编辑帖子2100则可以通过找到ID为post_rating_2100的列来查找帖子的评分。

We find all of our values and then pre-populate our form controls accordingly. If you had more fields you could use the same logic to extend it further.

我们找到所有的值，然后相应地预先填充表单控件。 如果您有更多字段，则可以使用相同的逻辑将其进一步扩展。

When the user clicks the update button an Ajax request will go off and trigger a save post call; this will trigger our save_post function we hooked previously, taking care of the updating of our new meta-values.

当用户单击更新按钮时，Ajax请求将关闭并触发保存后调用； 这将触发我们save_post钩住的save_post函数，并负责更新新的元值。

包装全部 (Wrapping It All Up)

There were several steps in getting this all sorted, but as you can see in the following image it was all worth it. Your quick edit interface now shows your metadata and you can easily update it without having to open your post

使这些全部排序有几个步骤，但是正如您在下图中看到的，这都是值得的。 现在，您的快速编辑界面将显示您的元数据，您无需打开帖子即可轻松进行更新

The interface itself is a great tool and if you’re attaching several different types of meta-fields to your post, then extending them to the Quick Edit interface is a great idea. Managing your posts without needing to enter each one manually will be a great time-saver and making administering your site much easier.

界面本身是一个很棒的工具，如果您要在帖子中附加几种不同类型的元字段，那么将它们扩展到快速编辑界面是一个好主意。 管理您的帖子而无需手动输入每个帖子将节省大量时间，并使您的网站管理更加轻松。

You can output any type of information you want in the Quick Edit field, so you can take what we’ve done here and extend it further to provide an even more customized solution.

您可以在“快速编辑”字段中输出所需的任何类型的信息，因此您可以采用我们在这里所做的工作，并将其进一步扩展以提供一个更加自定义的解决方案。

翻译自: https://www.sitepoint.com/extend-the-quick-edit-actions-in-the-wordpress-dashboard/

wordpress留言板