Ajouter des options personnalisées à la boîte de dialogue wplink

J'ai réussi à ajouter une option de sélection personnalisée pour les images avec

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

Maintenant, je dois faire presque la même chose pour les liens. Donc, si je clique sur, Pages -> Add New -> Insert / Edit Linkj'obtiens ceci:

Puis-je ajouter un autre champ de sélection d'options pour ces liens? Comment faire ça?

La boîte de dialogue HTML vient de WP_Editors::wp_link_dialog()mais il n'y a pas de crochets.

Nous pourrions plutôt utiliser jQuery pour ajouter le code HTML personnalisé à la boîte de dialogue de lien et essayer de remplacer par exemple le wpLink.getAttrs(), car il est très court ;-)

Exemple de démonstration:

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

Je viens de faire un test rapide et il semble fonctionner mais a besoin de tests et d'ajustements supplémentaires lors de la mise à jour des liens. Voici un vieux hack que j'ai fait qui pourrait avoir besoin d'un rafraîchissement.

Mise à jour

Il semble que vous souhaitiez ajouter l' rel="nofollow"option à la boîte de dialogue de lien, alors mettons à jour l'approche ci-dessus pour ce cas:

Nous ajoutons l' relattribut link avec:

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

Si l' relattribut est vide, il sera automatiquement supprimé du lien dans l'éditeur.

Ensuite, nous pouvons nous connecter à l' wplink-openévénement qui se déclenche lorsque la boîte de dialogue de lien est ouverte. Ici, nous pouvons injecter notre code HTML personnalisé et le mettre à jour en fonction de la sélection de liens actuelle:

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

});

où nous utilisons la fonction d'assistance suivante, basée sur la getLink()fonction principale, pour obtenir le code HTML du lien sélectionné:

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

Voici la sortie:

avec le code HTML suivant:

ps: Cela pourrait être testé plus avant et pourrait également être étendu pour prendre en charge les traductions

En regardant le cœur, il n'y a aucune trace de filtre ou d'action dans la wp_link_dialogfonction, ce qui aurait rendu votre vie plus facile ...

En recherchant comment d'autres ont résolu ce problème, il existe un plugin qui fait plus ou moins la même chose que vous le souhaitez. Fondamentalement, il annule l' wp_deregister_script('wplink');enregistrement de wplink.js et enregistre à nouveau une version modifiée du fichier, cette fois en incluant le champ supplémentaire souhaité.

Bien que je ne pense pas que ce soit la meilleure méthode (en tenant compte des éventuels conflits ultérieurs lors de la mise à jour de WordPress), je pense que c'est le moyen le plus simple de l'obtenir.

J'espère que cela aide!