Как использовать всплывающее окно «Добавить ссылку» для виджета WordPress


12

В редакторе WYSIWYG WordPress вы получаете всплывающее окно, если вы хотите добавить ссылку для текста. Есть ли возможность доступа к этой функции? Потому что я хочу использовать это всплывающее окно для созданного мной виджета WordPress, чтобы вы могли добавить ссылки на виджет, если вы настроите его в бэкэнде.

Вот скриншот того, что я имею в виду: введите описание изображения здесь

Ответы:


8

Я попытался немного и не мог заставить это работать идеально, но это близко, трудно расширять с <form>жестко закодированными для всплывающих стилей, думал, что возможно с большим количеством работы.

Для начала вы можете:

Поставьте в очередь ссылку всплывающего javascript и стили, основной файл .js wp-includes/wplink.js. В зависимости от того, где вы загружаете это, вам может понадобиться добавить больше или меньше скриптов / стилей, так как он опирается на несколько ( thinbox, jQuery-ui, ui-dialog и т . Д. ).

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');

Установите переводимую переменную:

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

Теперь вы должны быть в состоянии расширить wpLinkфункцию , используя что - то вроде:

// 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;
});

<form>Для всплывающего окна вам нужен элемент, который по умолчанию является длинным для вставки, вы можете увидеть этот элемент здесь: https://gist.github.com/wycks/6402573

Теперь есть серьезные проблемы с этим, а именно, я не добавил закрывающий или отправляющий (или проверяющий) javascript к функции, такой как wpLink.closeили wpLink.textarea, поэтому смотрите wplink.jsдля получения дополнительной информации.

Извините, это займет много времени, если я не пропущу что-то простое, но это должно помочь вам в этом.


Большое спасибо за Вашу помощь. Я решил ссылки на стиль / скрипт с помощью: <? wp_editor ('', ''); ?> - Так, может быть, я могу получить более короткое решение! Но остается вопрос, как получить выбранную ссылку.
Бенни Нойгебауэр,

Спасибо за публикацию этого; это привело меня к поиску нужного мне ответа. В моем случае мне просто пришлось явно поставить в очередь сценарий «wpdialogs», который не работал, когда был указан как зависимость. wp_enqueue_script('wpdialogs');
Inigoesdr
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.