Làm cách nào tôi có thể sử dụng chức năng liên kết duyệt Wordpress trong trình duyệt Wordpress?

Tôi đang mã hóa một tiện ích và tôi muốn người dùng có thể chọn một liên kết như bạn có thể khi chỉnh sửa một bài đăng hoặc trang thông thường (khi bạn nhấp vào biểu tượng liên kết nhỏ và bạn có chức năng tìm kiếm AJAX trong cửa sổ bật lên ). Có ai biết làm thế nào tôi làm việc này? Tôi đã có một nút HTML mà tôi muốn đính kèm và nhấp vào, và một trường cho giá trị đi vào.

Trong class-wp-Editor.php tôi đã tìm thấy một vài điều thú vị và tự hỏi liệu tôi có thể cần những tệp này không ..?

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

Khi gọi fullscreen.link();, như tập tin được đề cập ở trên, tôi gặp lỗi này:

Uncaught ReferenceError: wpActiveEditor is not defined

..và bây giờ tôi đã bối rối, bởi vì JS tham chiếu biến đó có vẻ điên rồ với tôi.

Quan tâm để chỉ cho tôi đi đúng hướng? Tôi rất thích làm việc này, nó sẽ tạo giao diện người dùng giết người cho các vật dụng của tôi!

------biên tập-------

Không có nhiều mã cho đến nay, ngoài các tập lệnh bao gồm mà tôi đã nêu trước đây;

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

.. một phần của JS được cho là kích hoạt tập lệnh liên kết để mở;

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

Tôi gọi đối thoại liên kết trong lớp metabox mà tôi sử dụng để phát triển. Đó là một chút hacky nhưng có thể được thực hiện, cho đến khi một cái gì đó mạnh mẽ hơn được phát triển.

Bạn có thể gọi hộp liên kết bằng cách trước tiên liệt kê các js cần thiết, sau đó tương tác với các phương thức tệp js-link js.

Hãy chắc chắn rằng bạn đã yêu thích wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / Thiết lập ui của bạn. Tôi thường sử dụng một nút để gọi đối thoại liên kết từ và một trường văn bản để xử lý URL liên kết.

3 / Gọi đối thoại liên kết

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 // kịch bản enqueue. Thêm phần sau vào tệp tin.php của bạn và điều chỉnh tên / đường dẫn tệp cho phù hợp.

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

Nên làm về nó. Tôi sử dụng cách tiếp cận tương tự trong lớp metabox của tôi và nó có vẻ hoạt động tốt.

RE: "Làm thế nào bạn sẽ làm điều đó? (Đại khái?)"

Đầu tiên, tôi sẽ xây dựng nó tương tự như chức năng liên kết trong WordPress: Trường văn bản đầu vào, kết quả, chọn chức năng và nút gửi (thêm liên kết).

Ajax - điều này sẽ kích hoạt khi văn bản được nhập vào đầu vào, trả về tập kết quả dựa trên cụm từ tìm kiếm. Hãy xem những gì chúng tôi đã làm với plugin tìm kiếm nhanh của chúng tôi , WP Jarvis. Bạn chỉ cần thiết lập lệnh gọi ajax để nhắm mục tiêu ajaxurl (admin-ajax.php) và đặt một hook hành động trong php của bạn để thực hiện truy vấn và lặp lại kết quả ở định dạng json. Bạn sẽ muốn kết quả bao gồm tiêu đề, loại bài đăng và permalink cho mỗi kết quả. Đọc thêm về ajax trong plugin .

Cuối cùng, chọn kết quả mà bạn quan tâm sẽ lấy permalink từ đối tượng json và chèn vào trường widget.

Tôi biết đây không phải là một câu trả lời hoàn chỉnh, nhưng tôi hy vọng điều này có ích.