เพิ่มตัวเลือกที่กำหนดเองไปยังกล่องโต้ตอบ wplink

ฉันจัดการเพื่อเพิ่มตัวเลือกแบบกำหนดเองสำหรับภาพด้วย

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ฉันจะได้รับสิ่งนี้:

ฉันสามารถเพิ่มฟิลด์ตัวเลือกเลือกอื่นสำหรับลิงก์เหล่านั้นได้หรือไม่ ทำอย่างไร

HTML ไดอะล็อกมาจากWP_Editors::wp_link_dialog()แต่ไม่มี hooks อยู่ในนั้น

เราสามารถใช้ 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 ต่อไปนี้:

ps: สิ่งนี้สามารถทดสอบได้เพิ่มเติมและอาจขยายเพื่อรองรับการแปล

ดูที่แกนกลางไม่มีร่องรอยของตัวกรองหรือการกระทำใด ๆ ในwp_link_dialogฟังก์ชั่นซึ่งจะทำให้ชีวิตของคุณง่ายขึ้น ...

การตรวจสอบว่าผู้อื่นแก้ไขปัญหานี้ได้อย่างไรมีปลั๊กอินที่ทำงานเหมือนกับที่คุณต้องการไม่มากก็น้อย โดยทั่วไปจะยกเลิกการลงทะเบียน wplink.js wp_deregister_script('wplink');และลงทะเบียนไฟล์ที่แก้ไขอีกครั้งคราวนี้รวมถึงฟิลด์พิเศษที่ต้องการ

แม้ว่าฉันจะไม่คิดว่านี่เป็นวิธีที่ดีที่สุด (โดยคำนึงถึงความขัดแย้งที่อาจเกิดขึ้นภายหลังขณะอัปเดต WordPress) แต่ฉันคิดว่ามันเป็นวิธีที่ง่ายที่สุดในการรับมัน

หวังว่ามันจะช่วย!