開発に使用するメタボックスクラス内でリンクダイアログを呼び出します。その少しハックですが、より堅牢なものが開発されるまで行うことができます。
最初に必要な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' );
それをする必要があります。メタボックスクラスでも同じ方法を使用していますが、問題なく動作するようです。