! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета

Здравствуйте ! (извините за рекламу...)
написано: — 
отредактировано: 2019-02-01
издатель:  в теме: Контент, шапка site: кодингS вопрос в тему
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Как добавить миниатюру в раздел всех записей — в админку: пара вариантов

На днях, на одну из статей этого блога один из комментаторов (вероятно, в плане рекламы) поделился ссылкой на сайт, в одной из статей которого рассказывалось о том, как добавить колонку миниатюры в раздел «Все записи» в админке (ссылка ниже)?

Меня тема заинтересовала… я перешёл, посмотрел… решение понравилось (часть кода плагина): достаточно простое в реализации — я этот код протестировал, кое-что подправил, добавил… снабдил полезными комментариями… и решил поделиться со своими читателями, может кому пригодится. Надеюсь, комментатор не обидится))

В статье два варианта: 1 — миниатюру прямо в разделе «все записи» возможно редактировать: удалять, изменять… и 2: добавляется колонка «картинка» только в качестве информации. Ну, ладно: подробнее давайте…


 

 

 

 

вот на этой статье как добавитьинформационные колонки в админку
Добавляем информационные колонки в админку: id рубрик, меток, постов, страниц
информационные колонки в админку: id рубрик, меток, постов, страниц комментатор поделился своим открытием (там и ссылка).

 

 

 

 

к оглавлению $

добавляем миниатюру в раздел записи — в админку

 

 

 

…с возможностью редактирования: то есть сможем прямо в разделе всех записей удалить… изменить картинку соответствующей статьи через «родной» загрузчик WP.

 

 

 

как добавить миниатюру

 

 

 

шаг: 1

 

создаём такой thumbnail.php файл в ядре темы;

 

 

вот код файла: (напоминаю: в коде я добавил кое-какие настройки и снабдил всё это важными комментариями — размер миниатюр и т.п.)

 

 

открыть код для thumbnail.php

<?php
/**
* WPSL_Thumb Class
* This class is responsible for creating a new column for editing a thumbnail from the general list of posts
* Этот класс отвечает за создание нового столбца для редактирования эскиза из общего списка записей
* @author Daniel Pataki
* @forked Yan Alexandrov
*/

if ( ! defined( 'ABSPATH' ) ) exit;

if ( !is_admin() ) return;

