Dodaj niestandardowe opcje do okna dialogowego wplink

Udało mi się dodać niestandardową opcję wyboru dla obrazów z

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

Teraz muszę zrobić prawie to samo dla linków. Więc jeśli kliknę Pages -> Add New -> Insert / Edit Link, otrzymam to:

Czy mogę dodać kolejne pole wyboru opcji dla tych łączy? Jak to zrobić?

HTML okna dialogowego pochodzi, WP_Editors::wp_link_dialog()ale nie ma tam żadnych zaczepów.

Zamiast tego moglibyśmy użyć jQuery, aby dołączyć niestandardowy kod HTML do okna dialogowego łącza i spróbować zastąpić np. wpLink.getAttrs(), Ponieważ jest on bardzo krótki ;-)

Przykład demonstracyjny:

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

Właśnie zrobiłem szybki test i wydaje się, że działa, ale wymaga dalszych testów i modyfikacji podczas aktualizacji linków. Oto stary włamany hack , który może wymagać odświeżenia.

Aktualizacja

Wygląda na to, że chcesz dodać rel="nofollow"opcję do okna dialogowego łącza, więc zaktualizujmy powyższe podejście w tym przypadku:

Dodajemy relatrybut link z:

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

Jeśli relatrybut jest pusty, zostanie automatycznie usunięty z łącza w edytorze.

Następnie możemy podłączyć się do wplink-openzdarzenia, które zostanie uruchomione po otwarciu okna dialogowego łącza. Tutaj możemy wstrzyknąć nasz niestandardowy kod HTML i zaktualizować go zgodnie z bieżącym wyborem linku:

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

});

gdzie używamy następującej funkcji pomocniczej, opartej na getLink()funkcji podstawowej, aby uzyskać HTML wybranego łącza:

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

Oto wynik:

z następującym kodem HTML:

ps: Można to przetestować dalej i rozszerzyć o obsługę tłumaczeń

Patrząc na rdzeń, nie ma śladu żadnego filtra lub działania w wp_link_dialogfunkcji, co ułatwiłoby Ci życie ...

Badając, w jaki sposób inni rozwiązali ten problem, istnieje wtyczka, która działa mniej więcej tak, jak chcesz. Zasadniczo wyrejestrowuje plik wplink.js wp_deregister_script('wplink');i ponownie rejestruje zmodyfikowaną wersję pliku, tym razem wraz z pożądanym dodatkowym polem.

Chociaż nie sądzę, że jest to najlepsza metoda (biorąc pod uwagę możliwe późniejsze konflikty podczas aktualizacji WordPressa), myślę, że najłatwiej jest ją zdobyć.

Mam nadzieję, że to pomoże!