Meta Boxes在WordPress中的应用比较常见，今天带来的教程是在后台文章添加一个Meta Boxes，用来输出相关文章

第一步，创建Meta Boxes

add_action( 'admin_menu', 'rudr_metabox_for_select2' );
add_action( 'save_post', 'rudr_save_metaboxdata', 10, 2 );

function rudr_metabox_for_select2() {
	add_meta_box( 'rudr_select2', '相关文章', 'rudr_display_select2_metabox', 'post', 'normal', 'default' );
}

function rudr_display_select2_metabox( $post_object ) {
	$html = '';
	$appended_posts = get_post_meta( $post_object->ID, 'rudr_select2_posts',true );
	$html .= '<p><label for="rudr_select2_posts">文章:</label><br /><select id="rudr_select2_posts" name="rudr_select2_posts[]" multiple="multiple" style="width:99%;max-width:25em;">';
 
	if( $appended_posts ) {
		foreach( $appended_posts as $post_id ) {
			$title = get_the_title( $post_id );
			$title = ( mb_strlen( $title ) > 50 ) ? mb_substr( $title, 0, 49 ) . '...' : $title;
			$html .=  '<option value="' . $post_id . '" selected="selected">' . $title . '</option>';
		}
	}
	$html .= '</select></p>';
	echo $html;
}

function rudr_save_metaboxdata( $post_id, $post ) {
 
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id;
	if ( $post->post_type == 'post' ) {
		if( isset( $_POST['rudr_select2_posts'] ) )
			update_post_meta( $post_id, 'rudr_select2_posts', $_POST['rudr_select2_posts'] );
		else
			delete_post_meta( $post_id, 'rudr_select2_posts' );
	}
	return $post_id;
}

第二步，为Meta Boxes载入样式

add_action( 'admin_enqueue_scripts', 'rudr_select2_enqueue' );
function rudr_select2_enqueue(){
	wp_enqueue_style('select2', get_stylesheet_directory_uri() . '/app/post/select2.min.css' );
	wp_enqueue_script('select2', get_stylesheet_directory_uri() . '/app/post/select2.min.js', array('jquery') );
	wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/app/custom.js', array( 'jquery', 'select2' ) ); 
 
}

第三步，载入JQ使Meta Boxes可以正常工作（新建一个custom.js并粘贴下列代码放置主题目录中）

jQuery(function($){
	$('#rudr_select2_posts').select2({
  		ajax: {
    			url: ajaxurl, 
    			dataType: 'json',
    			delay: 250, 
    			data: function (params) {
      				return {
        				q: params.term, 
        				action: 'mishagetposts' 
      				};
    			},
    			processResults: function( data ) {
				var options = [];
				if ( data ) {
 
					$.each( data, function( index, text ) { 
						options.push( { id: text[0], text: text[1]  } );
					});
 
				}
				return {
					results: options
				};
			},
			cache: true
		},
		minimumInputLength: 3 
	});
});

第四部，使用PHP搜索已发布的文章（Ajax操作）

add_action( 'wp_ajax_mishagetposts', 'rudr_get_posts_ajax_callback' );
function rudr_get_posts_ajax_callback(){
	$return = array();
	$search_results = new WP_Query( array( 
		's'=> $_GET['q'], 
		'post_status' => 'publish',
		'ignore_sticky_posts' => 1,
		'posts_per_page' => 50 
	) );
	if( $search_results->have_posts() ) :
		while( $search_results->have_posts() ) : $search_results->the_post();	
			$title = ( mb_strlen( $search_results->post->post_title ) > 50 ) ? mb_substr( $search_results->post->post_title, 0, 49 ) . '...' : $search_results->post->post_title;
			$return[] = array( $search_results->post->ID, $title );
		endwhile;
	endif;
	echo json_encode( $return );
	die;
}

最终效果

相关文件下载
[buttons text=”下载链接” url=”https://github.com/themenote” icons=”icon-lianjie” color=”danger” border=”no” target=”yes” ]
至此教程结束，希望这个为大家带来一定的思路，有问题可以给我留言。