Yanıtlar:
wp.media
WordPress Media Manager iletişim kutusunu kullanmak için kullanmalısınız.
İlk olarak, scritp'leri sıkmanız gerekir:
// 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'niz böyle bir şey olabilir (kodumda eklenti ayarında eklenti ayarını kullandığınızı unutmayın, yanıtınızda yaptığınız gibi resim URL'si, bence çok daha iyi. onlara ihtiyacınız var):
$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="https://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');
var ids = jQuery('input#myprefix_image_id').val().split(',');
ids.forEach(function(id) {
var 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 );
}
});
}
Ve resim önizlemesini yenilemek için Ajax eylemi:
// 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: Burada başka cevaba dayanarak yazılmış hızlı bir örnek . Kodun kullanılacağı bağlam veya yaşadığınız sorunlar hakkında yeterli bilgi sağlamadığınız için test edilmedi.
wordpress-settings-api-class
Tareq Hasan, Url tarafından kullanım : https://github.com/tareq1988/wordpress-settings-api-class
class.settings-api.php
eklentinize ekleyin . (bu dosya https://github.com/tareq1988/wordpress-settings-api-class/blob/master/src/class.settings-api.php )'type' => 'file'
Medya yükleyici eklemek için kullanmanız gerekir . (Daha iyi anlamak için bu örneğe bakın https://github.com/tareq1988/wordpress-settings-api-class/blob/master/example/procedural-example.php )wp.media
kontrol gibi .
Simgenin her kullanıcı için farklı olmasını istediğinizden, görüntüyü kullanıcı profilinde saklamanız gerekir. Bu, fazladan bir kullanıcı alanı eklemeniz gerektiği anlamına gelir:
// 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']);
}
Şimdi, bu size kullanıcının bilgisayarından bir dosya yükleme imkanı verir. Kullanıcının mevcut görüntülerden dosyayı seçmesini istiyorsanız, işler daha karmaşık hale gelir, çünkü o zaman medya kitaplığını varsayılan dosya yüklemesi yerine çağırmanız gerekir. Steven Slack, kodunu buraya yapıştırarak kredi almak istemediğim bunun nasıl yapılacağı konusunda mükemmel bir yazı yazdı .
Şablonunuzda üç olasılığı ayırt etmeniz gerekir: kullanıcı oturum açmamış, kullanıcı oturum açmış ancak simgesi yok, kullanıcı oturum açmış ve simgesi var. Kabaca şunu ekleyin:
$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 ...
}
Bu url'de bulabileceğiniz eklentiye sahip tam bir kod: http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/
Kullanımı kolay, sadece kodu istediğiniz yere kopyalayın
Bu çözümü kullandım (Medya Kitaplığı'nın kendisini kullanmadan):
Kullanılması görüntü seçici-lib seçenekleri gönderildiğinize gizli girişin değerini, ayarlanan bir modal iç. Tüm medyayı alıp seçenekler olarak yankılayarak kullanıcının bir img seçmesine izin verebilirim.
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();
+ });
wp.media
kontrol gibi .
wp.media
, özel yüklemelerine izin Bu gereksinim için bir medya dosyasının seçin. WPSE örnekler çok şey var, ama belki bu yayınları yardımcı jeroensormani.com/... özellikle ocean90 gelen Ayrıca github örnekler bulmak - github.com/ocean90/media-modal-demo