Agregar opciones personalizadas al diálogo de wplink

Question

Agregar opciones personalizadas al diálogo de wplink

#1 de birgire (18 votos)
#2 de Capiedge (3 votos)

14

Logré agregar una opción personalizada para seleccionar imágenes con

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

Ahora necesito hacer casi lo mismo para los enlaces. Entonces, si hago clic en Pages -> Add New -> Insert / Edit Link , obtengo esto:

¿Puedo agregar otro campo de selección de opción para esos enlaces? ¿Cómo hacer eso?

filters visual-editor links

pregunta caramba 02.06.2016 - 09:24

2 respuestas

3

Mirando el núcleo, no hay rastro de ningún filtro o acción en la función wp_link_dialog , lo que hubiera hecho tu vida más fácil ...

Investigando cómo otros han resuelto este problema, hay un un complemento que hace más o menos lo mismo que tú querer. Básicamente, cancela el registro de wplink.js, wp_deregister_script('wplink'); y vuelve a registrar una versión modificada del archivo, esta vez con el campo adicional deseado.

Aunque no creo que este sea el mejor método (teniendo en cuenta los posibles conflictos subsiguientes al actualizar WordPress), creo que es el wat más fácil de obtener.

Espero que ayude!

respondido por el Capiedge 02.06.2016 - 10:49

Lea otras preguntas en las etiquetas filters visual-editor links

¿Es posible eliminar el campo de nombre de usuario de la página de registro? ¿Si es así, cómo? ¿Cómo excluyo que los complementos se actualicen automáticamente?

score 18 · Accepted Answer

El cuadro de diálogo HTML proviene de WP_Editors::wp_link_dialog() pero no hay ganchos allí.

En su lugar, podríamos usar jQuery para agregar el HTML personalizado al cuadro de diálogo de enlace e intentar anularlo, por ejemplo. el wpLink.getAttrs() , porque es muy corto ;-)

Ejemplo de demostración:

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

Acabo de hacer una prueba rápida y parece funcionar, pero necesita más pruebas y ajustes al actualizar los enlaces. Aquí hay un antiguo truco que hice que podría necesitar una actualización .

Actualizar

Parece que desea agregar la opción rel="nofollow" al cuadro de diálogo de enlace, así que actualicemos el enfoque anterior para ese caso:

Agregamos el atributo rel link con:

/**
 * 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 el atributo rel está vacío, se eliminará automáticamente del enlace en el editor.

Luego podemos enganchar en el evento wplink-open que se activa cuando se abre el cuadro de diálogo de enlace. Aquí podemos inyectar nuestro HTML personalizado y actualizarlo de acuerdo con la selección de enlaces actual:

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

});

donde usamos la siguiente función de ayuda, basada en la función getLink() core, para obtener el HTML del enlace seleccionado:

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

Aquí está la salida:

conelsiguienteHTML:

ps: Esto podría probarse más a fondo y también podría extenderse para admitir traducciones