Fügen Sie benutzerdefinierte Optionen zum wplink Dialog

Es ist mir gelungen, eine benutzerdefinierte Optionsauswahl für Bilder mit hinzuzufügen

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

Jetzt muss ich fast dasselbe für Links tun. Also , wenn ich auf klicken Pages -> Add New -> Insert / Edit Linkich dieses:

Kann ich ein weiteres Optionsauswahlfeld für diese Links hinzufügen? Wie geht das?

Der Dialog HTML kommt von dort WP_Editors::wp_link_dialog()aber keine Haken drin.

Wir könnten stattdessen jQuery verwenden , um die benutzerdefinierte HTML - Link - Dialog anzuhängen und versuchen , außer Kraft zu setzen zB die wpLink.getAttrs(), weil es sehr kurz ist ;-)

Demo Beispiel:

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

Ich habe gerade einen Schnelltest durchgeführt und es scheint zu funktionieren, aber ich muss weitere Tests und Anpassungen vornehmen, wenn ich Links aktualisiere. Hier ist ein alter Hack , den ich gemacht habe, der eine Auffrischung braucht.

Aktualisieren

Es sieht so aus, als ob Sie das hinzufügen möchten rel="nofollow" Option auf den Link Dialog, also lassen Sie uns Update den oben beschriebenen Ansatz für diesen Fall:

Wir fügen das relLink-Attribut hinzu mit:

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

Wenn das rel Attribut leer ist, wird es automatisch aus dem Link im Editor entfernt.

Dann können wir uns in das wplink-openEreignis einklinken, das ausgelöst wird, wenn der Linkdialog geöffnet wird. Hier können wir unser benutzerdefiniertes HTML einfügen und es entsprechend der aktuellen Linkauswahl aktualisieren:

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

});

wo wir die folgende Hilfsfunktion, basierend auf der Verwendung getLink()Kernfunktion, den HTML - Code des ausgewählten Link zu erhalten:

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

Hier ist die Ausgabe:

mit folgendem HTML:

ps: Dies könnte weiter getestet und auch erweitert werden, um Übersetzungen zu unterstützen

Mit Blick auf den Kern gibt es keine Spur von Filtern oder Aktionen in der wp_link_dialog Funktion, die Ihnen das Leben erleichtert hätten ...

Um herauszufinden, wie andere dieses Problem gelöst haben, gibt es ein Plugin , das mehr oder weniger genau das macht, was Sie wollen. Grundsätzlich wird die wplink.js abgemeldet,wp_deregister_script('wplink'); und erneut eine geänderte Version der Datei registriert, diesmal einschließlich des gewünschten zusätzlichen Felds.

Obwohl ich nicht denke, dass dies die beste Methode ist (unter Berücksichtigung möglicher nachfolgender Konflikte beim Aktualisieren von WordPress), denke ich, dass dies die einfachste ist, um es zu bekommen.

Ich hoffe es hilft!