Tambahkan opsi khusus ke dialog tautan

16

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:

masukkan deskripsi gambar di sini

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

caramba
sumber

Jawaban:

18

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:

tidak ada opsi ikuti

dengan HTML berikut:

html

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

birgire
sumber
Saya suka jawaban ini karena terlihat sangat mudah. Masalahnya bukan hanya pembaruan tautan, juga jika saya memiliki banyak tautan di situs yang sama nilainya tetap merupakan yang terakhir yang dipilih meskipun dari tautan yang berbeda. Masih bisa berguna bagi seseorang!
caramba
Saya memperbarui jawabannya dengan contoh no-follow-link @caramba
birgire
Hey @birgire, bagaimana mengambil nilai hrefjika pengguna tidak membuka dialog tetapi hanya menggunakan kotak popup pertama yang memiliki placeholder: Paste URL or type to search?
MinhTri
1
Saya pikir saya menggunakan mce_external_pluginsfilter untuk memuat file skrip atau after_wp_tiny_mcehook untuk menyuntikkan snippet (dengan bagian append sebagai string baris tunggal), untuk menguji ini. The getAttrsMetode sini hanya akan menimpa nilai dari dialog link pengaturan, saya belum melihat ke bagaimana menimpa nilai dari input inline. Mungkin mengganti wp_link_applyperintah jika memungkinkan? Saya pikir ini mungkin pertanyaan baru yang bagus ;-) @
Dan9
@birgire Terima kasih! Akhirnya, saya telah menemukan di mana mendapatkannya. WordPress menggunakan tinymce.ui.Control.extend.setUrlplugin wp-includes/js/tinymce/plugins/wplink/plugin.js.
MinhTri
3

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!

Capiedge
sumber
Terima kasih atas informasi dan tautan plugin. Saya juga akan melihat ke dalam plugin dan melihat bagaimana mereka menyelesaikannya ...
caramba
Saya menyelesaikannya dengan melihat sumber plugin yang disebutkan dalam jawaban ini yang dapat ditemukan di github github.com/ffsantos92/rel-nofollow-checkbox jika ada yang membutuhkannya. Saya hanya perlu mengubah 5 kata atau lebih ...
caramba