web-dev-qa-db-ja.com

Pluginで標準のバックエンド要素を使う

私は現在会社のためのプラグインを書いています。管理者がプラグインで使用される設定を変更できるカスタムバックエンドページを作成しました。

1つのサイトに情報が多すぎるため、現在は非常に面倒です。少し整理するために、セクションに分けて説明します。

たとえば、WordPressが使用しているのと同じ要素を使用できれば理想的です。たとえば、

enter image description here

折りたたみ/拡張機能全体が自動的にそれと一緒になるとしたら素晴らしいでしょう。残念ながら、それを実行する方法が見つかりませんでした。

これらの要素を統合することは可能ですか？どうやってするか？

pluginsplugin-developmentcssuser-interface
3
colosso

プラグイン画面を「WordPress」スタイルで整理するには、いくつかの選択肢があります。私はページタブ、Ui要素などの使用をカバーするいくつかのリソースを以下に含めました。

しかし、WordPress自身の拡張ボックスのスタイルと機能をエミュレートするには、プラグインページで次のマークアップを使用してください。

<div class="wrap">
    <div id="poststuff">
        <div id="postbox-container" class="postbox-container">
            <div class="meta-box-sortables ui-sortable" id="normal-sortables">
                <div class="postbox " id="test1">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 1</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>

                <div class="postbox " id="test2">
                    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Test 2</span></h3>
                    <div class="inside">
                        testing content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

また、ワードプレスからのスクリプト、カスタムスクリプトからのスクリプトもいくつかエンキューする必要があります。 plugin-page-suffixをあなたのプラグインページの実際の接尾辞に必ず変更してください。これはあなたのプラグインページのpostboxesのみをオーバーライドし、wp-adminのすべてのページをオーバーライドするのではないかを確認します。これをプラグインコントローラに追加してください。

function wpseo_129955_admin_scripts($suffix) {
    if($suffix == 'plugin-page-suffix'){
        wp_enqueue_script( 'postbox' );
        wp_enqueue_script( 'postbox-edit', 'path-to-file/postbox-edit.js', array('jquery', 'postbox') );
    }
}
add_action( 'admin_enqueue_scripts', 'wpseo_129955_admin_scripts' );

それからpostbox-edit.jsの中に、以下を含めます。

jQuery(document).on('ready', function($){
    postboxes.save_state = function(){
        return;
    };
    postboxes.save_order = function(){
        return;
    };
    postboxes.add_postbox_toggles();
});

上記のスクリプト内では、ネイティブの折りたたみ式ボックスを処理するためにWordPress独自のコードを実行するだけです。また、ポストボックスオブジェクトの2つのメソッドをオーバーライドして、コードがスパムを起こしているかどうかに関係なくajaxリクエストをスパムするのを防ぎます。

WP 3.8を使用してローカルインストールでテスト済み

どんな質問でも、ちょうど尋ねてください。

リソース

6
MichaelJames