Eklentimdeki Medya Kitaplığı'ndan nasıl resim seçerim?


15

Sağ alt köşede küçük bir sohbet simgesi olan bir eklenti yazdım, ancak kullanıcının simge olarak bir görüntü seçmesini istiyorum Media Library. Bunu Wordpress API ile nasıl yapabilirim? Resim eklentideki bir ayardır (yalnızca yönetici tarafından değiştirilebilir)


2
Sen içermelidir 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
bueltge

Yanıtlar:


19

wp.mediaWordPress 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.


2

wordpress-settings-api-classTareq Hasan, Url tarafından kullanım : https://github.com/tareq1988/wordpress-settings-api-class


2
Ek kütüphaneleri olmayan bir çözümün daha iyi, sağlam olduğunu düşünüyorum; wp.mediakontrol gibi .
12'de bueltge

1

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 ...
     }

hayır, bir eklenti ayarı olmasını istiyorum
Thomas

Yani sadece sitenin yöneticisi simgeyi değiştirebilmelidir ve her ziyaretçi / kullanıcı için aynı olacak mı?
cjbj

1
Bu oldukça önemsiz olurdu. İşte bunun için bir öğretici: mikejolley.com/2012/12/21/…
cjbj

evet, bir düğmenin görünümünü (görüntüsünü) özelleştirir
Thomas

Öğreticiyi denedim, ama benim için çalışmıyor (eski mi?) Çerçeveler js nesnesinin bir parçası değildir
Thomas


0

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();
 +        });

Ek kütüphaneleri olmayan bir çözümün daha iyi, sağlam olduğunu düşünüyorum; wp.mediakontrol gibi .
12'de bueltge

@bueltge Kabul ediyorum, ama kimse düz bir cevap vermedi ve zamana ihtiyacım vardı. Birisi harika bir cevap verirse, ödül alırlar!
Thomas

Cevabınızı da çözüm olarak görüyorum, ama en iyi yol değil. Şimdi soru yazarının bir parçası, siz;) karar vermek.
12'de bueltge

Bu çözüm, görüntü sayısı arttıkça hızla sorun haline gelebilir. “kimse düz bir cevap vermedi” bir mazeret değil; sorunuz çok zayıf, bu yüzden kötü cevaplar alıyorsunuz. Bize denediğiniz hiçbir çabayı, araştırmayı veya kodu göstermezsiniz, sadece "Bunu yapmak istiyorum, kullanıma hazır bir çözüm verin", ki bu da "benim için işi yapın". Bueltge'nin önerdiği gibi wp.media'yı arayın; burada WPSE'de yüzlerce örnek var. Kullanmakta sorun yaşıyorsanız, bunun hakkında yeni bir soru gönderin.
cybmeta

@ cybmeta denedim ve bu benim en iyi girişimim, bu yüzden bu konuda bir eşek olmayın. Eğer beğenmediyseniz, daha iyi bir çözüm önerin.
Thomas
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.