Существую станданртные metabox: text, textarea (область текста), checkbox, radiobutton, selectbox (выпадающий список). Но помимо этих существуют более сложные metabox’ы, рассмотрим их.

Metabox редактор WYSIWYG (старый способ)

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important for CSS that this is different
define('WYSIWYG_META_KEY', 'extra-content');

add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
	add_meta_box(WYSIWYG_META_BOX_ID, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post');
}

function wysiwyg_render_meta_box(){
	global $post;

	$meta_box_id = WYSIWYG_META_BOX_ID;
	$editor_id = WYSIWYG_EDITOR_ID;

	//Add CSS & jQuery goodness to make this work like the original WYSIWYG
	echo "
	<style type='text/css'>
	#$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
	#$editor_id{width:100%;}
	#$meta_box_id #editorcontainer{background:#fff !important;}
	#$meta_box_id #$editor_id_fullscreen{display:none;}
	</style>

	<script type='text/javascript'>
	jQuery(function($){
		$('#$meta_box_id #editor-toolbar > a').click(function(){
			$('#$meta_box_id #editor-toolbar > a').removeClass('active');
			$(this).addClass('active');
		});

		if($('#$meta_box_id #edButtonPreview').hasClass('active')){
			$('#$meta_box_id #ed_toolbar').hide();
		}

		$('#$meta_box_id #edButtonPreview').click(function(){
			$('#$meta_box_id #ed_toolbar').hide();
		});

		$('#$meta_box_id #edButtonHTML').click(function(){
			$('#$meta_box_id #ed_toolbar').show();
		});
		
		//Tell the uploader to insert content into the correct WYSIWYG editor
		$('#media-buttons a').bind('click', function(){
			var customEditor = $(this).parents('#$meta_box_id');
			if(customEditor.length > 0){
				edCanvas = document.getElementById('$editor_id');
			}
			else{
				edCanvas = document.getElementById('content');
			}
		});
	});
	</script>
	";

	//Create The Editor
	$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
	the_editor($content, $editor_id);

	//Clear The Room!
	echo "<div style='clear:both; display:block;'></div>";
}

add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){

	$editor_id = WYSIWYG_EDITOR_ID;
	$meta_key = WYSIWYG_META_KEY;

	if(isset($_REQUEST[$editor_id]))
	update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);

}

Metabox редактор WYSIWYG (новый способ)

Есть более быстрый (простой, современный) способ вывести метабокс в виде редактора WYSIWYG:

add_action('admin_init', 'wysiwyg_register_custom_meta_box');
function wysiwyg_register_custom_meta_box() {
	add_meta_box('WYSIWYG_META_BOX_ID', __('Ответ', 'wysiwyg') , 'custom_wysiwyg', 'quest');
}
 
function custom_wysiwyg($post) {
	$content = get_post_meta($post->ID, 'answer', true);
	wp_editor(htmlspecialchars_decode($content) , 'answer', array(
	"media_buttons" => true
	));
}
 
function custom_wysiwyg_save_postdata($post_id) {
	if (!empty($_POST['answer'])) {
		$data = htmlspecialchars($_POST['answer']);
		update_post_meta($post_id, 'answer', $data);
	}
}
 
add_action('save_post', 'custom_wysiwyg_save_postdata');

quest — тип записи
answer — слаг метаполя

WYSIWYG_META_BOX_ID — для каждого отдельного поля должен различаться.

Вот правильные функции по созданию поля WYSIWYG. При добавлении поля необходимо поиском и заменой поменять все название specifications на актуальное, так же убрал лишние декодеры:

add_action('admin_init', 'specifications_register_custom_meta_box');
function specifications_register_custom_meta_box() {
	add_meta_box('specifications_metabox', 'Технические характеристики', 'specifications', 'post');
}
 
function specifications($post) {
	$content = get_post_meta($post->ID, 'specifications', true);
	wp_editor($content , 'specifications', array(
	"media_buttons" => true
	));
}
 
function specifications_save_postdata($post_id) {
	if (!empty($_POST['specifications'])) {
		$data = $_POST['specifications'];
		update_post_meta($post_id, 'specifications', $data);
	}
}
 
add_action('save_post', 'specifications_save_postdata');

Metabox Загрузчик Media (Media Uploader)

Данный загрузчик уже входит в вышеописанный редактор WYSIWYG, но бывают случаи, когда нужен только медиа загрузчик.
Создаем скрипт jQuery

