Вопрос или проблема
Я создал пользовательский виджет, который будет показывать спортивные счета. Счета добавляются через пользовательский пост. Когда я открываю новый пользовательский пост (счеты), я ввожу названия команд, счет, очки. Теперь я хочу добавить опцию отображения логотипов команд рядом с их названиями. За последние пару дней каждый учебник, который я нашел здесь и в других местах, не сработал. У меня нет идеи, почему, так как я новичок во всем этом. Во многих случаях появляется кнопка загрузки, но всплывающее окно для выбора/загрузки изображения не появляется. Теперь я мог бы опубликовать как минимум 10 ссылок, где я нашел эти коды, но я считаю, что есть лимит на количество ссылок. Так что, например, это самый распространенный учебник, который я нашел.
Последний. Теперь в этом случае я не уверен в нескольких вещах.
add_action('admin_enqueue_scripts', 'my_admin_scripts');
function my_admin_scripts() {
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
wp_enqueue_media();
wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
wp_enqueue_script('my-admin-js');
}
}
Что именно означает ‘my_plugin_page’, я полагаю, я делаю что-то неправильно, и поэтому загрузчик не появляется. Что мне нужно добавить вместо этого, есть примеры?
Внутри моей темы я создал новую папку под названием my-plugin, внутри которой я добавил my-admin.js со скриптом из приведенной выше ссылки.
Я также пробовал другой способ, не вызывая скрипт с помощью get_template_directory_uri().
Любая помощь, пожалуйста.
Во-первых, не рекомендуется использовать константу WP_PLUGIN_URL, вместо этого используйте функцию plugins_url().
Второе, это не будет работать, когда вы помещаете файлы в тему. Вы должны поместить необходимую папку и файл в плагин, если хотите использовать эту константу или функцию.
Убедитесь, что вы указали правильный путь и что ваш JS файл загружается правильно.
wp_enque_media() используется для загрузки необходимых файлов и настроек, необходимых для загрузчика медиа в админской области WP. Однако вам следует добавить необходимый код, специфичный для вашего загрузчика, т.е. код для загрузчика на странице вашего пользовательского поста.
Ссылка, которую вы показали, содержит достаточный код для реализации загрузчика медиа WP в плагине/теме.
Проверять my-plugin-page не обязательно. Это добавлено только для того, чтобы убедиться, что ваш скрипт загружается только на нужной странице, а не на всех страницах. Это также будет применимо, когда вы добавите админское меню. В вашем случае, я полагаю, вы хотите загрузчик на странице редактирования вашего пользовательского типа поста, так что вы можете проверить это вместо этого. Или для начала просто уберите это условие, добавьте необходимый код в ваш my-admin.js и HTML в один из файлов вашего плагина, согласно учебнику, приведенному в вашей ссылке.
Ответ или решение
Для того чтобы интегрировать загрузчик изображений в ваш собственный виджет на платформе WordPress, необходимо выполнить несколько шагов. Ниже вы найдете детальное руководство, которое поможет вам добавить возможность загрузки логотипов команд рядом с их названиями в вашем виджете для отображения спортивных результатов.
Шаг 1: Регистрация скриптов и стилей
Первым делом, убедитесь, что вы правильно зарегистрировали и подключили необходимые скрипты для загрузчика медиафайлов. Это делается с помощью функции wp_enqueue_media().
add_action('admin_enqueue_scripts', 'my_admin_scripts');
function my_admin_scripts($hook) {
// Проверьте, находитесь ли вы на странице редактирования вашего пользовательского типа постов
$screen = get_current_screen();
if ($screen->post_type == 'your_custom_post_type') {
// Подключаем скрипты для загрузки медиафайлов
wp_enqueue_media();
// Регистрация вашего скрипта
wp_register_script('my-admin-js', plugins_url('/my-plugin/my-admin.js'), array('jquery'), null, true);
wp_enqueue_script('my-admin-js');
}
}Шаг 2: Создание JavaScript-файла
В вашем my-admin.js файле вам нужно добавить код, который будет обрабатывать загрузку изображения:
jQuery(document).ready(function($) {
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
// Если уже существует загрузчик, то просто откройте его
if (mediaUploader) {
mediaUploader.open();
return;
}
// Создаем новый загрузчик
mediaUploader = wp.media({
title: 'Выберите изображение',
button: {
text: 'Выбрать изображение'
},
multiple: false // Можно выбрать только одно изображение
});
// Обработка выбора медиафайла
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#image-preview').attr('src', attachment.url); // Предварительный просмотр изображения
$('#image_id').val(attachment.id); // Сохраняем ID изображения в скрытом поле
});
mediaUploader.open();
});
});Шаг 3: Добавление HTML-разметки
В файле редактирования вашего пользовательского типа постов создайте HTML-разметку для кнопки загрузки и области для отображения изображения:
<label for="team_logo">Логотип команды:</label>
<input type="hidden" id="image_id" name="team_logo" value="" />
<img id="image-preview" src="" style="max-width: 100px; display: none;" />
<button id="upload_image_button" class="button">Загрузить логотип</button>Шаг 4: Сохранение загруженного изображения
Вам нужно будет обработать сохранение значения ID загруженного изображения при обновлении или сохранении пользовательского поста. Добавьте следующий код в файл вашего плагина:
add_action('save_post', 'save_custom_meta');
function save_custom_meta($post_id) {
if (array_key_exists('team_logo', $_POST)) {
update_post_meta($post_id, 'team_logo', $_POST['team_logo']);
}
}Заключение
Теперь у вас есть полное решение для интеграции загрузчика изображений в ваш собственный виджет для WordPress. Убедитесь, что все пути и идентификаторы элементов HTML соответствуют вашим требованиям. Также проверьте, что ваши скрипты загружаются только на страницах, где они необходимы, что улучшит производительность вашего админ-панели. Если что-то не работает, проверьте консоль браузера на наличие ошибок и убедитесь в правильности всех путей.
Следуя этим шагам, вы можете легко добавить функциональность загрузчика изображений в свои пользовательские посты и виджеты на платформе WordPress.