web-dev-qa-db-ja.com

プラグイン AJAX テーブルと同期するために外部APIに問い合わせる

私は外部APIにフックし、いくつかの情報をいくつかのデータベーステーブルに同期するプラグインを書くことを計画しています。

もしあれば、私はこれをベストプラクティスの方法で行いたい。私はユーザーがプラグインの管理オプションの下にあるボタンをクリックしてcron経由のオプションとして手動でできるようにしたいです。

数分かかることがあると思いますので、何らかのボタンを使用してjQueryを使用してAJAXを介して開始するアクションをアタッチし、完了するまで何らかのタイマーを設定することを考えていました。

どういうわけかこれを達成するための方法を考えるのに苦労していて、ハックの仕事ではなくWP機能を使ったベストプラクティスの方法について少しの方向性を望みました。しばらく私の足を見つけようとしている間、しばらくの間私はプラグイン開発から目を離さなかった。

ajaxadminsync
1
Jimbo

スケッチ/コンセプト

リモート/外部APIにリクエストを送信するには、 WP HTTP API を使用します。より詳細な例/詳細 ここにある私のいくつかの答えで見つけることができる 。

それから管理ページを add_submenu_page() や add_menu_page() あるいは関連する関数で追加するだけです。

最後にadmin_enqueue_scriptsフックにwp_register/enqueue_script()経由でスクリプトを追加します。そこで、 ajax （アーカイブ検索）呼び出しを起動してテーブルを更新します。

プラグインで ajax を使う

とても簡単です。これは簡単なモックアップです。 すべて を実行するのに必要なことを示します すべて 可能なAJAX呼び出し。スクリプトの登録とキューイングを分割したので、いつでもどこでも必要なときにスクリプトをエンキューできます。

ナンス

ナンスと参照元のチェックはセキュリティのためにすでに実装されています。それはコンスタントネーミングスキームを使用するのでそれはそれほど混乱しにくくなります（特にnonceチェックで）。

共有名を持つOOP構文

PHP

class WPSEexampleAJAX
{
    public $name = 'wpse';

    public function __construct()
    {
        add_action( 'wp_loaded', array( $this, 'scriptsRegister' ) );
        add_action( 'admin_enqueue_scripts', array( $this, 'scriptsEnqueue' ) );

        // Logged in users - everybody in Admin
        add_action( "wp_ajax_{$this->name}_action", array( $this, 'ajaxCb' ) );
        // Guests/not logged in
        add_action( "wp_ajax_nopriv_{$this->name}_action", array( $this, 'ajaxCb' ) );
        add_action( 'admin_enqueue_scripts', array( $this, 'scriptsLocalize' ) );
    }

    public function scriptsRegister( $page )
    {
        $file = 'WPSEexample.js';
        wp_register_script(
            $this->name,
            plugins_url( "assets/scripts/{$file}", __FILE__ ),
            array(
                'jquery',
                // 'add other possible dependencies in here',
            ),
            filemtime( plugin_dir_path( __FILE__ )."assets/scripts/{$file}" ),
            true
        );
    }

    public function scriptsEnqueue( $page )
    {
        wp_enqueue_script( $this->name );
    }

    public function scriptsLocalize( $page )
    {
        wp_localize_script( $this->name, "{$this->name}Object", array(
            'ajaxurl'          => admin_url( 'admin-ajax.php' ),
            '_ajax_nonce'      => wp_create_nonce( "{$this->name}_action" ),
            'action'           => "{$this->name}_action",
            'post_type'        => get_current_screen()->post_type,
            // 'foo'              => 'bar',
        ) );
    }

    public function ajaxCb()
    {
        $data = array_map( 'esc_attr', $_GET );

        check_ajax_referer( $data['action'] );

        // DO STUFF IN HERE

        wp_send_json_success( array(
            // 'foo' => 'bar',
        ) );
    }
}

実際のJavaScriptはAJAX送信/キャッチ

あなたの登録されたJavaScriptファイルの中で、あなたはただajax呼び出しを起動して結果を取得するだけです。今日では、結果を傍受したりキャッチしたりできるさまざまなポイントがあります。スクリプトは実際には何もしませんが、単にコンソールにログインするだけです。ローカライズされたwpseObjectは関数呼び出しにエイリアスを持っているので、代わりにpluginを代わりに使うことができます。そのようにするのが好きなので、後でローカライズされたオブジェクトを簡単に識別することができます。それは私の個人的な命名規則です。

( function( $, plugin ) {
    "use strict";

        $.ajax( {
            url  : plugin.ajaxurl,
            data : {
                action      : plugin.action,
                _ajax_nonce : plugin._ajax_nonce,
                foo         : plugin.foo,
            },
            beforeSend : function( d ) {
                console.log( 'AJAX Before send', d );
            }
        } )
            .done( function( response, textStatus, jqXHR ) {
                // console.log( 'AJAX done', data, textStatus, jqXHR, jqXHR.getAllResponseHeaders() );
            } )
            .fail( function( jqXHR, textStatus, errorThrown ) {
                console.log( 'AJAX failed', jqXHR.getAllResponseHeaders(), textStatus, errorThrown );
            } )
            .then( function( jqXHR, textStatus, errorThrown ) {
                console.log( 'AJAX after', jqXHR, textStatus, errorThrown );
            } );
} )( jQuery || {}, wpseObject || {} );

$.ajax()呼び出し 公式のjQueryドキュメントにあります _のさまざまな部分に関する詳細情報。

ヒント：必ずWordPressコアのjQueryを使用し、CDNバージョンは使用しないでください。そうでなければ、ユーザがコアを更新したとしてもあなたのプラグインは更新しなかった場合の衝突や古いバージョンで壁にぶつかるでしょう。

1
kaiser