내장 된 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();
});

개발에 사용하는 메타 박스 클래스 내에서 링크 대화 상자를 호출합니다. 좀 해킹 적이지만 더 강력한 무언가 가 개발 될 때까지 수행 할 수 있습니다 .

먼저 필요한 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' );

해야 돼. 메타 박스 클래스에서 동일한 접근 방식을 사용하는데 제대로 작동하는 것 같습니다.

RE : "어떻게 하시겠습니까? (대략?)"

먼저 WordPress의 링크 기능과 유사하게 작성합니다. 입력 텍스트 필드, 결과, 기능 선택 및 제출 (링크 추가) 버튼.

Ajax-입력에 텍스트를 입력하면 검색어에 따라 결과 집합을 반환하여 실행됩니다. 빠른 검색 플러그인 WP Jarvis로 수행 한 작업을 살펴보십시오 . ajaxurl (admin-ajax.php)을 대상으로하기 위해 ajax 호출을 설정하고 쿼리를 실행하고 결과를 json 형식으로 에코하도록 PHP에서 작업 후크를 설정해야합니다. 결과에 각 결과에 대한 제목, 게시물 유형 및 퍼머 링크를 포함 시키려고합니다. 플러그인에서 ajax에 대해 자세히 알아보십시오 .

마지막으로 관심있는 결과를 선택하면 json 객체에서 퍼머 링크를 가져 와서 위젯 필드에 삽입합니다.

나는 이것이 완전한 대답이 아니라는 것을 알고 있지만 이것이 도움이되기를 바랍니다.