Jak mogę korzystać z wbudowanej funkcji „Przeglądaj łącze” Wordpress?

Koduję widżet i chciałbym, aby użytkownik mógł wybrać link, tak jak Ty, podczas edytowania zwykłych postów lub strony (po kliknięciu małej ikony linku i wyświetleniu funkcji wyszukiwania AJAX w wyskakującym okienku ). Czy ktoś wie, jak to działa? Mam przycisk HTML, który chciałbym załączyć i kliknąć nawet, oraz pole do wprowadzenia wartości.

W class-wp-editor.php znalazłem kilka interesujących rzeczy i zastanawiałem się, czy mogę potrzebować tych plików ..?

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

Podczas wywoływania fullscreen.link();, podobnie jak plik wspomniany powyżej, pojawia się następujący błąd:

Uncaught ReferenceError: wpActiveEditor is not defined

..i jestem zaskoczony, ponieważ JS, który odwołuje się do tej zmiennej, wydaje mi się szalony.

Chcesz wskazać mi właściwy kierunek? Chciałbym, aby to działało, sprawi, że interfejs użytkownika zabójcy dla moich widżetów!

------edytować-------

Do tej pory niezbyt dużo kodu, oprócz wtrąceń skryptu, które wcześniej powiedziałem;

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

.. część JS, która ma wyzwalać otwarcie skryptu łącza;

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

Przywołuję dialog linków w klasie metabox, której używam do programowania. Jest to trochę hacky, ale można to zrobić, dopóki nie zostanie opracowane coś bardziej niezawodnego .

Możesz wywołać pole linku, najpierw buforując wymagany plik js, a następnie wchodząc w interakcję z metodami plików wp-link js.

Upewnij się, że umieściłeś w kolejce wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / Skonfiguruj interfejs użytkownika. Zazwyczaj używam przycisku, aby wywołać dialog linku i pole tekstowe do obsługi adresu URL linków.

3 / Wywołaj dialog łącza

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 // kolejkowanie skryptów. Dodaj następujące pliki do pliku functions.php i dostosuj nazwy / ścieżki do plików.

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' );

Powinien to zrobić. Używam tego samego podejścia w mojej klasie metabox i wydaje się, że działa OK.

RE: „Jak byś to zrobił? (Z grubsza?)”

Najpierw zbuduję go podobnie do funkcji łącza w WordPress: pole tekstowe, wyniki, wybierz funkcję i przycisk Prześlij (dodaj link).

Ajax - uruchamia się po wprowadzeniu tekstu do tekstu, zwracając zestaw wyników na podstawie wyszukiwanego terminu. Zobacz, co zrobiliśmy z naszą wtyczką szybkiego wyszukiwania , WP Jarvis. Musisz tylko skonfigurować wywołanie ajax, aby celować w ajaxurl (admin-ajax.php) i ustawić hak akcji w swoim php, aby wykonać zapytanie i wyświetlić wyniki w formacie json. Chcesz, aby wyniki zawierały tytuł, typ postu i bezpośredni link do każdego wyniku. Przeczytaj więcej o ajax we wtyczkach .

Na koniec wybranie interesującego Cię wyniku spowoduje pobranie bezpośredniego linku z obiektu json i wstawienie go do pola widżetu.

Wiem, że to nie jest pełna odpowiedź, ale mam nadzieję, że to pomoże.