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

16

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:

entrez la description de l'image ici

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

caramba
la source

Réponses:

18

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:

aucune option de suivi

avec le code HTML suivant:

html

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

Birgire
la source
J'ai beaucoup aimé cette réponse car elle semblait si facile. Le problème n'était pas seulement la mise à jour des liens, aussi si j'avais plusieurs liens sur le même site, la valeur restait la dernière qui avait été choisie même si à partir d'un lien différent. Cela pourrait quand même être utile pour quelqu'un!
caramba
J'ai mis à jour la réponse avec un exemple sans lien de suivi @caramba
birgire
Hey @birgire, comment récupérer la valeur de hrefsi l' utilisateur ne pas ouvrir la boîte de dialogue , mais il suffit d' utiliser la première boîte de pop - up qui a l'espace réservé: Paste URL or type to search?
MinhTri
1
Je pense que j'ai utilisé le mce_external_pluginsfiltre pour charger le fichier de script ou le after_wp_tiny_mcecrochet pour injecter l'extrait (avec la partie append comme une chaîne de ligne unique), pour tester cela. La getAttrsméthode ici ne remplacera que la valeur de la boîte de dialogue des paramètres de lien, je n'ai pas cherché à remplacer la valeur de l'entrée en ligne. Peut-être remplacer la wp_link_applycommande si possible? Je pense que cela pourrait être une bonne nouvelle question ;-) @ Dan9
birgire
@birgire Merci! Enfin, j'ai trouvé où l'obtenir. WordPress utilise tinymce.ui.Control.extend.setUrldans le plugin wp-includes/js/tinymce/plugins/wplink/plugin.js.
MinhTri
3

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!

Capiedge
la source
Merci pour les informations et le lien du plugin. Je vais aussi regarder le plugin et voir comment ils l'ont résolu ...
caramba
Je l'ai résolu en regardant la source du plugin mentionné dans cette réponse qui peut être trouvée sur github github.com/ffsantos92/rel-nofollow-checkbox si quelqu'un en a besoin. Je n'ai eu qu'à changer 5 mots ou plus ...
caramba