Легкое добавление миниатюр к записи на Wordpress

8 years ago6831Ян Александров
Темы Wordpress — HTML+CSS — Легкое добавление миниатюр к записи на WordPress

Для добавления миниатюры к записям, администратор сайта должен сделать 5 кликов, при этом перейти на страницу редактирования поста и опуститься ниже до метабокса “Изображение записи”. В обычных ситуациях, это не составляет большого труда. Однако, если нужно установить большое количество миниатюр, например, если вы редактируете товары в интернет-магазине, это может отнимать довольно много времени. Сегодня я покажу, как можно добавлять миниатюры гораздо быстрее: в 3 клика и без перехода на страницу редактирования поста.

Для реализации этой задумки мы создадим дополнительный столбец в списке записей, с помощью которого мы и будем управлять миниатюрой. Если вы не хотите заморачиваться с кодом, просто установите плагин Easy Featured Images. Именно на его основе сегодняшний пост. Сразу оговорюсь, что для корректной работы в “Настройках медиафайлов”, ширина и высота миниатюр не должны равняться 0. Если все в порядке, начнем.

Добавление нового столбца в списке записей

Воспользуемся хуком manage_(post_type)_posts_columns для добавления колонки.

add_filter( 'manage_post_posts_columns', 'efi_table_head' );

function efi_table_head( $columns ) {
	$checkbox = array_slice( $columns , 0, 1 );
	$columns = array_slice( $columns , 1 );

	$new['_post_thumbnail'] = 'Image';

	$columns = array_merge( $checkbox, $new, $columns );

	return $columns;

}

Заполняем созданную колонку

Заполнение колонки осуществляется путем навешивания на функцию хука manage_[POST_TYPE]_posts_custom_column. В каждую строку мы добавим по три элемента: отображаемая картинка (миниатюра и её копия больших размеров), поле добавления картинки, и наконец кнопка для удаления картинки. Окончательный PHP будет выглядеть так:

add_action( 'manage_post_posts_custom_column', 'efi_column_content', 10, 2 );
function efi_column_content( $column_slug, $post_id ) {

	if ( '_post_thumbnail' == $column_slug ) {

		$nonce = wp_create_nonce( "set_post_thumbnail-" . $post_id );
		$no_image = ( has_post_thumbnail( $post_id ) ) ? '' : 'no-image';

		echo "<div class='efi-thumbnail " . $no_image . "'>";
		echo "<div class='efi-images'>";

		if( has_post_thumbnail( $post_id ) ) {
			echo "<a class='efi-choose-image' data-nonce='" . $nonce . "' href='" . get_edit_post_link( $post_id ) . "'>" . get_the_post_thumbnail( $post_id, 'thumbnail' ) . '</a>';
			echo "<a class='efi-choose-image' data-nonce='" . $nonce . "' href='" . get_edit_post_link( $post_id ) . "'>" . get_the_post_thumbnail( $post_id, 'medium' ) . '</a>';
		}
		else {
			echo "<a class='efi-choose-image' data-nonce='" . $nonce . "' href='" . get_edit_post_link( $post_id ) . "'> <i class='dashicons dashicons-plus'></i> <br> add image</a>";
		}

		echo '</div>';

		echo "<a href='" . get_edit_post_link( $post_id ) . "' data-nonce='" . $nonce . "' class='efi-remove-image'><i class='dashicons dashicons-no'></i> remove</a>";

		echo '</div>';


	}

}

Если вы внимательно присмотретесь к коду, может возникнуть вопрос: если мы будем работать с JavaScript, зачем оборачивать миниатюры в ссылку? Очень просто. Если что-то пойдет не так, эти ссылки перенаправляют пользователей на страницу редактирования поста. Такое может случиться, если с JS выключен (довольно большая редкость) или если другой плагин конфликтует с нашим JavaScript.

Оформление колонки

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

add_action( 'admin_enqueue_scripts', 'efi_enqueue_assets' );

function efi_enqueue_assets( $page ) {

    if ( 'edit.php' != $page ) {
        return;
    }

    wp_enqueue_style( 'efi_styles', plugin_dir_url( __FILE__ ) . '/style.css' );
    
}
После добавления стилей, список записей будет иметь примерно такой вид

Параметр admin_enqueue_scripts позволяет нам выводить наши стили только на страницах административной части WordPress. Содержимое подключаемого файла:

/* Maximum column width */
.manage-column.column-_post_thumbnail {
    width:72px;
}

/* Makes sure large images can be laid over the table */
._post_thumbnail.column-_post_thumbnail {
    overflow:visible;
}

/* Makes sure that absolutely positioned elements within are aligned to this element */
.efi-thumbnail {
    position:relative;
}

/* Maximum thumbnail size */
.efi-thumbnail .attachment-thumbnail {
    max-width:72px;
    max-height:72px;
}

