将自定义选项添加到wplink对话框


16

我设法为图像添加了一个自定义选项

function attachment_field_credit( $form_fields, $post ) {
    $field_value = get_post_meta( $post->ID, 'first_image', true );
    $isSelected1 = $field_value == '1' ? 'selected ' : '';
    $isSelected2 = $field_value != '1' ? 'selected ' : '';
    $form_fields['first_image'] = array(
        'label' => __( 'Use as first image' ),
        'input' => 'html',
        'html' => "<select name='attachments[{$post->ID}][first_image]' id='attachments[{$post->ID}][first_image]'>
                    <option ".$isSelected1." value='1'>Yes</option>
                    <option ".$isSelected2."  value='2'>No</option>
                   </select>"
    );
    return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'attachment_field_credit', 10, 2 );

现在,我需要对链接执行几乎相同的操作。所以,如果我点击Pages -> Add New -> Insert / Edit Link我得到这个:

在此处输入图片说明

我可以为这些链接添加另一个选项选择字段吗?怎么做?

Answers:


18

对话框HTML来自WP_Editors::wp_link_dialog()但没有钩子。

我们可以改用jQuery将自定义HTML附加到链接对话框,然后尝试覆盖例如wpLink.getAttrs(),因为它很短;-)

演示示例:

jQuery( document ).ready( function( $ ) {
    $('#link-options').append( 
        '<div> 
            <label><span>Link Class</span>
            <select name="wpse-link-class" id="wpse_link_class">
                <option value="normal">normal</option>
                <option value="lightbox">lightbox</option>
           </select>
           </label>
       </div>' );

    wpLink.getAttrs = function() {
        wpLink.correctURL();        
        return {
            class:      $( '#wpse_link_class' ).val(),
            href:       $.trim( $( '#wp-link-url' ).val() ),
            target:     $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
        };
    }
});

我只是做了一个快速测试,它似乎可以工作,但是在更新链接时需要进一步的测试和调整。是我曾经做过的一件事,可能需要刷新。

更新资料

看来您想将rel="nofollow"选项添加到链接对话框,因此让我们针对这种情况更新上述方法:

我们添加rel链接属性:

/**
 * Modify link attributes
 */
wpLink.getAttrs = function() {
    wpLink.correctURL();        
    return {
        rel:        $( '#wpse-rel-no-follow' ).prop( 'checked' ) ? 'nofollow' : '',
        href:       $.trim( $( '#wp-link-url' ).val() ),
        target:     $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
    };
}

如果rel属性为空,则它将自动从编辑器的链接中删除。

然后,我们可以wplink-open链接到打开链接对话框时触发的事件。在这里,我们可以注入自定义HTML并根据当前的链接选择对其进行更新:

$(document).on( 'wplink-open', function( wrap ) {

    // Custom HTML added to the link dialog
    if( $('#wpse-rel-no-follow').length < 1 )
        $('#link-options').append( '<div> <label><span></span> <input type="checkbox" id="wpse-rel-no-follow"/> No Follow Link</label></div>');

    // Get the current link selection:
    var _node = wpse_getLink();

    if( _node ) {
        // Fetch the rel attribute
        var _rel = $( _node ).attr( 'rel' );

        // Update the checkbox
        $('#wpse-rel-no-follow').prop( 'checked', 'nofollow' === _rel );
    }

});

在此我们基于getLink()核心功能使用以下帮助器功能来获取所选链接的HTML:

function wpse_getLink() {
    var _ed = window.tinymce.get( window.wpActiveEditor );
    if ( _ed && ! _ed.isHidden() ) {
        return _ed.dom.getParent( _ed.selection.getNode(), 'a[href]' );
    } 
    return null;
}

这是输出:

没有跟随选项

使用以下HTML:

html

ps:可以进一步测试,也可以扩展到支持翻译


我很喜欢这个答案,因为它看起来很简单。尽管问题不仅仅在于链接的更新,而且如果我在同一站点上有多个链接,那么即使从不同的链接,值仍然是最后一个被选择的值。仍然可能对某人有用!
caramba

我使用无关注链接示例@caramba更新了答案
birgire

嘿@birgire,href如果用户不打开对话框而是仅使用带有占位符的第一个弹出框,该如何获取值Paste URL or type to search
MinhTri'8

1
我想我使用mce_external_plugins过滤器加载脚本文件或after_wp_tiny_mce挂钩来插入代码段(将附加部分作为单行字符串),以对此进行测试。getAttrs这里的方法将仅覆盖链接设置对话框中的值,我没有研究如何覆盖内联输入中的值。wp_link_apply如果可能的话,也许覆盖命令?我认为这可能是一个很好的新问题;-) @ Dan9
birgire

@birgire谢谢!终于,我找到了去哪儿。WordPress tinymce.ui.Control.extend.setUrl在插件中使用wp-includes/js/tinymce/plugins/wplink/plugin.js
MinhTri'8

3

从核心看,wp_link_dialog函数中没有任何过滤器或动作的痕迹,这会使您的生活更轻松...

调查其他人如何解决此问题,有一个插件的功能与您想要的差不多。基本上,它会注销wplink.js,wp_deregister_script('wplink');然后再次注册文件的修改版本,这次包括所需的额外字段。

尽管我认为这不是最好的方法(考虑到更新WordPress时可能发生的后续冲突),但我认为这是最简单的方法。

希望能帮助到你!


感谢您提供的信息和插件链接。我还将研究插件,看看他们是如何解决的……
caramba

我通过查看此答案中提到的插件的源来解决它,如果有人需要的话,可以在github github.com/ffsantos92/rel-nofollow-checkbox上找到它。我只需要更改5个字左右……
caramba
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.