8

カスタム メタボックスを頻繁に使用します。多くの場合、メタボックスに「リンク」フィールドがあります。単純なテキスト入力フィールドを使用してきましたが、WordPress コンテンツ エディターが使用するのと同じ「リンクの挿入」ダイアログを呼び出すボタンを配置する方法を見つけようとしています。それは可能ですか？

4

1 に答える 1

15

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

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

1 /wp_enqueue_script( 'wp-link' );

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

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

$('body').on('click', '.link-btn', function(event) {
            wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance
            wpLink.open(); //open the link popup
            return false;
        });

4 / リンクの保存を処理する

$('body').on('click', '#wp-link-submit', function(event) {
            var linkAtts = wpLink.getAttrs();//the links attributes (href, target) are stored in an object, which can be access via  wpLink.getAttrs()
            $('your_url_textfield').val(linkAtts.href);//get the href attribute and add to a textfield, or use as you see fit
            wpLink.textarea = $('body'); //to close the link dialogue, it is again expecting an wp_editor instance, so you need to give it something to set focus back to. In this case, I'm using body, but the textfield with the URL would be fine
            wpLink.close();//close the dialogue
//trap any events
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            event.stopPropagation();
            return false;
        });

5 / リンクキャンセルの処理

    $('body').on('click', '#wp-link-cancel, #wp-link-close', function(event) {
        wpLink.textarea = $('body');
        wpLink.close();
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        event.stopPropagation();
        return false;
    });

ぐらいやるべき。メタボックス クラスでも同じアプローチを使用していますが、問題なく動作しているようです。リンクダイアログのhtml要素への参照をハードコーディングしているので、ちょっとしたハックです。ダイアログには外部 API が必要です。おそらくWPに追加するのはそれほど難しいことではありません。

于 2012-11-26T04:51:10.110 に答える