Несколько миниатюр для записи на Wordpress, или как создать галерею без плагина

8 years ago53387Ян Александров

Сегодня хотел поделиться простым решением для вывода нескольких миниатюр к записи, странице или произвольным типам записей. Иногда это необходимо для создания галерей интерне-магазина, каталога товаров или других задач. Но, в начале, хотел привести ряд решений от других разработчиков:

Вариант 1: Использование стороннего плагина Multiple Post Thumbnails. Тоже неплохой вариант. Удобно, просто, быстро. Минус данного варианта – вы сможете добавить только второе изображение для поста. Конечно, можно слегка отредактировать код и появится возможность добавлять и 3, и 4 дополнительные миниатюры, однако невозможно добавить сразу несколько.

Вариант 2: Ссылка уже не актуальна, поэтому удаляю.

Вариант 3: Идея приведенного ниже решения, собственно, не моя, а взята из одного всеми забытого плагина. Были с ним небольшие проблемы (если оставалась одна миниатюра, не хотел её удалять). В общем, причесал, подправил, и выкладываю. Описывать особо ничего не буду, вся необходимая информация в комментариях к коду. Его нужно добавить в файл functions.php

P.S.: Для добавления нескольких картинок нужно удерживая клавишу CTRL выделять необходимые миниатюры.
P.S.: Данный вариант выводит галерею через шорткод. Думаю, самостоятельно оформить его красиво – уже дело техники.

Шаг 1: Создаем необходимые подключения в админке WordPress

Для начала, создайте javascript файл custom_script.js и разместите его в папке js вашей темы Содержимое файла:

jQuery(document).ready(function(jQuery){
	var _custom_media = true,
			_orig_send_attachment = wp.media.editor.send.attachment;

	jQuery('#thumbnail_image_upload').click(function(e) {
		var send_attachment_bkp = wp.media.editor.send.attachment;
		var button = jQuery(this);
		var id = button.attr('id').replace('_button', '');
		_custom_media = true;
		wp.media.editor.send.attachment = function(props, attachment){
			if ( _custom_media ) {
			console.log(attachment);
			 
					//jQuery('#'+id).val(attachment.url);
			
			if(jQuery('#image_upload_val').val() == '')
				jQuery('#image_upload_val').val(attachment.id);
			else
			{
				oldVal = jQuery('#image_upload_val').val();
					jQuery('#image_upload_val').val(oldVal+','+attachment.id);
			}
			
			var src_str = attachment.url;
			jQuery('#image_upload_val').before('<img width=66 height=66 src='+src_str+' data-id='+attachment.id+' class=attachment-66x66 />');
			//jQuery('#post').submit();
			} else {
				return _orig_send_attachment.apply( this, [props, attachment] );
			};
		}

		wp.media.editor.open(button);
		return false;
	});

	jQuery('.add_media').on('click', function(){
		_custom_media = false;
	});
	
	jQuery('#thumbnail_sidebar img').live('click',function(){
		valArr = jQuery('#image_upload_val').val().split(',');
		console.log(valArr);
		alert(jQuery(this).attr('data-id'));
		var index = valArr.indexOf(jQuery(this).attr('data-id'));
		if (index > -1) 
		{
			valArr.splice(index, 1);
			jQuery(this).remove();
		}
		console.log(valArr);
		jQuery('#image_upload_val').val(valArr.toString());
	});
});

После создания скрипта, подключим его в административной панели.

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	admin_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js');
}

Шаг 2: Создаем метабокс

/* Создаем метабокс с возможностью добавления картинок */
add_action( 'add_meta_boxes', 'thumbnail_add_custom_box' );
function thumbnail_add_custom_box() {
	$post_name = 'page';  // указываем тип записи, можно post, page или custom_post_type
	add_meta_box('thumbnail_sidebar', 'Other product images', 'thumbnail_render_images', $post_name, 'side', 'default');
}

Выводим содержимое блока с миниатюрками в созданном поле

