В настройках этой страницы я хотел бы добавить кнопку, которая позволит мне открыть медиа-библиотеку WordPress и выбрать изображение из нее, после чего получить URL-адрес выбранного изображения и атрибута alt .
Сначала вам нужно будет зарегистрировать скрипты медиафайлов WordPress и собственный скрипт js
function my_enqueue_media_lib_uploader() { //Core media script wp_enqueue_media(); // Your custom js file wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') ); wp_enqueue_script( 'media-lib-uploader-js' ); } add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');
Затем скажем, что у вас есть эта разметка на странице параметров: кнопка загрузки и ввод текста для сохранения выбранного URL-адреса изображения
<form method="post"> <input id="image-url" type="text" name="image" /> <input id="upload-button" type="button" class="button" value="Upload Image" /> <input type="submit" value="Submit" /> </form>
Вам нужно добавить этот код javascript, чтобы вызвать всплывающее окно загрузчика
jQuery(document).ready(function($){ var mediaUploader; $('#upload-button').click(function(e) { e.preventDefault(); // If the uploader object has already been created, reopen the dialog if (mediaUploader) { mediaUploader.open(); return; } // Extend the wp.media object mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Choose Image', button: { text: 'Choose Image' }, multiple: false }); // When a file is selected, grab the URL and set it as the text field's value mediaUploader.on('select', function() { attachment = mediaUploader.state().get('selection').first().toJSON(); $('#image-url').val(attachment.url); }); // Open the uploader dialog mediaUploader.open(); }); });
После того, как изображение будет выбрано, ваш URL-адрес изображения будет содержать URL-адрес и будет сохранен в форме submit.