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

14

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:

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

    
posée caramba 02.06.2016 - 09:24

2 réponses

18

Le code HTML de la boîte de dialogue provient de WP_Editors::wp_link_dialog() , mais il n'y a pas de crochets.

Nous pourrions utiliser jQuery à la place pour ajouter le code HTML personnalisé à la boîte de dialogue de lien et essayer de remplacer, par exemple, par exemple. le 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 peut-être besoin de rafraîchir .

Mettre à jour

Il semble que vous souhaitiez ajouter l'option rel="nofollow" à la boîte de dialogue de lien. Nous allons donc mettre à jour 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.

Nous pouvons ensuite nous associer à 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 getLink() core, 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 le résultat:

aveclecodeHTMLsuivant:

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

    
réponse donnée birgire 02.06.2016 - 11:21
3

À la base, il n’ya aucune trace de filtre ou d’action dans la fonction wp_link_dialog , ce qui aurait facilité votre vie ...

En recherchant comment les autres ont résolu ce problème, il existe un plugin qui fonctionne plus ou moins comme vous. vouloir. Fondamentalement, il désenregistre le fichier wplink.js, wp_deregister_script('wplink'); et enregistre à nouveau une version modifiée du fichier, cette fois 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 simple de l'obtenir.

J'espère que ça aide!

    
réponse donnée Capiedge 02.06.2016 - 10:49

Lire d'autres questions sur les étiquettes