web-dev-qa-db-ja.com

ページ上のjQuery関数（ドキュメント準備完了）のみを実行し、プラグインからのショートコードがある

ユーザーがサイトにログインしたときに、そのユーザーによって作成されたすべての投稿を含むページにリダイレクトし、AJAXリクエストを介してそれらをロードしたいのです。

私は現在のユーザーからのすべての投稿を持つことになるショートコードを保存しました。

function ajax_write_here(){
    $output = '<div id="write_here_ajax_wrap"></div>';
    return $output;
}
add_shortcode('write-here-ajax', 'ajax_write_here');

そしてphp関数をAJAX requestにフックさせる

function write_here_ajax_dashboard() {
    echo "test";
}
add_action( 'wp_ajax_write_here_get_posts', 'write_here_ajax_dashboard' );

ドキュメントレディのjQuery関数

jQuery(document).ready( function($) {
    function write_here_list_page(){
        $.ajax({
            type: "GET",
            url: ajax_object.ajax_url, // check the exact URL for your situation
            dataType: 'html',
            data: {
                action: 'write_here_get_posts',
                security: ajax_object.ajax_nonce
            },
            error: function(jqXHR, textStatus, errorMessage) {
                console.log(errorMessage);
                return false;
            },
            success: function(data) {
                //console.log(data);
                $('#write_here_ajax_wrap').html('');
                $('#write_here_ajax_wrap').append(data);
            }

        });
    }
    // Initiate function
    write_here_list_page();
});

私が今抱えている問題は、jQuery関数がサイト全体のすべてのページで起動されていることです。ショートコードが挿入されているページでのみトリガーするようにするにはどうすればよいですか。

pluginsplugin-developmentjqueryshortcodeajax
2
Ohsik

あなたのshourtcodeであなたはwp_enqueue_scriptをすることができます。これが私が修正したコードです。

JSファイルを登録する

function wh_enqueue() {
    wp_register_script( 'wh-ajax-app', WH_PATH . '/js/write-here-ajax.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wh_enqueue' );

あなたのショートコード関数にエンキューする

function ajax_write_here(){
    wp_enqueue_script( 'wh-ajax-app' ); // Enqueue your script here
    $output = '<div id="write_here_ajax_wrap"></div>';
    return $output;
}
add_shortcode('write-here-ajax', 'ajax_write_here');

これはショートコードが挿入されたページにあなたのJSファイルをロードするだけです。

1
Ohsik