WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Миниатюры записи через стандартный медиа интерфейс WordPress

1. Создан кастомный тип записи.

2. Необходимо реализовать следующий функционал в админке:

Прикрепление трех картинок(миниатюр) к одному посту, на сколько я понимаю необходимо смотреть в сторону:

add_meta_box

Но необходимо сделать такой же интерфейс, как у стандартной миниатюры, т.е. открытие медиафайлов, библиотеки файлов, превью картинки и т.д.

Если с таким не сталкивались, то хоть наставьте на путь истинный.

Надеюсь на отзывчивость, заранее благодарен.

0
Гость
7.5 лет назад
  • 0
    Kama9616

    Делал как-то немного не то, но очень похоже.

    Суть: Файлы прикрепленные к записи выведены в отдельный метабокс и их сразу видно. Также, можно выбрать один файл, который станет стандартной миниатюрой записи.

    Принцип работы: с помощью Kama_Post_Meta_Box создается метабокс, в котором выводятся все загруженные для записи картинки, по клику на кнопку можно как обычно загрузить картинки для записи и установить стандартную миниатюру.

    В общем, вам этот код нужно немного изменить.

    Если немного разбираетесь в программировании сможете без особых проблем под себя настроить.

    <?php
    
    // Метабокс загрузки картинок
    if(1){
    	class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box( array(
    		'id'         => '_qimages',
    		'title'      => 'Загрузка картинок и выбор основной',
    		'post_type'  => 'page',
    		'fields'     => array(
    			'_thumbnail_id' => array('callback' => '_qimages_callback' ),
    		),
    	) );
    
    	// выводит все картинки и кнопку
    	function _qimages_callback( $args, $post, $name, $val ){
    		echo '
    		<div class="wp-media-buttons" style="padding:4em 1em 1em 0; __float:none;">
    			<button type="button" id="qimages__add" class="button add_media" data-post_id="'. $post->ID .'" data-attr_name="'. $name .'"><span class="wp-media-buttons-icon"></span> Добавить/удалить картинку</button>
    		</div>';
    
    		echo ___qimages_callback_images( $post->ID, $name, $val );
    
    		if( ! defined('DOING_AJAX') )
    			add_action('admin_print_footer_scripts', '__qimages_callback_js');
    	}
    
    	function ___qimages_callback_images( $post_id, $name, $val ){
    		$out = '';
    		$out .= '<span class="images__wrap">';
    
    		$images = get_children([ 'post_parent' => $post_id ]);
    		if( ! $images )
    			$out .= 'Картинок нет';
    		else
    			foreach( $images as $img ){
    				$out .= '
    				<label style="text-align:center; float:left; margin-right:.5em;">
    					<input type="radio" name="'. esc_attr($name) .'" value="'. $img->ID .'" '. checked($img->ID, $val, 0) .'><br>
    					<img src="'. wp_get_attachment_image_url( $img->ID, 'thumbnail' ) .'" width="100" height="100" alt="">
    				</label>';
    			}
    
    		$out .= '</span>';
    
    		return $out;
    	}
    
    	function __qimages_callback_js(){
    		?>
    		<script>
    		jQuery(document).ready(function($){
    			var frame;
    
    			$('#qimages__add').click( function( event ) {
    				event.preventDefault();
    
    				var $el = $(this),
    					attr_name = $el.data('attr_name'),
    					post_id = $el.data('post_id'),
    					$imgs_cont = $el.closest('.inside').find('.images__wrap');
    
    				if( frame ){  frame.open();  return;  }
    
    				// Create the media frame.
    				frame = wp.media.frames.questImgAdd = wp.media({
    					states: [
    						new wp.media.controller.Library({
    							title:     'Загрузка изображений квеста',
    							library:   wp.media.query({ type: 'image', post_parent: post_id }),
    							multiple:  false,
    							date:      false
    						})
    					],
    
    					// submit button.
    					button: {
    						text: 'Сделать эту картинку главной', // Set the text of the button.
    					}
    				});
    
    				var selectClose_func = function(){
    					var $checked_radio = $imgs_cont.find('input[type=radio]:checked'),
    						attach_id = $checked_radio.length ? $checked_radio.val() : 0;
    
    					// если это выбор из окна
    					if( this.toString() === 'select' ){
    						var selected = frame.state().get( 'selection' ).first();
    						if( selected )  attach_id = selected.id;
    					}
    
    					var data = {
    						action: 'refresh_quest_images',
    						post_id: post_id,
    						attr_name: attr_name,
    						attach_id: attach_id
    					}
    					//console.log( data );
    					// AJAX
    					$imgs_cont.html('Обновляю...');
    					$.post( ajaxurl, data, function(resp) {
    						if( resp !== '' ){
    							$imgs_cont.html( resp );
    						}
    					});
    				};
    
    				frame.on('select', selectClose_func, 'select' );
    				frame.on('close', selectClose_func, 'close' );
    
    				// set selected
    				frame.on('open', function(){
    					var $checked = $imgs_cont.find('input[type=radio]:checked');
    					if( $checked.length )
    						frame.state().get('selection').add( wp.media.attachment($checked.val()) );
    				});
    
    				frame.open();
    			});
    
    		});
    		</script>
    		<?php
    	}
    
    	if( defined('DOING_AJAX') && DOING_AJAX ){
    		add_action('wp_ajax_refresh_quest_images', 'ajax_refresh_quest_images_cb');
    
    		function ajax_refresh_quest_images_cb(){
    			$post_id = (int) $_POST['post_id'];
    			$name    = $_POST['attr_name'];
    			$val     = (int) $_POST['attach_id'];
    
    			if( ! current_user_can('edit_post', $post_id ) ) die;
    
    			echo ___qimages_callback_images( $post_id, $name, $val );
    
    			die;
    		}
    	}
    }
    

    В результате получим такой метабокс

    Документация по скрипту медиатеки: Media Backbone Guide

    Riskful 7.5 лет назад

    Дай Бог тебе здоровья! smile Спасибо большое.

    Комментировать
  • 0
    stepan2278 www.weblancer.net/users/stepanko/?affili...

    Для Вашей задачи используйте плагин ACF: http://advancedcustomfields.com/
    или ему подобные.
    1 - вот так в настройках плагина, когда создаете новый метабокс, указать нужно тип поля "Изображение" http://screencloud.net/v/839e
    2 - также нужно указать, к какому типу записи показывать Ваш метабокс
    http://screencloud.net/v/l9C1

    Будут вопросы - пишите.

    Riskful 7.5 лет назад

    Спасибо за советы, 1) плагины принципиально не использую, да и обратился сюда, потому что завал по проектам, было бы время сам разобрался, но Kama облегчил задачу до 100%) 2) Такие простые вещи мне знакомы. Пишите если что буду помогать, хвататься не хочу но с WP давно и шарю в PHP и MySQL

    stepan 7.5 лет назад

    Хотел бы вступить в дискуссию:

    1) сайт делаете для себя или для заказчика ?

    2) сколько Вы тратите время (берете денег) на разработку сайта ? разве не проще использовать плагин ACF, который в разы ускоряет разработку ?

    3) какой ваш рейт (ставка в час) ?

    Riskful 7.5 лет назад

    1) Для заказчика

    2) на счет денег точной суммы нет, все зависит от поставленных задач, не приветствую плагины, т.к. иногда нужна гибкая кастомизация и разбираться в чужом коде плагина нет желания, да иногда изобретаю велосипеды, но это опыт и маловероятно кому то захочется взламывать именно мой велосипед. А так нашел дырку в плагине который использует несколько тыс. человек и все есть ключик к этим тысячи сайтам.

    3) Не считал, говорю очень много работы, работаю с 9.00 до 22.00 каждый день на протяжении 6 мес. Изнурительно, от жадности набрал проектов) за то урок на всю жизнь.

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация