WordPressウィジェットの「リンクの追加」ポップアップの使用方法


12

WordPressのWYSIWYGエディターでは、テキストへのリンクを追加する場合にポップアップが表示されます。この機能にアクセスする可能性はありますか?作成したWordPressウィジェットにこのポップアップを使用して、ウィジェットをバックエンドで構成した場合にウィジェットにリンクを追加できるようにするためです。

ここに私が意味するもののスクリーンショットがあります: ここに画像の説明を入力してください

回答:


8

私は少し試してみましたが、これを完全に機能させることはできませんでしたが、近いので<form>、ポップアップスタイルをハードコーディングして拡張するのは難しいです。

開始するには、次のことができます。

リンクポップアップのJavaScriptとスタイルをキューに登録しますwp-includes/wplink.js。メインの.jsファイルはです。これをロードする場所に応じて、いくつかのスクリプト(thickbox、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>ここで貼り付けるのに長い道のりであるポップアップのための要素が必要です、ここでデフォルトの1つを見ることができます:https ://gist.github.com/wycks/6402573

現在、これには大きな問題があります。つまり、wpLink.closeまたはなどの関数にjavascriptを閉じたり送信(またはチェック)したりwpLink.textareaしなかったので、詳細wplink.jsを参照してください。

申し訳ありませんが、基本的なことを忘れない限り、これはいじくり回すのに時間がかかりますが、ほとんどの場合はそれで十分です。


手伝ってくれてありがとうございます。次を使用してスタイル/スクリプト参照を解決しました:<?wp_editor( ''、 ''); ?>-だから私はもっと短い解決策を得ることができます!ただし、選択したリンクを受信する方法については疑問が残っています。
ベニー

これを投稿してくれてありがとう。それは私が必要な答えを見つけることにつながりました。私の場合、「wpdialogs」スクリプトを明示的にキューに登録する必要がありましたが、依存関係として指定されたときに機能しませんでした。wp_enqueue_script('wpdialogs');
イニゴエスドル14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.