組み込みのWordpressの「リンクの参照」機能を使用するにはどうすればよいですか?


9

私はウィジェットをコーディングしていて、通常の投稿またはページを編集するとき(小さなリンクアイコンをクリックしてポップアップにAJAX検索機能が表示されるとき)にできるように、ユーザーがリンクを選択できるようにしたい)。誰かがこれをどのように機能させるか知っていますか?アタッチしてクリックするHTMLボタンと、値を入力するフィールドがあります。

class-wp-editor.phpでいくつか興味深いものを見つけ、これらのファイルが必要かどうか疑問に思いました。

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

fullscreen.link();上記のファイルと同様に、呼び出し時にこのエラーが発生します:

Uncaught ReferenceError: wpActiveEditor is not defined

..そして、今のところ困惑しています。その変数を参照するJSは私には頭がおかしいからです。

正しい方向に向けてくれませんか?私はこれを動作させたいと思っています。それは私のウィジェットのためのキラーユーザーインターフェースを作るでしょう!

ここに画像の説明を入力してください

------編集-------

これまでのところ、私が以前に述べたスクリプトのインクルードを除いて、それほど多くのコードはありません。

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..リンクスクリプトを開くトリガーとなるJSの部分。

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

3
やりたいことのスクリーンショットまたはアニメーションGIF(LiceCapは素晴らしい無料のツールです)を作成してください。これまで想像するのは難しい。そして、コメントではなく編集してください。ありがとう。
kaiser

@kaiser-了解しました。私が今使っている機能が表示されます。PS-LICEcapが大好きです。
ダン

それでは、ウィジェットコード(コンテンツを構築する部分)を見せてください。使用しましたwp_editor()か?
kaiser

@kaiser-いくつかの追加コードが追加されました。これまでのところそれほどではありませんが、イベントをアタッチしてスクリプトを含めること以外はあまり期待していませんでしたが(結果が更新される場所を変更する場合があります)、ポップアップを開くことができません。
Dan

1
残念ながら、リンクチューザはTinyMCEエディタ用に特別に作成されています。私はスタンドアロンのバージョンに取り組んでおり、そこに約80%あります。これは基本的に、TinyMCEに依存しないリンクチューザーの書き直しです。
hereswhatidid 2013

回答:


2

開発に使用するメタボックスクラス内でリンクダイアログを呼び出します。その少しハックですが、より堅牢なものが開発されるまで行うことができます。

最初に必要なjsをエンキューし、次にwp-link jsファイルのメソッドを操作することにより、リンクボックスを呼び出すことができます。

wp-linkをエンキューしたことを確認してください

1 / wp_enqueue_script( 'wp-link' );

2 / UIを設定します。私は通常、ボタンを使用してリンクダイアログを呼び出し、テキストフィールドを使用してリンクURLを処理します。

3 /リンクダイアログを呼び出す

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 //スクリプトをエンキューします。以下をfunctions.phpファイルに追加し、ファイル名/パスを調整してください。

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

それをする必要があります。メタボックスクラスでも同じ方法を使用していますが、問題なく動作するようです。


デールさんに感謝します-これは非常に興味深いようです。前にボタンを作成してwp-linkスクリプトを呼び出すことはできましたが、この後にボタンを実行する方法がわかりませんでした。来週のプロジェクトの合間に、JS / AJAXをさらに学び、これを試してみるつもりです。どうもありがとう。
Dan

テーマの管理者側で.jsファイルをエンキューするだけです。上記を編集して、それを反映させます。
デールサトラー2014

0

RE:「どうしますか?(大体?)」

まず、WordPressのリンク機能と同じように作成します。テキスト入力フィールド、結果、機能を選択して送信(リンクを追加)ボタンです。

Ajax-これは、テキストが入力に入力されたときに発生し、検索語に基づいて結果のセットを返します。クイックサーチプラグインであるWP Jarvisを使っ何をしたか見てみましょう。ajaxurl(admin-ajax.php)をターゲットにするajax呼び出しを設定し、phpにアクションフックを設定してクエリを実行し、結果をjson形式でエコーするだけです。結果には、各結果のタイトル、投稿タイプ、パーマリンクを含める必要があります。プラグインでのajaxの詳細を読んでください。

最後に、関心のある結果を選択すると、jsonオブジェクトからパーマリンクが取得され、ウィジェットフィールドに挿入されます。

これが完全な答えではないことはわかっていますが、これが役立つことを願っています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.