it-swarm.com.de

Fügen Sie dem Wplink-Dialogfeld benutzerdefinierte Optionen hinzu

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. Wenn ich also auf Pages -> Add New -> Insert / Edit Link klicke, erhalte ich Folgendes:

 enter image description here 

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

15
caramba

Der Dialog HTML stammt von WP_Editors::wp_link_dialog(), aber es sind keine Hooks vorhanden.

Wir könnten stattdessen jQuery verwenden, um den benutzerdefinierten HTML-Code an den Link-Dialog anzuhängen und zu versuchen, z. die wpLink.getAttrs(), weil sie 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 gemacht und es scheint zu funktionieren, aber ich muss weitere Tests und Anpassungen vornehmen, wenn ich Links aktualisiere. Hier ist ein alter Hack dass ich das getan habe, könnte eine Aktualisierung benötigen.

Aktualisieren

Es sieht so aus, als ob Sie die Option rel="nofollow" zum Verknüpfungsdialog hinzufügen möchten. Aktualisieren Sie daher den obigen Ansatz für diesen Fall:

Wir fügen das rel link 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 Attribut rel leer ist, wird es automatisch aus dem Link im Editor entfernt.

Dann können wir uns in das wplink-open -Ereignis einklinken, das beim Öffnen des Verknüpfungsdialogs ausgelöst 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 );
    }

});

dabei verwenden wir die folgende Hilfsfunktion, die auf der Kernfunktion getLink() basiert, um den HTML-Code des ausgewählten Links abzurufen:

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:

 no follow option 

mit folgendem HTML:

 html 

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

18
birgire

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

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

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!

3
Capiedge