Intereting Posts
wp_list_categories: получите последнюю характеристику категории Colorbox ajax загрузка внешнего HTML-контента отлично работает на localhost, но не на сервере Показать пользователя недавно просмотренные записи Пользовательский тип событий Архив событий, сгруппированных по месяцам Автоматически удалять помеченные страницы из навигационного меню Как выбрать шаблон, который будет использоваться для нескольких запросов таксономии? Выравнивание строки с помощью CSS Штрих-код вложенности приводит к тому, что внутренний короткий код помещается после внешнего короткого кода Каков наилучший способ создать экземпляр класса плагина в вашей теме WordPress? Добавление пункта меню в панели администратора проблема с WordPress ajax Теоретическая многосерверная программа WordPress с совместно используемыми пользователями Функция, чтобы увидеть, сколько плагинов на сайте необходимо обновить К какой должности относится термин таксономии? Сообщение Woocommerce "нет в наличии"

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

Я написал плагин, в котором у вас есть маленький значок чата в нижнем правом углу, однако я хочу, чтобы пользователь мог выбрать изображение в качестве значка из 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(); + });