Як я можу використовувати вбудований в Wordpress «Перегляд посилань» функціональність?

Я кодую віджет, і я хотів би, щоб користувач міг вибрати посилання, як ви можете, під час редагування звичайних публікацій або сторінки (коли ви натискаєте на маленьку піктограму посилання і ви отримуєте функцію пошуку AJAX у спливаючому вікні ). Хтось знає, як у мене це працює? У мене є кнопка HTML, до якої я хотів би приєднати і натиснути навіть, і поле для значення, яке потрібно ввести.

У class-wp-editor.php я знайшов кілька цікавих речей і задумався, чи можуть мені знадобитися ці файли ..?

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

Під час виклику fullscreen.link();, як і згаданий вище файл, я отримую цю помилку:

Uncaught ReferenceError: wpActiveEditor is not defined

..і я наткнувся на даний момент, тому що JS, що посилається на цю змінну, мені виглядає божевільним.

Хочете вказувати мене в правильному напрямку? Я б хотів, щоб ця робота працювала, це зробить користувальницький інтерфейс для моїх віджетів!

------ редагувати -------

Не так багато коду досі, крім включень сценаріїв, про які я раніше заявив;

<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, яка повинна викликати відкриття сценарію посилання;

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

Я викликаю діалог посилань у класі метабокса, який використовую для розробки. Це tad hacky, але це можна зробити, поки не буде розроблено щось більш надійне .

Ви можете викликати поле посилання, спочатку додавши потрібний js, а потім взаємодіючи з методами файлів wp-link js.

Переконайтеся, що ви зав'язали wp-посилання

1 / wp_enqueue_script( 'wp-link' );

2 / Налаштуйте свій інтерфейс. Зазвичай я використовую кнопку для виклику діалогу посилань та текстового поля для обробки URL-адреси посилань.

3 / Виклик діалогу зв'язку

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 // скрипти для enqueue. Додайте наступне до файлу function.php і відрегулюйте назви файлів / шляхи відповідно до цього.

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

Слід приблизно це зробити. Я використовую той самий підхід у своєму класі метабокса, і, здається, він працює нормально.

RE: "Як би ти це зробив? (Приблизно?)"

По-перше, я побудував би це аналогічно функціональності посилання в WordPress: Поле для введення тексту, результати, вибір функціональності та кнопка подання (додавання посилання).

Ajax - це може спрацьовувати, коли текст буде введений у вхід, повертаючи набір результатів на основі пошукового терміна. Погляньте на те , що ми зробили з нашим QuickSearch плагін , WP Джарвіс. Вам просто потрібно налаштувати Ajax виклик цільової ajaxurl (адмін-ajax.php) і встановити гак дій в РНР для виконання запиту і відлуння результатів в форматі JSON. Ви хочете, щоб результати включали заголовок, пост та тип посилання на кожен результат. Детальніше про AJAX в плагінах .

Нарешті, вибір результату, який вас цікавить, захопить постійна посилання з об’єкта json і вставить у поле віджета.

Я знаю, що це не є повною відповіддю, але сподіваюся, що це допоможе.