Fügen Sie benutzerdefinierte Optionen zum wplink Dialog

16

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:

Bildbeschreibung hier eingeben

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

Caramba
quelle

Antworten:

18

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:

Keine Verfolgungsoption

mit folgendem HTML:

html

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

birgire
quelle
Ich mochte diese Antwort sehr, weil sie so einfach aussah. Problem war aber nicht nur die Aktualisierung von Links, auch wenn ich mehrere Links auf derselben Seite hatte, blieb der Wert der letzte, der gewählt wurde, auch wenn von einem anderen Link. Könnte aber trotzdem für jemanden nützlich sein!
Caramba
Ich habe die Antwort mit einem No-Follow-Link-Beispiel @caramba
birgire am
Hey @birgire, wie kann ich den Wert abrufen, hrefwenn der Benutzer den Dialog nicht öffnet, sondern nur das allererste Popup-Fenster mit dem Platzhalter verwendet Paste URL or type to search?
MinhTri
1
Ich glaube, ich habe den mce_external_pluginsFilter verwendet, um die Skriptdatei zu laden, oder den after_wp_tiny_mceHook, um das Snippet zu injizieren (mit dem Anfügeteil als einzeilige Zeichenfolge), um dies zu testen. Die getAttrsMethode hier überschreibt nur den Wert aus dem Dialogfeld "Verknüpfungseinstellungen". Ich habe nicht untersucht, wie der Wert aus der Inline-Eingabe überschrieben werden kann. Möglicherweise den wp_link_applyBefehl überschreiben, wenn möglich? Ich denke das könnte eine gute neue Frage sein ;-) @ Dan9
birgire
@birgire Danke! Endlich habe ich herausgefunden, wo ich es bekommen kann. WordPress verwendet tinymce.ui.Control.extend.setUrlim Plugin wp-includes/js/tinymce/plugins/wplink/plugin.js.
MinhTri
3

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!

Capiedge
quelle
Vielen Dank für den Informations- und Plugin-Link. Ich werde auch in das Plugin schauen und sehen, wie sie es gelöst haben ...
Caramba
Ich habe es gelöst, indem ich mir die Quelle des in dieser Antwort erwähnten Plugins angesehen habe, die auf github github.com/ffsantos92/rel-nofollow-checkbox zu finden ist, falls jemand sie benötigt. Ich musste nur 5 Wörter oder so ändern ...
Caramba