web-dev-qa-db-pt.com

Como usar o "Adicionar link" pop up para um widget do WordPress

No editor WYSIWYG do WordPress você começa a aparecer se você quiser adicionar um link para um texto. Existe a possibilidade de acessar essa funcionalidade? Porque eu quero usar este pop-up para um widget do WordPress que eu criei para que você possa adicionar links para um widget se você configurá-lo no back-end.

Aqui está uma captura de tela do que quero dizer: enter image description here

12
Benny Neugebauer

Eu tentei um pouco e não consegui fazer isso funcionar perfeitamente, mas está próximo, é difícil estender com o <form> para os estilos de pop-up serem codificados, o que é possível com mais trabalho.

Para começar, você pode:

Enfileirar o link pop-up javascript e estilos, o arquivo .js principal é wp-includes/wplink.js. Dependendo de onde você está carregando isso, você pode precisar adicionar mais ou menos scripts/estilos, pois ele depende de vários ( 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');

Defina a variável traduzível:

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

Agora você deveria ser capaz de estender a função wpLink 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;
});

Você precisa de um elemento <form> para o pop-up que defualt é muito longo para colar aqui, você pode ver o seguinte: https://Gist.github.com/wycks/6402573

Agora, há grandes problemas com isso, ou seja, eu não adicionei nenhum javascript de fechamento ou submissão (ou verificação) à função, como wpLink.close ou wpLink.textarea, portanto, consulte wplink.js para mais informações.

Desculpe, isso só leva muito tempo para mexer com, a menos que eu esteja faltando algo básico, mas isso deve te dar a maior parte do caminho.

8
Wyck