/* Выводим содержимое блока с миниатюрками в созданном поле */
function thumbnail_render_images() {
global $wpdb;
global $post;
	// Используем nonce для проверки
	wp_nonce_field( plugin_basename( __FILE__ ), 'thumbnail_noncename' );

	// Поле для ввода данных
	// Используем get_post_meta, чтобы получить существующее значение из базы данных и использовать значение для формы
	$value = get_post_meta($post->ID, '_multi_img_array', true);
	$temp = explode(",", $value);
 
	if ($temp) {
		foreach ( $temp as $t_val ) {
		
		$image_attributes = wp_get_attachment_image_src( $t_val , array(66,66) );
		echo '<img src="'.$image_attributes[0].'" width="'.$image_attributes[1].'" height="'.$image_attributes[2].'" data-id="'.$t_val.'">';
		}
	}
	else
	{
		//echo wp_get_attachment_image_src( $value , array(66,66) );
		$image_attributes = wp_get_attachment_image_src( $value , array(66,66) );
		echo '<img src="'.$image_attributes[0].'" width="'.$image_attributes[1].'" height="'.$image_attributes[2].'" data-id="'.$value.'">';
	}
    //echo '<input type="text" id="thumbnail_image_upload" name="thumbnail_image_upload" value="'.esc_attr($value).'" size="25" />';
	echo "<style type='text/css'>
		#thumbnail_sidebar {padding: 10px;} #thumbnail_sidebar .inside{padding: 5px; border: 2px dashed #e5e5e5;} #thumbnail_sidebar .inside img{margin:5px; border: 2px solid #e5e5e5;} #thumbnail_sidebar .inside img:hover{cursor: pointer; border: 2px solid #ff0000;} #thumbnail_image_upload{width: 100%;}
	</style>";
	echo "<input type='hidden' name='image_upload_val' id='image_upload_val' value='".$value."' />";
	echo "<button class='button button-primary' id='thumbnail_image_upload'>Upload Images</button>";
	// скрипт можно вывести в отдельный js файл и подключить в админке, но для удобства привожу его сразу здесь
	echo "<script type='text/javascript'> 

jQuery(document).ready(function(jQuery){
	var _custom_media = true,
			_orig_send_attachment = wp.media.editor.send.attachment;

	jQuery('#thumbnail_image_upload').click(function(e) {
		var send_attachment_bkp = wp.media.editor.send.attachment;
		var button = jQuery(this);
		var id = button.attr('id').replace('_button', '');
		_custom_media = true;
		wp.media.editor.send.attachment = function(props, attachment){
			if ( _custom_media ) {
			console.log(attachment);
			 
					//jQuery('#'+id).val(attachment.url);
			
			if(jQuery('#image_upload_val').val() == '')
				jQuery('#image_upload_val').val(attachment.id);
			else
			{
				oldVal = jQuery('#image_upload_val').val();
					jQuery('#image_upload_val').val(oldVal+','+attachment.id);
			}
			
			var src_str = attachment.url;
			jQuery('#image_upload_val').before('<img width=66 height=66 src='+src_str+' data-id='+attachment.id+' class=attachment-66x66 />');
			//jQuery('#post').submit();
			} else {
				return _orig_send_attachment.apply( this, [props, attachment] );
			};
		}

		wp.media.editor.open(button);
		return false;
	});

	jQuery('.add_media').on('click', function(){
		_custom_media = false;
	});
	
	jQuery('#thumbnail_sidebar img').live('click',function(){
		valArr = jQuery('#image_upload_val').val().split(',');
		console.log(valArr);
		alert(jQuery(this).attr('data-id'));
		var index = valArr.indexOf(jQuery(this).attr('data-id'));
		if (index > -1) 
		{
			valArr.splice(index, 1);
			jQuery(this).remove();
		}
		console.log(valArr);
		jQuery('#image_upload_val').val(valArr.toString());
	});
});
</script>";	
}

Когда мы сохраняем запись, сохраняем данные произвольного поля:

