Как выбрать изображение из медиатеки в моем плагине?

Я написал плагин, в котором у вас есть маленький значок чата в нижнем правом углу, однако я хочу, чтобы пользователь мог выбрать изображение в качестве значка из Media Library . Как я могу это сделать с помощью WordPress API? Изображение представляет собой настройку в плагине (только изменяемое администратором)

Solutions Collecting From Web of "Как выбрать изображение из медиатеки в моем плагине?"

Вы должны использовать wp.media для использования диалога WordPress Media Manager.

Во-первых, вам нужно поставить в очередь scritps:

 // As you are dealing with plugin settings, // I assume you are in admin side add_action( 'admin_enqueue_scripts', 'load_wp_media_files' ); function load_wp_media_files( $page ) { // change to the $page where you want to enqueue the script if( $page == 'options-general.php' ) { // Enqueue WordPress media scripts wp_enqueue_media(); // Enqueue custom script that will interact with wp.media wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' ); } } 

Ваш HTML может быть чем-то вроде этого (обратите внимание, что мой код использует идентификатор вложения в настройке плагина вместо URL-адреса изображения, как и в вашем ответе, я думаю, что это намного лучше. Например, использование идентификатора позволяет вам получать разные размеры изображений, когда вы нужно их):

 $image_id = get_option( 'myprefix_image_id' ); if( intval( $image_id ) > 0 ) { // Change with the image size you want to use $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) ); } else { // Some default image $image = '<img id="myprefix-preview-image" src="http://img.wordpressask.com/media-library/some.default.image.jpg" />'; } <?php echo $image; ?> <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" /> <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç 

myscript.js

 jQuery(document).ready( function($) { jQuery('input#myprefix_media_manager').click(function(e) { e.preventDefault(); var image_frame; if(image_frame){ image_frame.open(); } // Define image_frame as wp.media object image_frame = wp.media({ title: 'Select Media', multiple : false, library : { type : 'image', } }); image_frame.on('close',function() { // On close, get selections and save to the hidden input // plus other AJAX stuff to refresh the image preview var selection = image_frame.state().get('selection'); var gallery_ids = new Array(); var my_index = 0; selection.each(function(attachment) { gallery_ids[my_index] = attachment['id']; my_index++; }); var ids = gallery_ids.join(","); jQuery('input#myprefix_image_id').val(ids); Refresh_Image(ids); }); image_frame.on('open',function() { // On open, get the id from the hidden input // and select the appropiate images in the media manager var selection = image_frame.state().get('selection'); ids = jQuery('input#myprefix_image_id').val().split(','); ids.forEach(function(id) { attachment = wp.media.attachment(id); attachment.fetch(); selection.add( attachment ? [ attachment ] : [] ); }); }); image_frame.open(); }); }); // Ajax request to refresh the image preview function Refresh_Image(the_id){ var data = { action: 'myprefix_get_image', id: the_id }; jQuery.get(ajaxurl, data, function(response) { if(response.success === true) { jQuery('#myprefix-preview-image').replaceWith( response.data.image ); } }); } 

И действие Ajax для обновления предварительного просмотра изображения:

 // Ajax action to refresh the user image add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image' ); function myprefix_get_image() { if(isset($_GET['id']) ){ $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) ); $data = array( 'image' => $image, ); wp_send_json_success( $data ); } else { wp_send_json_error(); } } 

PD: это быстрый образец, написанный здесь на основе другого ответа . Не тестировалось, потому что вы не предоставили достаточной информации о точном контексте, который будет использоваться для кода, или о конкретных проблемах, которые у вас есть.

Поскольку вы хотите, чтобы значок был другим для каждого пользователя, вам необходимо сохранить изображение в профиле пользователя. Это означает, что вам нужно добавить дополнительное поле пользователя:

 // create the field add_action( 'show_user_profile', 'wpse_235406_chaticon' ); add_action( 'edit_user_profile', 'wpse_235406_chaticon' ); function wpse_235406_chaticon ($user) { echo ' <h3>Chat Icon</h3> <table class="form-table"> <tr> <th><label for="chaticon">Chat Icon</label></th> <td> <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br /> <span class="description">Please select your chat icon.</span> </td> </tr> </table>'; } // save the field add_action( 'personal_options_update', 'wpse_235406_chaticon_save' ); add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' ); function wpse_235406_chaticon_save ($user_id) { if (current_user_can ('edit_user', $user_id)) update_usermeta ($user_id, 'chaticon', $_POST['chaticon']); } 

Теперь это дает вам возможность загрузить файл с компьютера пользователя. Если вы хотите, чтобы пользователь выбирал файл из существующих изображений, все становится более сложным, потому что тогда вам нужно вызвать медиа-библиотеку вместо загрузки файлов по умолчанию. Стивен Слэк написал отличный пост, как это сделать, на что я не хочу брать кредит, копируя его код здесь.

В вашем шаблоне вы должны различать три возможности: пользователь не вошел в систему, пользователь вошел в систему, но не имеет значка, пользователь вошел в систему и имеет значок. Грубо говоря, включите это:

 $current_user = wp_get_current_user(); if ( 0 == $current_user->ID ) { ... do what you want to do for not logged in users ... } else { $icon = get_user_meta ($current_user->ID, 'chaticon'); if (empty($icon)) { ... default icon with link to upload possibility ... } else { ... display $icon ... } 

Используйте wordpress-settings-api-class от Tareq Hasan, Url: https://github.com/tareq1988/wordpress-settings-api-class

Я использовал это решение (без использования самой медиа-библиотеки):

Использование image-picker-lib внутри модаля, задающего значение скрытого ввода, которое отправляется в параметры. Получив все носители и повторяя их как опции, я могу позволить пользователю выбрать img.

HTML

 <input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" /> <br> <a href="#imageModal" class="waves-effect waves-light btn modal-trigger"> change </a> <input id="image_url" name="image_url" type="text" value="" hidden /> 

PHP / HTML

 <div id="imageModal" class="modal"> <div class="modal-content"> <select class="image-picker show-html"> <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>" value="0"></option> <?php $query_images_args = array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_status' => 'inherit', 'posts_per_page' => - 1, ); $query_images = new WP_Query( $query_images_args ); $i = 1; foreach ( $query_images->posts as $image ) { ?> <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>" value="<?php echo $i; ?>"></option> <?php $i ; } ?> </select> </div> <div class="modal-footer"> <a class="waves-effect waves-light btn change">Choose</a> </div> </div> </div> </div> 

JS

  $(".change").on("click", function() { + var url = $(".image-picker > option:selected").attr("data-img-src"); + $("#image").attr("src", url); + $("#image_url").attr("value", url); + $("#imageModal").closeModal(); + });