Tambahkan opsi khusus ke dialog tautan

Saya berhasil menambahkan opsi kustom-pilih untuk gambar dengan

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 );

Sekarang saya perlu melakukan hampir sama untuk tautan. Jadi jika saya klik Pages -> Add New -> Insert / Edit Linksaya mendapatkan ini:

Bisakah saya menambahkan bidang pilih opsi lain untuk tautan itu? Bagaimana cara melakukannya?

Dialog HTML berasal dari WP_Editors::wp_link_dialog()tetapi tidak ada kait di sana.

Kami dapat menggunakan jQuery sebagai gantinya untuk menambahkan HTML khusus ke dialog tautan dan mencoba menimpa mis. wpLink.getAttrs(), Karena sangat pendek ;-)

Contoh demo:

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

Saya baru saja melakukan tes cepat dan tampaknya berhasil tetapi perlu pengujian dan penyesuaian lebih lanjut saat memperbarui tautan. Ini hack lama yang saya lakukan yang mungkin perlu di-refresh.

Memperbarui

Sepertinya Anda ingin menambahkan rel="nofollow" opsi ke dialog tautan, jadi mari perbarui pendekatan di atas untuk kasus itu:

Kami menambahkan relatribut tautan dengan:

/**
 * 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' : ''
    };
}

Jika rel atributnya kosong, maka itu akan secara otomatis dihapus dari tautan di editor.

Lalu kita bisa mengaitkan ke wplink-openacara yang menyala ketika dialog tautan dibuka. Di sini kita dapat menyuntikkan HTML khusus kami dan memperbaruinya sesuai dengan pilihan tautan saat ini:

$(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 );
    }

});

tempat kami menggunakan fungsi pembantu berikut, berdasarkan getLink()fungsi inti, untuk mendapatkan HTML tautan yang dipilih:

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;
}

Inilah hasilnya:

dengan HTML berikut:

ps: Ini dapat diuji lebih lanjut dan mungkin juga diperluas untuk mendukung terjemahan

Melihat inti, tidak ada jejak filter atau tindakan apa pun di wp_link_dialog fungsi ini, yang akan membuat hidup Anda lebih mudah ...

Menyelidiki bagaimana orang lain memecahkan masalah ini, ada sebuah plugin yang melakukan kurang lebih sama seperti yang Anda inginkan. Pada dasarnya itu membatalkan wp_deregister_script('wplink');pendaftaran wplink.js, dan mendaftar lagi versi file yang dimodifikasi, kali ini termasuk bidang tambahan yang diinginkan.

Meskipun saya tidak berpikir ini adalah metode terbaik (dengan mempertimbangkan kemungkinan konflik berikutnya saat memperbarui WordPress), saya pikir itu adalah cara termudah untuk mendapatkannya.

Semoga ini bisa membantu!