add_action( 'wp_insert_post', 'thumbnail_insert_postdata' );
function thumbnail_insert_postdata( $post_id ) {
global $wpdb;
	// First we need to check if the current user is authorised to do this action. 
	
		if ( ! current_user_can( 'edit_page', $post_id ) )
				return;
 
		if ( ! current_user_can( 'edit_post', $post_id ) )
				return;
	

	// Secondly we need to check if the user intended to change this value.
	if ( ! isset( $_POST['thumbnail_noncename'] ) || ! wp_verify_nonce( $_POST['thumbnail_noncename'], plugin_basename( __FILE__ ) ) )
			return;

	// Теперь мы можем сохранить значение поля в базе данных

	// если сохраняем произвольно поле, get post_ID
	$post_ID = $_POST['post_ID'];
	// санирование введенных пользователем данных
	// $mydata = sanitize_text_field( $_POST['myplugin_priceCode'] );
	global $mydata;
	$mydata = $_POST['image_upload_val'];
	// Do something with $mydata 
	// either using 
	
	// если значение пустое, то удаляем содержимое из бд
	if($mydata == '') {
		delete_post_meta($post_ID, '_multi_img_array', $mydata);
	}
	
	if($mydata) {
		$cur_data = get_post_meta($post_ID, '_multi_img_array', true);
		if(!(empty($cur_data)))
		{
			//$cur_data .=",".$mydata;
			update_post_meta($post_ID, '_multi_img_array', $mydata);
		}
		else
		{
			add_post_meta($post_id, '_multi_img_array', $mydata, true);
		}
	}
	 
}

Итак, если вы все правильно сделали, дело осталось за малым: необходимо вывести нашу галерею во фронтэнд. Давайте сделаем это через шорткод.

/* Вывод миниатюр через шорткод [product-gallery] или [product-gallery post_id="postid"] */
// Добавляем шорткод
function product_gallery_shortcode( $atts ) {
	// Аттрибуты
	extract(shortcode_atts( array('post_id' =&gt; get_the_ID()), $atts));
	
	$value = get_post_meta($post_id, '_multi_img_array', true);
	if($value)
	{
		$temp = explode(",", $value);
?>
<div id="product-gallery"></div>
<?php } } add_shortcode( 'product-gallery', 'product_gallery_shortcode' );

Теперь можно вывести миниатюры с помощью шорткода [ product-gallery ].

7 comments to post “"Несколько миниатюр для записи на WordPress, или как создать галерею без плагина"”

Артем14 Jul 2018 18:37
Спасибо за урок, только возник вопрос, как сделать несколько загрузчиков для миниатюры?
Если например хочу сделать не квадрат, а горизонтальную фотку? Вот как тут http://prntscr.com/k6f832
И я увидел, что у вас на gif картинке, на странице, изображение записи тоже gif, как это сделать? насколько я знаю wp режет миниатюры на несколько форматов
Reply
- Yan AlexandrovAuthor14 Jul 2018 23:17
  Что касается первого вопроса, то не понял его. Размерами изображений можно управлять с помощью функции add_image_size: делать квадратными или прямоугольными с вертикальным или горизонтальным расположением.
  Что касается gif анимации, то для работы необходимо вывести полноразмерную картинку. Об этом я как-то писал здесь: https://codyshop.ru/upravlenie-gif-animatsiey-na-js/
  Reply
  - Артем20 Jul 2018 16:37
    То есть если я хочу поставить gif на миниатюру, нужно делать как в вашей статье?
DustupSendh21019 Sep 2019 19:27
Здравствуйте! прощу прощения просто незнала где спросить. Скажите пожалуйста, как сделать такой вид комментариев как у Вас на сайте!?
Reply
Сергей20 Mar 2020 17:53
Здравствуйте.
Есть задача вывести несколько миниатюр поста в слайдер. При исользовании вашего способа выходит ошибка:
Warning: call_user_func() expects parameter 1 to be a valid callback, function ‘thumbnail_render_images’ not found or invalid function name in /home/sbm5815852/combezza.com/docs/wp-admin/includes/template.php on line 1310
Reply
Сергей14 Apr 2021 18:58
Здравствуйте
Вместо изображения выводит число
Почему так?
Reply
Илья7 Jul 2021 13:52
Спасибо за код. Это хорошая находка для моих проектов!
Есть “опечатка”. Надо этот кусок:
extract(shortcode_atts( array(‘post_id’ => get_the_ID()), $atts));
Заменить на:
extract(shortcode_atts( array(‘post_id’ => get_the_ID()), $atts));
Reply