¿Cómo puedo usar la funcionalidad de "búsqueda de enlaces" incorporada en Wordpress?

9

Estoy codificando un widget y me gustaría que el usuario pueda elegir un enlace como tú cuando editas una publicación o página regular (cuando haces clic en el pequeño icono del enlace y obtienes la función de búsqueda AJAX en el pop up). ¿Alguien sabe cómo puedo hacer que esto funcione? Tengo un botón HTML que me gustaría adjuntar y hacer clic incluso para, y un campo para el valor que debe ingresar.

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 a fullscreen.link(); , como el archivo mencionado anteriormente, recibo 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 importa apuntarme en la dirección correcta? Me encantaría hacer que esto funcione, ¡hará una interfaz de usuario para mis widgets!

------edit-------

Nohaymuchocódigohastaahora,apartedelasinclusionesdescriptqueheindicadoanteriormente;

<labelfor="<?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 de la JS que se supone que debe activar la secuencia de comandos de enlace para abrir;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});
    
pregunta Dan 19.12.2013 - 19:20

2 respuestas

2

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

Puede invocar el cuadro de enlace primero encolando los js requeridos, y luego interactuando con los métodos de los 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. Normalmente utilizo un botón para invocar el diálogo de enlace y un campo de texto para manejar la URL de los enlaces.

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 // encolar guiones. Agregue lo siguiente a su archivo functions.php, y ajuste los nombres de los archivos / rutas para que se adapten.

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. Utilizo el mismo enfoque en mi clase de metabox y parece funcionar bien.

    
respondido por el Dale Sattler 25.02.2014 - 02:17
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, funcionalidad de selección y botón de envío (agregar enlace).

Ajax: esto se disparará cuando se ingrese 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 debe 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 repetir los resultados en formato json. Desearía que los resultados incluyeran título, posttipo y permalink para cada resultado. Lea más sobre ajax en complementos .

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

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

    
respondido por el MikeNGarrett 14.01.2014 - 18:22

Lea otras preguntas en las etiquetas