Cómo utilizar la ventana emergente "Agregar enlace" para un widget de WordPress

En el editor WYSIWYG de WordPress, aparece un mensaje emergente si desea agregar un enlace para un texto. ¿Existe la posibilidad de acceder a esta funcionalidad? Porque quiero usar esta ventana emergente para un widget de WordPress que creé para que pueda agregar enlaces a un widget si lo configura en el back-end.

Aquí hay una captura de pantalla de lo que quiero decir: ingrese la descripción de la imagen aquí

— Benny Neugebauer
fuente

Lo intenté un poco y no pude lograr que esto funcionara perfectamente, pero está cerca, es difícil de extender con los <form>estilos emergentes codificados, lo que se cree posible con más trabajo.

Para comenzar puedes:

Poner en cola el enlace emergente javascript y estilos, el archivo .js principal es wp-includes/wplink.js. Dependiendo de dónde cargue esto, es posible que deba agregar más o menos scripts / estilos, ya que depende de varios ( thickbox, jQuery-ui, ui-dialog, etc. ).

wp_enqueue_script('wplink');
wp_enqueue_script('wpdialogs-popup'); //also might need this

// need these styles
wp_enqueue_style('wp-jquery-ui-dialog');
wp_enqueue_style('thickbox');

Establezca la variable traducible:

var wpLinkL10n = {"title":"Insert\/edit link","update":"Update","save":"Add Link","noTitle":"(no title)","noMatchesFound":"No matches found."};

Ahora debería poder extender la wpLinkfunción usando algo como:

// test button
<button class="link-btn">Click button for Links</button>

jQuery('.link-btn').on('click', function(event) {
  wpActiveEditor = true;
  wpLink.title = "Hello"; //Custom title example
  wpLink.open();    // Open the link popup
  return false;
});

Necesita un <form>elemento para la ventana emergente que, por defualt, es demasiado largo para pegar aquí, puede ver el defualt aquí: https://gist.github.com/wycks/6402573

Ahora hay problemas importantes con esto, es decir, no agregué ningún javascript de cierre o envío (o verificación) a la función, como wpLink.closeo wpLink.textarea, así que consulte wplink.jspara obtener más información.

Lo siento, esto solo toma mucho tiempo para jugar, a menos que me esté perdiendo algo básico, pero eso debería ayudarte la mayor parte del camino.

— Wyck
fuente

Muchas gracias por su ayuda. Resolví las referencias de estilo / script usando: <? wp_editor ('', ''); ?> - ¡Entonces quizás pueda obtener una solución más corta! Pero aún queda la pregunta sobre cómo recibir el enlace seleccionado.

— Benny Neugebauer

Gracias por publicar esto; me llevó a encontrar la respuesta que necesitaba. En mi caso, solo tuve que poner en cola explícitamente el script "wpdialogs", que no funcionaba cuando se especificaba como una dependencia. wp_enqueue_script('wpdialogs');

— Inigoesdr