¿Cómo puedo usar la funcionalidad incorporada de "enlace de navegación" de Wordpress?


9

Estoy codificando un widget y me gustaría que el usuario pueda elegir un enlace como puede al editar una publicación o página normal (cuando hace clic en el pequeño icono de enlace y obtiene la funcionalidad de búsqueda AJAX en la ventana emergente ) ¿Alguien sabe cómo hago que esto funcione? Tengo un botón HTML que me gustaría adjuntar y hacer clic incluso en, y un campo para que ingrese el valor.

En class-wp-editor.php encontré algunas cosas interesantes y me pregunté si podría necesitar estos archivos ...?

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

Al llamar fullscreen.link();, como el archivo mencionado anteriormente, me sale este error:

Uncaught ReferenceError: wpActiveEditor is not defined

..y estoy perplejo por ahora, porque el JS que hace referencia a esa variable me parece una locura.

¿Te importaría señalarme en la dirección correcta? Me encantaría hacer que esto funcione, ¡creará una interfaz de usuario excelente para mis widgets!

ingrese la descripción de la imagen aquí

------editar-------

No es mucho código hasta ahora, aparte de las inclusiones de script que he establecido anteriormente;

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..la parte del JS que se supone que activa el script de enlace para abrir;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

3
Haga una captura de pantalla o un GIF animado ( LiceCap es una herramienta agradable y gratuita) de lo que desea hacer. Difícil de imaginar hasta ahora. Y haga una edición y no un comentario. Gracias.
kaiser

@kaiser - Ok, listo. Verá la funcionalidad que busco ahora. PD: me encanta LICEcap, ¡gracias por la sugerencia!
Dan

Bueno, entonces muéstranos tu código de widget (la parte que construye el contenido). ¿Usaste wp_editor()?
kaiser

@kaiser: se agregó un código adicional. No es mucho hasta ahora, pero no esperaba hacer mucho más que adjuntar un evento e incluir el script (tal vez modificar dónde se actualiza el resultado), pero hasta ahora no puedo abrir la ventana emergente.
Dan

1
Desafortunadamente, el selector de enlaces está escrito específicamente para el editor TinyMCE. Estoy trabajando en una versión que está sola y la tengo alrededor del 80%. Básicamente es una reescritura del selector de enlaces sin las dependencias de TinyMCE.
hereswhatidid

Respuestas:


2

Invoco el diálogo de enlace dentro de la clase metabox que uso para el desarrollo. Es un poco hacky, pero se puede hacer, hasta que se desarrolle algo más robusto .

Puede invocar el cuadro de enlace colocando primero los js requeridos y luego interactuando con los métodos de archivos wp-link js.

Asegúrate de haber puesto en cola wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / Configura tu interfaz de usuario. Usualmente uso un botón para invocar el diálogo de enlace y un campo de texto para manejar los enlaces URL.

3 / Invocar diálogo de enlace

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // secuencias de comandos en cola. Agregue lo siguiente a su archivo functions.php, y ajuste los nombres / rutas de archivo para adaptarse.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Debería hacerlo. Uso el mismo enfoque en mi clase metabox y parece funcionar bien.


Gracias por la publicación Dale, esto se ve muy interesante. Llegué a hacer el botón antes y llamé al script wp-link, pero no sabía cómo hacerlo funcionar después de esto. Voy a tratar de aprender un poco más de JS / AJAX durante la próxima semana entre proyectos y darle una oportunidad. Muchas gracias.
Dan

Solo necesita poner en cola un archivo .js en el lado de administración de su tema. Editaré lo anterior para reflejar eso.
Dale Sattler

0

RE: "¿Cómo lo harías? (¿Aproximadamente?)"

Primero, lo construiría de manera similar a la funcionalidad de enlace en WordPress: un campo de texto de entrada, resultados, seleccionar funcionalidad y botón de enviar (agregar enlace).

Ajax: esto se dispararía cuando se ingresa texto en la entrada, devolviendo un conjunto de resultados basados ​​en el término de búsqueda. Eche un vistazo a lo que hicimos con nuestro complemento de búsqueda rápida , WP Jarvis. Solo necesita configurar la llamada ajax para apuntar a ajaxurl (admin-ajax.php) y establecer un enlace de acción en su php para ejecutar la consulta y hacer eco de los resultados en formato json. Desea que los resultados incluyan título, tipo posterior y enlace permanente para cada resultado. Lea más sobre ajax en complementos .

Finalmente, seleccionar el resultado que le interesa tomaría el enlace permanente del objeto json y lo insertaría en el campo del widget.

Sé que esta no es una respuesta completa, pero espero que esto ayude.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.