Yerleşik Wordpress “göz atma” işlevini nasıl kullanabilirim?

Bir widget kodluyorum ve kullanıcının normal yayınları veya sayfayı düzenlerken (küçük bağlantı simgesini tıkladığınızda ve açılır pencerede AJAX arama işlevini aldığınızda, sizin gibi bir bağlantı seçebilmesini istiyorum. ). Bunu nasıl çalıştıracağımı bilen var mı? Eklemek ve hatta tıklatmak istediğim bir HTML düğmesi ve değerin girmesi için bir alan var.

Class-wp-editor.php'de birkaç ilginç şey buldum ve bu dosyalara ihtiyacım olup olmadığını merak ettim ..?

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

Arama yaparken fullscreen.link();, yukarıda belirtilen dosya gibi, bu hatayı alıyorum:

Uncaught ReferenceError: wpActiveEditor is not defined

..ve şimdilik güvendim, çünkü o değişkene başvuran JS bana deli gibi geliyor.

Beni doğru yöne yönlendirmek ister misin? Bu işe almak istiyorum, widget'ları için katil bir kullanıcı arayüzü yapacak!

------Düzenle-------

Şimdiye kadar bu kadar kod değil, daha önce belirttiğim senaryo kapanımları dışında;

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

.. JS'nin link komut dosyasını açmak için tetiklemesi gereken bölüm;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

Geliştirme için kullandığım metabox sınıfında bağlantı diyaloğunu çağırıyorum. Bu biraz acayip ama daha sağlam bir şey geliştirilinceye kadar yapılabilir .

Önce gerekli js enqueing ve sonra wp-link js dosya yöntemleri ile etkileşimde bağlantı kutusunu çağırabilirsiniz.

Wp-link'i sıktığınızdan emin olun

1 / wp_enqueue_script( 'wp-link' );

2 / Kullanıcı arayüzünüzü ayarlayın. Genellikle bağlantı iletişim kutusunu çağırmak için bir düğme ve bağlantı URL'sini işlemek için bir metin alanı kullanırım.

3 / Bağlantı diyalogunu çağır

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // komut dosyalarını enqueue. Function.php dosyanıza aşağıdakileri ekleyin ve dosya adlarını / yollarını uygun şekilde ayarlayın.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Yapmalıyım. Metabox sınıfımda aynı yaklaşımı kullanıyorum ve tamam çalışıyor gibi görünüyor.

RE: "Bunu nasıl yapardın? (Kabaca?)"

İlk olarak, WordPress'deki bağlantı işlevselliğine benzer şekilde inşa ederim: Bir giriş metin alanı, sonuçlar, işlevsellik seçin ve gönder (bağlantı ekle) düğmesi.

Ajax - girişe metin girildiğinde tetiklenir ve arama terimine göre sonuç kümesi döndürülür. Hızlı arama eklentimiz WP Jarvis ile neler yaptığımıza bir göz atın . Sadece ajaxurl (admin-ajax.php) hedeflemek için ajax çağrısı ayarlamanız ve sorguyu yürütmek ve sonuçları json formatında yankılamak için php'nizde bir eylem kancası ayarlamanız gerekir. Sonuçların her bir sonuç için başlık, posta türü ve kalıcı bağlantı içermesini istersiniz. Eklentilerdeki ajax hakkında daha fazla bilgi edinin .

Son olarak, ilgilendiğiniz sonucu seçmek kalıcı bağlantıyı json nesnesinden alır ve widget alanına ekler.

Bunun tam bir cevap olmadığını biliyorum, ama umarım bu yardımcı olur.