Thêm meta field vào trong quick edit WordPress

Đoạn code ví dụ bên dưới sẽ cho phép bạn thêm meta box cho bài viết của WordPress. Ngoài ra thì bạn cũng có thể thêm meta field vào trong khung quick edit bài viết.

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 ) {
		add_meta_box(
			'additional-meta-box',
			__( 'Additional Info', 'post-quick-edit-extension' ),
			array( $this, 'display_metabox_output' ),
			'post',
			'side',
			'default'
		);
	}

	//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;
	}

	//enqueue admin js to pre-populate the quick-edit fields
	public function enqueue_admin_scripts_and_styles() {
		wp_enqueue_script( 'quick-edit-script', HOCWP_THEME_CORE_URL . '/js/admin-quick-edit.js', array(
			'jquery',
			'inline-edit-post'
		) );
	}

	//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 ) {
		$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;
	}

	//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 );
	}

	//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 ) {
		$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;
	}

	//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;
			}

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

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

			//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 );
		}
	}

	//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();

Bên dưới là nội dung tập tin javascript để bạn thiết lập value cho từng meta field trong khu vực quick edit.

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
            var $row = $('#edit-' + post_id);

            //post featured
            var $post_featured = $('#post_featured_' + post_id);
            var 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
            var $post_rating = $('#post_rating_' + post_id);
            var $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
            var $post_subtitle = $('#post_subtitle_' + post_id);
            var post_subtitle_value = $post_subtitle.text();
            $row.find('#post_subtitle').val(post_subtitle_value);
        }
    }
});