Вызов media библиотеки в плагине, нужно добавить изображение или файл в плагине, для этого вызываем библиотеку и в нее загружаем нужный нам файл.
Вызов media библиотеки в плагине скрин
При клике на кнопку должна появится загрузочное окно в котором выбираем файл и загружаем на сервер, или выбираем имеющиеся файлы.
Подключение
Чтобы сделать Вызов media библиотеки в плагине сначала в админке делается подключение нужных скриптов. Прописываем следующее
|
1 2 3 4 5 |
// upload images // Your custom js file wp_enqueue_script( 'media-lib-uploader-js', plugins_url( '../js/media-lib-uploader.js' , __FILE__ ), array('jquery') ); // wp_enqueue_script( 'media-lib-uploader-js' ); wp_enqueue_media(); |
И в самом javascript файле media-lib-uploader.js следующий код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
jQuery(function($){ // Set all variables to be used in scope var frame, metaBox = $('#meta-box-id.postbox'), // Your meta box id here addImgLink = metaBox.find('.upload-custom-img'), delImgLink = metaBox.find( '.delete-custom-img'), imgContainer = metaBox.find( '.custom-img-container'), imgIdInput = metaBox.find( '.custom-img-id' ); // ADD IMAGE LINK jQuery('#addImgLink').on( 'click', function( event ){ event.preventDefault(); // If the media frame already exists, reopen it. if ( frame ) { frame.open(); return; } // Create a new media frame frame = wp.media({ title: 'Select or Upload Media Of Your Chosen Persuasion', button: { text: 'Use this media' }, multiple: false // Set to true to allow multiple files to be selected }); // When an image is selected in the media frame... frame.on( 'select', function() { // Get media attachment details from the frame state var attachment = frame.state().get('selection').first().toJSON(); jQuery('#image-url').val(attachment.url); jQuery('#choosen_img').attr('src', attachment.url); }); // Finally, open the modal on click frame.open(); }); }); |
И само поле html
|
1 2 3 4 5 6 7 8 9 |
<div class="form-group"> <label class="col-sm-3 text-right" for="img_logo">Картинка логотип:</label> <div class="col-sm-7"> <input class="form-control" id="image-url" type="text" value="<?php echo $_POST['img_logo']; ?>" name="img_logo" /> <input class="btn" id="addImgLink" type="button" class="addImgLink" value="Добавить изображение" /> <img id="choosen_img" src="<?php echo $_POST['img_logo']; ?>" alt="" style="width:100%;"/> </div> <div class="col-sm-2"></div> </div> |