如何使用内置的Wordpress“浏览链接”功能?


9

我正在编码一个小部件,我希望用户能够像编辑常规文章或页面时一样选择一个链接(当您单击小链接图标并在弹出窗口中获得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();
});

3
请制作您想要做的屏幕截图或GIF动画(LiceCap是一个不错的免费工具)。到目前为止很难想象。并请对其进行编辑而不是评论。谢谢。
kaiser

@kaiser-好的,完成。您会看到我现在想要的功能。PS-非常喜欢LICEcap,感谢小费!

好吧,然后请向我们展示您的小部件代码(构建内容的部分)。你用了wp_editor()吗?
kaiser

@kaiser-添加了一些额外的代码。到目前为止还不算很多,但是除了附加一个事件并包含脚本(也许在更新结果的位置进行修改)之外,我没有想到要做更多的事情,但是到目前为止,我根本无法打开弹出窗口。
2013年

1
不幸的是,链接选择器是专门为TinyMCE编辑器编写的。我正在开发一个单独存在的版本,并且在那里有大约80%。基本上,这是对没有TinyMCE依赖项的链接选择器的重写。
hereswhatidid 2013年

Answers:


2

我在用于开发的metabox类中调用链接对话框。这有点棘手,但是可以做到,直到开发出更强大的功能为止。

您可以先将所需的js放入队列,然后再与wp-link js文件方法进行交互,以调用链接框。

确保您已加入wp-link

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 //排队脚本。将以下内容添加到您的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类中使用了相同的方法,并且看起来工作正常。


感谢Dale的帖子-这看起来很有趣。我确实做了尽可能多的操作,然后调用了wp-link脚本,但不知道如何在此之后进行操作。下周,我将尝试在项目之间学习更多的JS / AJAX并试一试。非常感谢。

您只需要在主题的管理端加入.js文件。我将编辑以上内容以反映这一点。
戴尔·萨特勒

0

RE:“你会怎么做?(大概?)”

首先,我将类似于WordPress中的链接功能来构建它:输入文本字段,结果,选择功能并提交(添加链接)按钮。

Ajax-将文本输入到输入中时会触发,并根据搜索项返回结果集。看看我们使用快速搜索插件 WP Jarvis 做了什么。您只需要将ajax调用设置为目标ajaxurl(admin-ajax.php),并在php中设置一个动作挂钩即可执行查询并以json格式回显结果。您希望结果包含每个结果的标题,文章类型和永久链接。在插件中阅读有关ajax的更多信息。

最后,选择您感兴趣的结果将从json对象获取永久链接,并将其插入小部件字段。

我知道这不是一个完整的答案,但我希望这会有所帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.