向wplink对话框添加自定义选项

时间：2016-06-02 作者：caramba

我为图像添加了一个自定义选项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 我明白了：

我可以为这些链接添加另一个选项选择字段吗？如何做到这一点？

4 个回复

最合适的回答,由SO网友:birgire 整理而成

对话框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 我这样做了，可能需要刷新一下。

更新看起来您想添加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：这可以进一步测试，也可以扩展到支持翻译

SO网友:Capiedge

查看核心，在wp_link_dialog 功能，这会让你的生活更轻松。。。

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

虽然我不认为这是最好的方法（考虑到更新WordPress时可能出现的后续冲突），但我认为这是最容易获得它的wat。

希望有帮助！

SO网友:Roman Stone

这是我的简单解决方案，它将添加一个复选框而不覆盖“wplink”。js\'

add_action(\'admin_print_footer_scripts\', function() {
    ?>
    <script type="text/javascript">
    /* <![CDATA[ */
    (function($) {
      $(function() {
        $(document).on("wplink-open", function(inputs_wrap) {
          $("#link-options").append(
            $("<div></div>").addClass("link-nofollow").html(
              $("<label></label>").html([
                $("<span></span>"),
                $("<input></input>").attr({"type": "checkbox", "id": "wp-link-nofollow"}),
                "rel=\\"nofollow\\""
              ])
            )
          );
          if (wpLink && typeof(wpLink.getAttrs) == "function") {
            wpLink.getAttrs = function() {
              wpLink.correctURL();
              <?php /* [attention] Do not use inputs.url.val() or any input.* */ ?>
              return {
                href: $.trim( $("#wp-link-url").val() ),
                target: $("#wp-link-target").prop("checked") ? "_blank" : null,
                rel: $("#wp-link-nofollow").prop("checked") ? "nofollow" : null
              };
            };
          }
        });
      });
    })(jQuery);
    /* ]]> */
    </script>
    <?php
}, 45);

SO网友:Bhautik Nada

在我的情况下，我希望将复选框添加到enable \'rel=sponsored\' 正如谷歌建议的那样，从2020年起，被赞助的帖子将被标记为“立即被赞助”，而不是“无后续”。

/**
 * Custom scripts for Admin
 */

jQuery( document ).ready( function() {
    // Adding custom checkbox to enable sponsored link
    jQuery( \'#link-options\' ).append( \'<div><label><span></span> <input type="checkbox" id="wpse-rel-sponsored"/> Sponsored Link</label></div>\');

    // Override buildHtml function from wplink.js
    wpLink.buildHtml = function(attrs) {
        var sponsored = jQuery( \'#wpse-rel-sponsored\' ).prop( \'checked\' ) ? true : false;
        var html = \'<a href="\' + attrs.href + \'"\';

        if ( sponsored && attrs.target ) {
            html += \' rel="sponsored" target="\' + attrs.target + \'"\';  // \'Sponsored\' and \'New tab\' selected
        } else if ( sponsored ) {
            html += \' rel="sponsored" \'; // Only \'Sponsored\' selected
        } else if ( attrs.target ) {
            html += \' rel="noopener" target="\' + attrs.target + \'"\'; // Only \'new tab\' selected
        }
        return html + \'>\';
    }
} );

小码农CODE

向wplink对话框添加自定义选项

相关推荐

Permalinks for pages