web-dev-qa-db-ja.com

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

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

これが私の言っていることのスクリーンショットです。 enter image description here

postslinksapiwysiwyghtml-editor
12
Benny Neugebauer

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

始めるには：

リンクポップアップのJavaScriptとスタイルをエンキューします。メインの.jsファイルはwp-includes/wplink.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."};

これでshouldは以下のようなものを使って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

これには大きな問題があります。つまり、wpLink.closeやwpLink.textareaのようなクローズまたは送信（またはチェック）用のJavaScriptを関数に追加しなかったため、詳細についてはwplink.jsを参照してください。

すみません、これは単に私が何か基本的なものを見逃していない限り、いじるのに時間がかかりますが、それはあなたがほとんどの道を得るはずです。

8
Wyck