Aggiungi opzioni personalizzate alla finestra di dialogo di wplink

Sono riuscito ad aggiungere un'opzione personalizzata-selezionare per le immagini con

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

Ora devo fare quasi lo stesso per i link. Quindi se faccio clic su Pages -> Add New -> Insert / Edit Linkottengo questo:

Posso aggiungere un altro campo di selezione delle opzioni per quei collegamenti? Come farlo?

La finestra di dialogo HTML proviene WP_Editors::wp_link_dialog()ma non ci sono hook.

Potremmo invece usare jQuery per aggiungere l'HTML personalizzato alla finestra di dialogo dei collegamenti e provare a sovrascrivere, ad esempio wpLink.getAttrs(), perché è molto breve ;-)

Esempio dimostrativo:

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

Ho appena fatto un test rapido e sembra funzionare, ma ho bisogno di ulteriori test e regolazioni durante l'aggiornamento dei collegamenti. Ecco un vecchio trucco che ho fatto che potrebbe aver bisogno di un aggiornamento.

Aggiornare

Sembra che tu voglia aggiungere l' rel="nofollow"opzione alla finestra di dialogo del link, quindi aggiorniamo l'approccio sopra per quel caso:

Aggiungiamo l' relattributo link con:

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

Se l' relattributo è vuoto, verrà automaticamente rimosso dal collegamento nell'editor.

Quindi possiamo agganciarci wplink-openall'evento che si attiva quando viene aperta la finestra di dialogo del collegamento. Qui possiamo iniettare il nostro HTML personalizzato e aggiornarlo in base all'attuale selezione di collegamenti:

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

});

dove utilizziamo la seguente funzione di supporto, basata sulla getLink()funzione principale, per ottenere l'HTML del collegamento selezionato:

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

Ecco l'output:

con il seguente HTML:

ps: questo potrebbe essere ulteriormente testato e potrebbe anche essere esteso per supportare le traduzioni

Guardando il nucleo, non c'è traccia di alcun filtro o azione nella wp_link_dialogfunzione, che ti avrebbe semplificato la vita ...

Studiando come gli altri hanno risolto questo problema, c'è un plugin che fa più o meno lo stesso che desideri. Fondamentalmente annulla la registrazione di wplink.js wp_deregister_script('wplink');e registra nuovamente una versione modificata del file, questa volta includendo il campo aggiuntivo desiderato.

Anche se non penso che questo sia il metodo migliore (tenendo conto dei possibili conflitti successivi durante l'aggiornamento di WordPress), penso che sia il modo più semplice per ottenerlo.

Spero che sia d'aiuto!