web-dev-qa-db-fra.com

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

J'ai réussi à ajouter une option-select 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 Link je reçois ceci:

 enter image description here 

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

filterslinksvisual-editor
15
caramba

La boîte de dialogue HTML provient de WP_Editors::wp_link_dialog() mais pas de crochets.

Nous pourrions utiliser plutôt jQuery pour ajouter le code HTML personnalisé à la boîte de dialogue de lien et essayer de remplacer, par exemple, par exemple. la wpLink.getAttrs(), parce que c'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 cela semble fonctionner, mais nécessite des tests supplémentaires et des ajustements lors de la mise à jour des liens. Voici un vieux hack que j'ai fait qui pourrait avoir besoin d'un rafraîchissement.

Mettre à jour

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

Nous ajoutons l'attribut de lien rel 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'attribut rel est vide, il sera automatiquement supprimé du lien dans l'éditeur.

Ensuite, nous pouvons nous connecter à l'événement wplink-open 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 du lien sélectionné:

$(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 fonction principale getLink(), 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:

 no follow option 

avec le code HTML suivant:

 html 

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

18
birgire

En regardant au cœur, il n’ya aucune trace de filtre ou d’action dans la fonction wp_link_dialog, ce qui aurait pu vous simplifier la vie ...

En recherchant comment les autres ont résolu ce problème, il y a un plugin qui fait plus ou moins la même chose que vous le souhaitez. En gros, il désenregistre le fichier wplink.js, wp_deregister_script('wplink'); et enregistre à nouveau une version modifiée du fichier, cette fois-ci avec 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 facile de l’obtenir.

J'espère que ça aide!

3
Capiedge