/ Сайтостроение / Wordpress / Продвинутые metabox

Продвинутые metabox

21.08.2016

943

3

Существую станданртные 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 — слаг метаполя

Также в данном решении стоит декодер тэгов — htmlspecialchars_decode. При выводе поля он будет выводить тэги в виде текста. По сути он не нужен, т.к. мы используем редактор wysiwyg с целью форматирования. Необходимо убрать в двух местах htmlspecialchars_decode и htmlspecialchars и их круглые скобки (вокруг $content и вокруг $_POST[‘answer‘])

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">&times;</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;
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');

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Создание metabox’а

Создание metabox’а

Metabox — это произвольное поле реализованное в виде специальной формы (оболочка для PostMeta). Создание metabox’а самостоятельно — лучшая альтернатива плагину Advanced custom fields, особенно для релизации доп.полей в плагинах. Создание Читать далее »

Загрузчик изображений для таксономии

Загрузчик изображений для таксономии

Создаем загрузчик изображений для термина таксономии. Данный пост содержит чистый метод создания metabox для термина таксономии. Есть более универсальный метод добавления изображений терминам, но нижеописанный способ может стать дополнительным, когда Читать далее »

/
Metabox woocommerce

Metabox woocommerce

У плагина woocommerce есть набор дополнительных полей при редактировании товара. При необходимости можно в группы полей WC добавить свои произвольные metabox. Должно получится так: Создание и отображение metabox Первый экшн Читать далее »

/

Добавить комментарий

3 комментария

  1. Тимур

     
    Также в данном решении стоит декодер тэгов — htmlspecialchars_decode. При выводе поля он будет выводить тэги в виде текста. По сути он не нужен, т.к. мы используем редактор wysiwyg с целью форматирования. Необходимо убрать в двух местах htmlspecialchars_decode и htmlspecialchars и их круглые скобки (вокруг $content и вокруг $_POST[‘answer‘])
    до задней части тела ниже спины эти «правки». Никакие параграфы редактор не ставит. Первый отлично работает, а вторая бредятина совсем не отлично. Уж простите за грубость, я весь день ищу нужное, но везде только вижу копии статей.
    У тебя единственного эта сноска написана, но и она особо не помогает. Например, если переключить вид редактора в текст, поставить теги, на странице работает формат, стоит переключить (а это однозначно необходимо и не может быть оспорено), как все теги перестраиваются в строчные отступы, но это лишь в редакторе самом видно становится, в странице всё в одну строку и ни одного параграфа нет, вообще.
    Нет, тема моя, поэтому там в принципе не может быть чего-то, что бы отменяло это форматирование. Говорю же, стандартный редактор работает, а добавляемый не хочет.
    Если будет какой-то совет дельный…я уже устал искать.
    Благодарю за возможные ответы….или молчание, тоже ответ.

    1. Alexandr
      Alexandr

      По природе своей ленив, каюсь — грешен. Многие решения нахожу в сети, но применяю их лично и проблемные (для себя) моменты описываю здесь. Обязательно обновлю код (в т.ч. на сайте). В ближайшие пару недель буду сильно занят. Но после этого в планах более тщательно разобраться в этой теме. Еще раз спасибо за инфу и коммент!

  2. Тимур

    А вот я нашёл кое-что:
    $settings = array('wpautop'=>0,'textarea_name'=>'MyInputNAME'));
    Оказалось надо было просто действительно «отменить» это нелепое преобразование строчных пробелов и всё заработало ))
    Может кому-то пригодится ))
    Ну всё, теперь я счастлив как слон с шариками =)))) можно идти отдыхать )))

Продвинутые metabox
Поисковая оптимизация сайта
Рекомендации для васПоисковая оптимизация сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.