Wplink iletişim kutusuna özel seçenekler ekleme

İle resimler için özel bir seçenek-seçim eklemeyi başardım

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

Şimdi bağlantılar için hemen hemen aynı şeyi yapmam gerekiyor. Eğer tıklarsam şunu elde Pages -> Add New -> Insert / Edit Linkederim:

Bu bağlantılar için başka bir seçenek seçme alanı ekleyebilir miyim? Bu nasıl yapılır?

HTML diyalogu geliyor WP_Editors::wp_link_dialog()ama içinde kanca yok.

Onun yerine bağlantı iletişim kutusuna özel HTML eklemek için jQuery kullanmak ve örneğin iptal etmek deneyebilirsiniz wpLink.getAttrs()çok kısa olduğu için, ;-)

Demo örneği:

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

Ben sadece hızlı bir test yaptım ve işe yarıyor gibi görünüyor ama bağlantıları güncellerken daha fazla test ve ayarlamalar gerekiyor. İşte yenilenmesi gerekebilecek eski bir kesmek .

Güncelleme

rel="nofollow"Bağlantı iletişim kutusuna seçeneği eklemek istediğiniz gibi görünüyor , bu nedenle bu durum için yukarıdaki yaklaşımı güncelleyelim:

relLink özelliğini aşağıdakilerle ekliyoruz :

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

Eğer relözellik boş, o zaman otomatik olarak editör bağlantıdan kaldırılacaktır.

Ardından wplink-open, bağlantı iletişim kutusu açıldığında tetiklenen olaya bağlanabiliriz. Burada özel HTML kodumuzu enjekte edebilir ve mevcut bağlantı seçimine göre güncelleyebiliriz:

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

});

Burada getLink(), seçilen bağlantının HTML'sini almak için temel işleve dayalı olarak aşağıdaki yardımcı işlevi kullanırız :

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

İşte çıktı:

aşağıdaki HTML ile:

ps: Bu daha fazla test edilebilir ve ayrıca çevirileri desteklemek için genişletilebilir

Çekirdeğe baktığımızda, wp_link_dialogişlevde hayatınızı kolaylaştıracak herhangi bir filtre veya eylem izi yoktur ...

Başkalarının bu sorunu nasıl çözdüğünü araştıran, istediğiniz gibi aşağı yukarı aynı şeyi yapan bir eklenti var. Temel olarak wplink.js kaydının silinmesine neden olur wp_deregister_script('wplink');ve bu sefer istenen ekstra alan dahil olmak üzere dosyanın değiştirilmiş bir sürümünü yeniden kaydeder.

Bu en iyi yöntem olduğunu düşünmese de (WordPress'i güncellerken olası sonraki çakışmaları dikkate alarak), bunu elde etmenin en kolay wat olduğunu düşünüyorum.

Umarım yardımcı olur!