问题描述

我设法添加了一个自定义 option-select 的图像

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 我得到这个:

我可以为这些链接添加另一个 option-select 字段吗?怎么做?

最佳解决方案

对话框 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' : ''
        };
    }
});

我刚刚做了一个快速测试,似乎工作,但需要进一步的测试和更新链接的调整。我这样做的 Here’s an old hack 可能需要刷新。

Update

看起来你想将 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:

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

次佳解决方案

看看核心,wp_link_dialog 功能中没有任何过滤器或动作的痕迹,这将使您的生活更轻松…

调查其他人如何解决这个问题,a plugin 或多或少与你想要的一样。基本上它取消注册 wplink.js,wp_deregister_script('wplink'); 并再次注册该文件的修改版本,此时包括所需的额外字段。

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

希望有帮助!

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。