ฉันจะใช้ฟังก์ชั่น "เรียกดูลิงก์" ใน 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();
});

ฉันเรียกใช้กล่องโต้ตอบการเชื่อมโยงภายในคลาส metabox ที่ฉันใช้สำหรับการพัฒนา มันเป็นแฮ็กตาด แต่สามารถทำได้จนกว่าจะมีการพัฒนาที่แข็งแกร่งกว่านี้

คุณสามารถเรียกใช้กล่องลิงก์ได้โดยทำการ enqueing js ที่ต้องการก่อนแล้วจึงโต้ตอบกับวิธีการไฟล์ wp-link js

ตรวจสอบให้แน่ใจว่าคุณได้ลงทะเบียน wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / ตั้งค่า UI ของคุณ ฉันมักจะใช้ปุ่มเพื่อเรียกใช้กล่องโต้ตอบเชื่อมโยงจากและฟิลด์ข้อความเพื่อจัดการ 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 // สคริปต์คิว เพิ่มสิ่งต่อไปนี้ในไฟล์ functions.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' );

ควรเกี่ยวกับการทำ ฉันใช้วิธีการเดียวกันในคลาส metabox ของฉันและดูเหมือนว่าจะทำงานได้ดี

RE: "คุณจะทำอย่างไร (โดยประมาณ)"

ก่อนอื่นฉันจะสร้างมันขึ้นมาคล้ายกับฟังก์ชั่นการเชื่อมโยงใน WordPress: ช่องใส่ข้อความ, ผลลัพธ์, เลือกฟังก์ชั่นและส่ง (เพิ่มลิงก์)

Ajax - สิ่งนี้จะดำเนินการเมื่อมีการป้อนข้อความลงในอินพุตโดยส่งคืนชุดผลลัพธ์ตามคำค้นหา ดูสิ่งที่เราทำกับปลั๊กอินการค้นหาอย่างรวดเร็วของเรา WP Jarvis คุณเพียงแค่ต้องตั้งค่า ajax call เพื่อกำหนดเป้าหมาย ajaxurl (admin-ajax.php) และตั้ง hook action ใน php ของคุณเพื่อดำเนินการค้นหาและสะท้อนผลลัพธ์ในรูปแบบ json คุณต้องการให้ผลลัพธ์รวมชื่อเรื่องประเภทหลังและ Permalink สำหรับแต่ละผลลัพธ์ อ่านเพิ่มเติมเกี่ยวกับอาแจ็กซ์ในปลั๊กอิน

สุดท้ายการเลือกผลลัพธ์ที่คุณสนใจจะดึงความคิดเห็นจากวัตถุ json และแทรกลงในฟิลด์วิดเจ็ต

ฉันรู้ว่านี่ไม่ใช่คำตอบที่สมบูรณ์ แต่ฉันหวังว่านี่จะช่วยได้