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

No editor WYSIWYG do WordPress, você será exibido se desejar adicionar um link para um texto. Existe a possibilidade de acessar esta funcionalidade? Porque eu quero usar esse pop-up para um widget WordPress que eu criei para que você possa adicionar links a um widget se você o configurar no back-end.

Aqui está uma captura de tela do que quero dizer: insira a descrição da imagem aqui

— Benny Neugebauer
fonte

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

Para começar, você pode:

Coloque o javascript e os estilos do pop-up do link, o principal arquivo .js é wp-includes/wplink.js. Dependendo de onde você está carregando isso, pode ser necessário adicionar mais / menos scripts / estilos, pois 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ê deve poder estender a wpLinkfunção 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 <form>elemento para o pop-up que, por padrão, é muito longo para colar aqui, você pode ver o padrão aqui: https://gist.github.com/wycks/6402573

Agora, existem grandes problemas com isso, ou seja, não adicionei nenhum javascript de fechamento ou envio (ou verificação) à função, como wpLink.closeou wpLink.textarea, portanto, consulte wplink.jsmais informações.

Desculpe, isso leva muito tempo para se mexer, a menos que eu esteja perdendo algo básico, mas isso deve levá-lo a maior parte do caminho.

— Wyck
fonte

Muito obrigado pela sua ajuda. Resolvi as referências de estilo / script usando: <? wp_editor ('', ''); ?> - Então, talvez eu possa obter uma solução mais curta! Mas ainda há a pergunta sobre como receber o link selecionado.

— Benny Neugebauer

Obrigado por postar isso; isso me levou a encontrar a resposta que eu precisava. No meu caso, eu apenas tive que enfileirar explicitamente o script "wpdialogs", que não estava funcionando quando especificado como uma dependência. wp_enqueue_script('wpdialogs');

— Inigoesdr