new WPSL_Thumb;
class WPSL_Thumb {
/** Class Constructor */
public function __construct() {
add_action( 'init', array( $this, 'admin_list_modifications' ), 99 ) ;
add_filter( 'admin_head', array( $this, 'add_styles' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
add_action( 'admin_print_footer_scripts', array( $this, 'add_scripts' ) );
}
/** Post types */
public function post_types() {
//$post_types = get_post_types( array( 'public' => true ) );
$post_types = array( 'post', 'product' );
return $post_types;
}
/**
* Modify Admin Lists - Изменение Списков Администраторов
* This function adds the custom columns and column - функция добавляет пользовательские строки и столбцы
* content to the admin tables. Normally we would not - содержимое таблиц администратора. Нормально мы ненужно сделать это внутри функции, подключенной к init.
* need to do this inside a function hooked to init.
*/
public function admin_list_modifications() {
$post_types = $this->post_types();
foreach( $post_types as $post_type ) {
add_filter( 'manage_edit-' . $post_type . '_columns', array( $this, 'table_head' ), 20 );
add_action( 'manage_' . $post_type . '_posts_custom_column', array( $this, 'column_content' ), 10, 2 );
}
}
/**
* Enqueue Assets
* Connect a standard media library to add a thumbnail through it - Подключаем стандартную медиатеку, чтобы добавить миниатюру через нее
* @param string $page The name of the page we're on
*/
public function enqueue_assets( $page ) {
if ( 'edit.php' != $page ) {
return;
}
wp_enqueue_media();
}
/**
* Custom Column Headers
* This function adds the custom column we need. It is added to the beginning
* by splitting the original array - Эта функция добавляет требуемый пользовательский столбец. тот добавляется в самое начало путем разбиения исходного массива...
* @param array $columns The columns contained in the post list
* @return array The final array of columns to use
*/
public function table_head( $columns ) {
$new['_post_thumbnail'] = '<i class="dashicons dashicons-format-gallery"></i><span class="dashicons-gallerys">миниатюра</span>'; // заменим иконку столбца
$columns = array_merge( array_slice( $columns , 0, 1 ), $new, array_slice( $columns , 1 ) );
return $columns;
}
/**
* Fill column with thumbnail
* This function is responsible for generating the content of our columns. It
* outputs the image, the links that launch the media uploader and the remove
* image link - а эта функция отвечает за генерацию содержимого наших столбцов. Она выводит изображение, ссылки, запускающие загрузчик мультимедиа, и ссылку на удаление изображения
* @param $column string
*/
public function 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';
// задаём размер миниатюры
$fill = has_post_thumbnail( $post_id ) ? '<img width="73" height="73" class="attachment-thumbnail wp-post-image" src="' . get_the_post_thumbnail_url( $post_id, 'thumbnail' ) . '" alt="">' : '<i class="dashicons dashicons-plus"></i>';
?>
<div class="wpsl-thumb <?php echo $no_image; ?>" style="opacity: 0;">
<div class="image-box">
<a class="choose-image" data-nonce="<?php echo $nonce; ?>" href="<?php echo get_edit_post_link( $post_id ); ?>"><?php echo $fill; ?></a>
</div>
<a href="<?php echo get_edit_post_link( $post_id ); ?>" data-nonce="<?php echo $nonce; ?>" class="remove-image"><i class="dashicons dashicons-no"></i></a>
</div>
<?
}
}
// Add scripts only on product list
public function add_scripts() {
if ( current_user_can( 'edit_posts' ) && in_array( get_current_screen()->post_type, $this->post_types() ) ) {
?>
<script>
(function( $ ) {
'use strict';
// global wp, console
var file_frame, post_id, nonce, wpsl_thumb;

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

/* If an instance of file_frame already exists, then we can open it rather than creating a new instance - если file_frame уже существует, то мы просто открываем его, а не создаём новый */
if ( undefined !== file_frame ) {
file_frame.open();
return false;
}
/**
* If we're this far, then an instance does not exist, so we need to
* create our own - Если file_frame не существует - создаём свой собственный.
* Here, use the wp.media library to define the settings of the Media
* Uploader implementation by setting the title and the upload button
* text. We're also not allowing the user to select more than one image - используйте wp.медиа-библиотека для определения настроек реализации загрузчика мультимедиа путем установки заголовка и текста
* кнопки загрузки. Запрещаем пользователю выбирать более одного изображения
*/
file_frame = wp.media.frames.file_frame = wp.media({
title: '<?php _e( 'Browse or upload an image', 'plugin_name' ); ?>',
button: {
text: '<?php _e( 'Set thumbnail', 'plugin_name' ); ?>'
},
multiple: false
});
/* Setup an event handler for what to do when an image has been selected - Настройка обработчика событий для того, что делать, когда изображение было добавлено */
file_frame.on( 'select', function() {
var image_data = file_frame.state().get( 'selection' ).first().toJSON();
var thumbnail = image_data.sizes.thumbnail;

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

var link = wpsl_thumb.find('a.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
})

wpsl_thumb.find('a.choose-image:first').html( thumbnail_image );
} else {
wpsl_thumb.find('.attachment-thumbnail').attr( 'src', thumbnail.url );
}

$.post( 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', '.remove-image', function() {
wpsl_thumb = $(this).parents( '.wpsl-thumb' );
nonce = $(this).data('nonce');
var url = $(this).attr('href');
var post_id = parseInt( wpsl_thumb.parents('tr:first').attr('id').replace( 'post-', '' ) );

wpsl_thumb.addClass( 'no-image' );

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

wpsl_thumb.find('.image-box').html(choose_image);

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

})( jQuery );
</script>
<?php
}
}
/** Add scripts only on product list */
public function add_styles() {
if ( current_user_can( 'edit_posts' ) && in_array( get_current_screen()->post_type, $this->post_types() ) ) {
echo '<style>';
echo '
.manage-column.column-_post_thumbnail{width:73px;/*43px*/text-align:center;}
._post_thumbnail.column-_post_thumbnail{overflow:visible;}
.wpsl-thumb{position:relative;opacity:1 !important;}
.wpsl-thumb:hover .remove-image{display:block;}
.wpsl-thumb .image-box a{float:left;}
.wpsl-thumb .image-box a img {max-width:73px;/*43px*/max-height:73px;/*43px*/float:left;}
.wpsl-thumb.no-image a.choose-image{display:block;height:73px;/*43px*/width:73px;/*43px*/border:1px dashed #e1e1e1;text-align:center;background-color:#fff;padding:9px 0;box-sizing:border-box;color:#e1e1e1;
-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;transition:all .1s ease-in;}
.wpsl-thumb.no-image a.choose-image:hover {color:#0074a2;border-color:#0074a2;}
.wpsl-thumb.no-image a.choose-image .dashicons {transition:none;-webkit-transition:none;font-size:30px;width:73px;/*30px*/height:73px;/*30px*/}
.wpsl-thumb.no-image .remove-image{display:none;}
.wpsl-thumb .remove-image{position:absolute;right:0;top:0;font-size:11px;color:#aaa;display:none;background-color:#ff0000;}
.wpsl-thumb .remove-image:hover{background-color:#da0909;}
.wpsl-thumb .remove-image .dashicons{font-size:22px;/*10px*/width:26px;/*16px*/height:26px;/*16px*/float:left;line-height:22px;/*16px*/color:#fff;}
.dashicons-gallerys{display:none;}
';
echo '</style>';
}
}
}

 

 

 

…помещаем созданный файл в какую-то папку активного шаблона и подключаем документ в functions.php

 

…а ещё, как логичный вариант, возможно организовать всё это дело в отдельный собственный плагин — как это запросто сделать, описано в этом посте: как создать свой плагинкак создать свой плагин
Создаём свой плагин — например, отдельный файл функций для сайта my-functions.php — весьма и весьма целесообразнее для организации сайта
?

 

или:

 

как разбить functions.phpfunctions.php — разбить на отдельные функциональные части
functions.php — как разбить на отдельные функциональные части, файлы: очень удобно в плане наполнения файла различными кодами!
на отдельные функциональные части, файлы.?.

 

 

 

Подключать в теме созданный файл (файлы вообще) нужно так:

 

 

//теме:
require_once get_template_directory() . '/имя-папки/thumbnail.php';
//Или в плагине:
//require( plugin_dir_path( __FILE__ ) . 'имя/thumbnail.php' );

 

 

 

 

к оглавлению $

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

 

 

 

 

Для тех админов, которые желают просто добавить колонку «Миниатюра» в раздел все записи в админке, чтобы тут же видеть, что за картинка добавлена для страницы, записи..?

 

 

миниатюры будут просто отображаться в разделах записи и страницы! — без возможности редактирования! Только для информации о картинке (миниатюре) записи, странице…

 

 

 

 

миниатюра

 

 

 

добавим к себе ф фалы темы такой код: код абсолютно рабочий, в принципе не требует никаких настроек — как только код будет добавлен в файлы своего сайта — всё ту же заработает — в разделах записей, страниц появится новая колона «картинка».

В коде даны комментарии к вариантам вывода, например the_post_thumbnail

 

 

 

/* колонка "миниатюры" в списке записей и страниц */
// GET FEATURED IMAGE - подключаем изображение...
function ats_get_featured_image($post_ID) {
$post_thumbnail_id = get_post_thumbnail_id($post_ID);
if ($post_thumbnail_id) {
$post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');
return $post_thumbnail_img[0];
} }
add_filter('manage_posts_columns', 'ats_columns_head');
add_action('manage_posts_custom_column', 'ats_columns_content', 10, 2); // раздел ЗАПИСИ
add_filter('manage_pages_columns', 'ats_columns_head');
add_action('manage_pages_custom_column', 'ats_columns_content', 10, 2); // раздел СТРАНИЦЫ
// ADD NEW COLUMN - новая колонка
function ats_columns_head($defaults) {
$defaults['featured_image'] = 'картинка'; // Featured Image
return $defaults;
}

// SHOW THE FEATURED IMAGE - ПОКАЗАТЬ ИЗОБРАЖЕНИЕ
function ats_columns_content($column_name, $post_ID) {
if ($column_name == 'featured_image') {
$post_featured_image = ats_get_featured_image($post_ID);
if ($post_featured_image) {
//echo '<img src="' . $post_featured_image . '" />';
echo the_post_thumbnail(array(125,80)); // вариант подключения картинки thumbnail - задаём размеры картинки
} } }
/* колонка "миниатюры" в списке записей и страниц */

 

 

 

 

 

к оглавлению $

миниатюры в разделе записи, страницы в админке — итог

 

 

 

 

в финале работ, если выбрали какой-то из описанных выше способов и внедрили нужный код к себе в файлы сайта, в админке — в разделе записи, страницы (опция «Настройки экрана»)

 

 

добавить миниатюру

 

 

…получится так, как на картинке ниже: появятся новые чекбоксы…

 

 

 

настройки миниатюры

 

 

 

 

Спасибо, за внимание… надеюсь кому-то пригодится этот мой рассказ.

 

 


...город веб мастеров Михалика.ru © - запросто с WordPress

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы...разработка...


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Условные теги woocommerce — наиболее полная подборка, пояснения   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Что такое Open Graph? как подключить протокол Open Graph к WordPress   Как перевести сайт на https — сертификат ssl — шифрование   Подборка полезного кода (сниппеты) для работы магазина на WooCommerce   Условные теги WordPress: наиболее полная подборка, пояснения   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Как самостоятельно установить в Notepad++ плагин Compare   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Создаём плагин — отдельный файл функций для сайта my-functions.php   Подключение jQuery библиотеки от CDN Google — рационально!..   Подборка вариантов Redirect 301 — на все случаи жизни сайта   Убираем циклическую ссылку h1 логотипа на главной странице
↔ перетаскивайте ленту ↔

смотреть ещё статьи в теме Контент, шапка site: кодингS
меточная навигация:


Комментарии © 0 к статье: Как добавить миниатюру в раздел всех записей — в админку: пара вариантов

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
? основная линейка услугSkype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! вопросы сюдаSkype онлайн