jQuery(function($){
	//действие при нажатии на кнопку загрузки изображения
	//вы также можете привязать это действие к клику по самому изображению
	$('.upload_image_button').click(function(){
		var send_attachment_bkp = wp.media.editor.send.attachment;
		var button = $(this);
		wp.media.editor.send.attachment = function(props, attachment) {
			$(button).parent().prev().attr('src', attachment.url);
			$(button).prev().val(attachment.id);
			wp.media.editor.send.attachment = send_attachment_bkp;
		}
		wp.media.editor.open(button);
		return false;    
	});
	
	// удаляем значение произвольного поля
	// если быть точным, то мы просто удаляем value у input type="hidden"
	$('.remove_image_button').click(function(){
		var r = confirm("Уверены?");
		if (r == true) {
			var src = $(this).parent().prev().attr('data-src');
			$(this).parent().prev().attr('src', src);
			$(this).prev().prev().val('');
		}
		return false;
	});
});

Подключаем функционал

function true_include_myuploadscript() {
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
	// меняем admin.js на название созданного скрипта
	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/admin.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );

/* PHP-функция добавления полей в форму */
function true_image_uploader_field( $name, $value = '', $w = 115, $h = 90) {
	$default = get_stylesheet_directory_uri() . '/img/no-image.png';
	if( $value ) {
		$image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
		$src = $image_attributes[0];
	} else {
		$src = $default;
	}
	echo '
	<div>
	<img data-src="' . $default . '" src="' . $src . '" width="' . $w . 'px" height="' . $h . 'px" />
	<div>
	<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
	<button type="submit" class="upload_image_button button">Загрузить</button>
	<button type="submit" class="remove_image_button button">×</button>
	</div>
	</div>
	';
}

// Использование в метабоксах

function true_meta_boxes_u() {
	add_meta_box('truediv', 'Настройки', 'true_print_box_u', 'post', 'normal', 'high');
}
add_action( 'admin_menu', 'true_meta_boxes_u' );

function true_print_box_u($post) {
	if( function_exists( 'true_image_uploader_field' ) ) {
		true_image_uploader_field( 'uploader_custom', get_post_meta($post->ID, 'uploader_custom',true) );
	}
}

function true_save_box_data_u( $post_id ) {
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
	return $post_id;
	if (isset($_POST['uploader_custom'])) { update_post_meta( $post_id, 'uploader_custom', $_POST['uploader_custom']); }
	return $post_id;
}

add_action('save_post', 'true_save_box_data_u');

// Использование в настройках темы
function true_add_options_page_u() {
	if ( isset( $_GET['page'] ) == 'uplsettings' ) {
		if ( 'save' == isset( $_REQUEST['action'] ) ) {
			update_option('uploader_custom', $_REQUEST[ 'uploader_custom' ]);
			header("Location: ". site_url() ."/wp-admin/options-general.php?page=uplsettings&saved=true");
			die;
		}
	}
	add_submenu_page('options-general.php','Дополнительные настройки','Настройки','edit_posts', 'uplsettings', 'true_print_options_u');
}

function true_print_options_u() {
	if ( isset( $_REQUEST['saved'] ) ){
		echo '<div class="updated"><p>Сохранено.</p></div>';
	}
	?><div class="wrap">
	<form method="post">
	<?php
	if( function_exists( 'true_image_uploader_field' ) ) {
		true_image_uploader_field('uploader_custom', get_option('uploader_custom'));
	}
	?><p class="submit">
	<input name="save" type="submit" class="button-primary" value="Сохранить изменения" />
	<input type="hidden" name="action" value="save" />
	</p>
	</form>

	</div><?php
}

add_action('admin_menu', 'true_add_options_page_u');

Возникают небольшие косяки при загрузке файлов .pdf или других форматов не имеющих превью. В этом случае (если планируется использовать для поля такие файлы) нужно немного изменять скрипт и функцию вывода поля.

В скрипте подставлять путь до иконки файла:

$(button).parent().prev().attr('src', '/wp-content/themes/meisterwerk-2/images/pdf-2.png');

И в функции прописывать путь до иконки файла:

// Добавление полей в форму
function true_image_uploader_field_passport( $name, $value = '') {
	$default = get_stylesheet_directory_uri() . '/images/download.png';
	if( $value ) { $src = get_stylesheet_directory_uri() . '/images/pdf-2.png'; } 
	else { $src = $default;	}
	echo '
	<div>
	<img data-src="' . $default . '" src="' . $src . '" width="115" />
	<div>
	<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
	<button type="submit" class="upload_image_button button">Загрузить</button>
	<button type="submit" class="remove_image_button button">×</button>
	</div>
	</div>
	';
}

Несколько полей в одном блоке

Дублируем с уникальными названиями следующие строки

get_post_meta($post->ID, 'passport',true) );
get_post_meta($post->ID, 'certificate',true) );

if (isset($_POST['passport'])) { update_post_meta( $post_id, 'passport', $_POST['passport']); }
if (isset($_POST['certificate'])) { update_post_meta( $post_id, 'certificate', $_POST['certificate']); }

Про создание поля с выбором цвета читайте статью Поле Color Picker

Поделиться в соц. сетях: