web-dev-qa-db-ja.com

内蔵のWordpressの「ブラウズリンク」機能を使用するにはどうすればよいですか？

私はウィジェットをコーディングしていて、通常の投稿やページを編集するときにあなたができる限りあなたができるようにリンクを選ぶことができることを望みます（あなたが小さなリンクアイコンをクリックしてあなたが得るとき AJAX ポップアップの検索機能）私はこれがどのように機能するかを誰かが知っていますか？添付してクリックしたいHTMLボタンと、値を入力するためのフィールドがあります。

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

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

上記のファイルのようにfullscreen.link();を呼び出すと、このエラーが発生します。

Uncaught ReferenceError: wpActiveEditor is not defined

その変数を参照するJSは私にとって頭がおかしいようです。

私を正しい方向に向けるように気を付けてください。私はこれを機能させたいです、それは私のウィジェットのためのキラーなユーザーインターフェースを作るでしょう！

enter image description here

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

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

<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();
});
widgetslinkswp-enqueue-script
9
Dan

開発に使用するメタボックスクラス内でリンクダイアログを呼び出します。それはちょっと厄介ですが、もっと何か{ robust が開発されるまでは可能です。

リンクボックスを呼び出すには、まず必要な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' );

それをやるべきです。私は私のメタボックスクラスで同じアプローチを使います、そしてそれはうまくいくようです。

2
Dale Sattler

RE：「どうしますか（大体？）」

まず、WordPressのリンク機能と同じように構築します。入力テキストフィールド、結果、機能の選択、および送信（リンクの追加）ボタン。

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

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

私はこれが完全な答えではないことを知っています、しかし私はこれが助けを願っています。

0
MikeNGarrett