/* Positioning of the medium size image display */
.efi-thumbnail .attachment-medium {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

/* Show larger image when hovering over the smaller one */
.efi-images:hover .attachment-medium {
    display:block;
    z-index:4000;
}

/* No image styling */
.efi-thumbnail.no-image a.efi-choose-image {
    display:block;
    height:70px;
    width:70px;
    border:1px dashed #aaa;
    font-size:11px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    color:#aaa;
    -webkit-transition: all .1s ease-in 0;
    transition: all .1s ease-in 0;
}
.efi-thumbnail.no-image a.efi-choose-image:hover {
    color:#0074a2;
    border-color: #0074a2;
}
.efi-thumbnail.no-image a.efi-choose-image .dashicons {
    transition:none;
    -webkit-transition: none;
}


/* Image removal link style */
.efi-remove-image {
    font-size:11px;
    color: #aaa;
}
.efi-remove-image .dashicons {
    font-size:10px;
    width:10px;
    height:10px;
    line-height:11px;
    vertical-align:middle;
}
.efi-remove-image:hover {
    color: #aa0000;
}
.efi-thumbnail.no-image .efi-remove-image{
    display:none;
}

Подключаем JavaScript

Для добавления картинок без перезагрузки, нам необходимо не только прописать путь js файлу, но и указать где располагается наш admin-ajax.php файл.

function efi_enqueue_assets( $page ) {

    if ( 'edit.php' != $page ) {
        return;
    }

    wp_enqueue_style( 'efi_styles', plugin_dir_url( __FILE__ ) . '/style.css' );
	wp_enqueue_script( 'efi_scripts', plugin_dir_url( __FILE__ ) . '/scripts.js' );
	wp_enqueue_media();

	wp_localize_script( 'efi_scripts', 'efi_strings', array(
		'browse_images' => __( 'Browse Or Upload An Image', 'easy-featured-images' ),
		'select_image' =>  __( 'Set featured image', 'easy-featured-images' ),
		'ajaxurl' =>  admin_url( 'admin-ajax.php' )
	));

}

Содержимое скрипта:

(function( $ ) {
	'use strict';

	var file_frame, post_id, nonce, efi_thumbnail;

    jQuery(document).on('click', '.efi-choose-image', function( event ){
        post_id = $(this).parents('tr:first').attr('id').replace( 'post-', '' );
        nonce = $(this).data('nonce');
        efi_thumbnail = $(this).parents( '.efi-thumbnail' );

		if ( undefined !== file_frame ) {
			file_frame.open();
			return false;
		}

		file_frame = wp.media.frames.file_frame = wp.media({
			title:    efi_strings.browse_images,
			button:   {
				text: efi_strings.select_image
			},
			multiple: false
		});

		file_frame.on( 'select', function() {
			var image_data = file_frame.state().get( 'selection' ).first().toJSON();
            var thumbnail = image_data.sizes.thumbnail;
            var medium = image_data.sizes.medium;

            if( efi_thumbnail.hasClass( 'no-image' ) ) {
                efi_thumbnail.removeClass( 'no-image' );

                var link = efi_thumbnail.find('a.efi-choose-image');
                link.html('').clone().insertAfter(link);

                var thumbnail_image = $('<img>').attr({
                    width: thumbnail.width,
                    height : thumbnail.height,
                    class : 'attachment-thumbnail wp-post-image',
                    src : thumbnail.url,
                    alt : image_data.alt
                })

                var medium_image = $('<img>').attr({
                    width: medium.width,
                    height : medium.height,
                    class : 'attachment-medium wp-post-image',
                    src : medium.url,
                    alt : image_data.alt
                })

                efi_thumbnail.find('a.efi-choose-image:first').html( thumbnail_image );
                efi_thumbnail.find('a.efi-choose-image:last').html( medium_image );
                efi_thumbnail.find('a.efi-choose-image').wrapAll( "<div class='efi-images' />");

            }
            else {
                efi_thumbnail.find('.attachment-thumbnail').attr( 'src', thumbnail.url );
                efi_thumbnail.find('.attachment-medium').attr( 'src', medium.url );
            }

            $.post( efi_strings.ajaxurl, {
                _ajax_nonce: nonce,
                post_id : post_id,
                thumbnail_id : image_data.id,
                action: 'set-post-thumbnail'
            })


		});

		// Now display the actual file_frame
		file_frame.open();

        return false;
    });

// удаляем картинку из блока миниатюры
$(document).on( 'click', '.efi-remove-image', function() {
    efi_thumbnail = $(this).parents( '.efi-thumbnail' );
    nonce = $(this).data('nonce');
    var url = $(this).attr('href');
    var post_id = parseInt( efi_thumbnail.parents('tr:first').attr('id').replace( 'post-', '' ) );

    efi_thumbnail.addClass( 'no-image' );

    var choose_image = $('<a>').attr({
        href : url,
        'data-nonce' : nonce,
        class : 'efi-choose-image'
    }).html("<i class='dashicons dashicons-plus'></i> <br> " + efi_strings.add_image + "</a>")

    efi_thumbnail.find('.efi-images').html(choose_image);

    $.post( efi_strings.ajaxurl, {
        _ajax_nonce: nonce,
        post_id : post_id,
        thumbnail_id : -1,
        action: 'set-post-thumbnail'
    })

    return false;
})

})( jQuery );

На этом пожалуй все. Если вы все сделали верно, теперь вы сможете легко и быстро добавлять-удалять миниатюры записей.

Источник

1 comment to post “Легкое добавление миниатюр к записи на WordPress”
  • Ян Александров
    Артем18 Jul 2018 16:14

    Добрый день, а как добавить кастомные типи записей? Ну что бы в них тоже была возможность вывода картинки

    Reply
Leave a Reply

B I PHP JS

Made with ❤ by CodyShop