Вопрос или проблема
Я подключил файл .js на странице “Медиа Библиотека” (upload.php). Мне нужно скрыть и изменить несколько миниатюр на странице, используя только JS (я не ищу обходные пути).
Элементы на странице отображаются с помощью Backbone, и я пока не нашел способа подключиться к этому. В любом состоянии окна/документа функция $(‘li.attachment’).hide(), например, не выполняет свою работу из-за этого.
Я пытался использовать следующий код, но пока безрезультатно, не могу даже отладить код из-за неправильного подключения:
window.wp = window.wp || {};
( function( $, _ ) {
var media = wp.media,
Attachments = media.model.Attachments,
Query = media.model.Query,
original = {};
original.AttachmentsBrowser = {
manipulate: media.view.AttachmentsBrowser.prototype.manipulate
};
_.extend( media.view.AttachmentsBrowser.prototype, {
initialize: function() {
original.AttachmentsBrowser.initialize.apply( this, arguments );
},
manipulate: function() {
var options = this.options,
self = this,
i = 1;
original.AttachmentsBrowser.manipulate.apply( this, arguments );
console.log('got here'); // Ничего не выводит
}
});
Есть идеи, как мне поступить?
Большое спасибо заранее!
Вы можете подключать файлы javascript и css для wp admin следующим образом:
function load_custom_wp_admin_style() {
wp_enqueue_script( 'script-name','js/scripts.js', array('jquery'), '3.3.5', true );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Сначала вам нужно подключить админские скрипты следующим образом:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
для загрузки вложения:
$('.upload_image_button').live('click',function() {
formfield = $('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = $('img',html).attr('src');
tb_remove();
}
Я использовал свой код, вы можете изменить его.
Спасибо
Я работаю над чем-то подобным. Я выбирал миниатюры (с помощью jQuery), как в приведенном ниже примере кода. Воспользуйтесь функцией on jQuery, чтобы подключать функции к интерактивным элементам (например, миниатюрам).
// Редактировать
Код ниже выведет ID вложения в вашем консоли.
(function ($) {
'use strict';
// Ждем загрузки окна
$(window).load(function () {
// Выполняем функцию 'checkImageSelection' после нажатия на .thumbnail
$('.attachments-browser').on('click', '.thumbnail', checkImageSelection);
// Функция для проверки выбранного изображения
function checkImageSelection() {
// Получаем ID изображения
var imageID = $(this).parents('.attachment').attr('data-id');
// Выводим ID изображения в консоль
console.log(imageID);
}
});
})(jQuery);
Ответ или решение
Чтобы добавить JavaScript в область администрирования WordPress, а именно, в библиотеку медиа, необходимо учитывать, что многие элементы на этой странице рендерятся с использованием Backbone.js. Это предполагает, что обычные методы, такие как использование jQuery для манипуляций с элементами, могут не сработать, так как DOM-элементы могут динамически создаваться и удаляться.
Вот пошаговое руководство по подключению и манипулированию элементами в библиотеке медиа с использованием JavaScript:
1. Подключение вашего скрипта
Сначала убедитесь, что вы корректно подключили свой JavaScript-файл. Для этого используй функцию admin_enqueue_scripts. Пример кода:
function load_custom_wp_admin_scripts() {
// Подключаем библиотеку медиа
wp_enqueue_media();
// Подключаем ваш скрипт
wp_enqueue_script('custom-media-script', get_template_directory_uri() . '/js/custom-media-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_scripts');2. Использование Backbone для манипуляции с элементами
Чтобы взаимодействовать с компонентами, созданными с помощью Backbone.js, вам нужно отслеживать события и переопределять методы, связанные с моделью или представлением медиа. Вот пример кода, который покажет, как можно это сделать:
(function($) {
'use strict';
// Проверяем, что необходимая библиотека готова
$(document).ready(function() {
var mediaView = wp.media.view.AttachmentsBrowser;
// Переопределяем метод "manipulate"
mediaView.prototype.manipulate = function() {
// Вызываем оригинальную функцию
mediaView.prototype.manipulate.apply(this, arguments);
// Здесь мы можем скрыть или изменить элементы
// Например, скрытие всех миниатюр с классом "example-class"
this.$el.find('li.attachment.example-class').hide();
};
// Создадим экземпляр AttachmentsBrowser, чтобы подключить изменения
var attachmentsBrowser = new mediaView({
// ваши настройки здесь
});
});
})(jQuery);3. Активное использование событий
Чтобы отслеживать клики по миниатюрам и реагировать на них, вы можете использовать метод .on() jQuery, что позволит вам динамически подключать обработчики событий:
$(document).on('click', '.attachments-browser .thumbnail', function() {
var $thumbnail = $(this);
var imageID = $thumbnail.closest('.attachment').data('id');
console.log(imageID); // выводим ID в консоль
});4. Параметры и настройки
Не забудьте передать необходимые параметры в свой экземпляр AttachmentsBrowser, если они необходимы. Это могут быть такие параметры, как количество отображаемых элементов, ограничения на типы загружаемых медиа и т.д.
Заключение
Этот подход позволит вам эффективно манипулировать миниатюрами в медиа библиотеке WordPress, обеспечивая стабильную работу с элементами, созданными на основе Backbone.js. Убедитесь, что у вас нет конфликтов с другими подключенными скриптами и что вы тестируете свою реализацию в различных браузерах для обеспечения кроссбраузерной совместимости.