web-dev-qa-db-ja.com

JQueryを使用してwp_optionsに格納されているデータを削除する

私の問題についてだれかが私にさらにアドバイスできるかどうか疑問に思う。私のプラグインの一部はデバッグ目的でログファイルを保存します。 jqueryとwp_localise_scriptを使用して、管理ページの（div＃log）にそれらを正常に表示しました。これらのログを削除するボタンがありますが、これを処理する方法がわからないです。私はajaxがここで役に立つのではないかと思うが、どこから始めればいいのかわからない。

これが私のコードの関連部分です：

admin_enqueue_scripts（アクション） 

 $args = array(get_option('wow_tweets_log'));//log files fetched from wp_options table    
    wp_enqueue_script('wow_Tweet');//registered earlier on with jQuery dependency
    wp_localize_script('wow_Tweet', 'wow_vars', $args);

管理ページ 

<tr><th scope="row"><strong>Debugging</strong></th><td>
    <div id="debug" class="button-primary">Debug</div><!--debug button shows logs-->
    <div id="hide_debug" class="button-secondary">Hide</div><!--debug button hides logs-->
    <div id="clear_log" class="button-secondary">Empty Log</div><!--Press to delete logs-->
</td></tr>
<tr><th scope="row"></th><td><div id="log"><!--Logs show here--></div></td></tr>

Javascript 

jQuery(document).ready(function() { 

    var debug_show = jQuery('#log').hide();//hides log by default

    jQuery('#debug').click(function(){//on click shows logs files in div#log
        for (var i = 0, l = wow_vars.length; i < l; i++) {
            var data = wow_vars[i];
        }
        jQuery('#log').show().html(data);

    });
    jQuery('#hide_debug').click(function()
    {
        debug_show.hide();
    }); 
});

ログを消去するためのアクション 

 function clear_log(){
    delete_option('wow_tweets_log');//am stuck on how to invoke this

    /*die();  would go at the end if ajax used*/
 }
 add_action('clear_log','clear_log');

これまでのところ、このスクリプトはすべてのログファイルを表示するように機能していますが、#clear_logをクリックしたときにそれらを削除するだけで済みます。 initにdo_actionをプラグインすると、ページが読み込まれるとすぐにそれらが削除されるので、JavaScriptが使えなくなるので、唯一の選択肢はajaxになると思います。 wp_localize_script（）への参照をもう1つ追加する必要がありますか？任意の助けがいただければ幸いです。

jqueryajaxactionswp-options
10
Tracy

WordPressのAjaxは、HTTP投稿を/wp-admin/admin-ajax.php（デフォルト）に送信して対応するフックを起動することによって機能します。そのため、削除ボタンによってトリガーされたイベントにjqueryを追加し、それをadmin-ajax.phpに投稿します。これには、実際に削除するためのphpを実行するdelete_my_options（）アクションがあります。次に、コールバックと呼ばれるajaxリクエストが正常に完了したときに実行される関数があります。たとえば、#log divをフェードアウトさせるためにこれを使用できます。

つまり、アクション、ajax、そしてコールバックという3つのステップがあります。アクションはDOMイベントによって起動され、wp_ajax_ {action_name}とwp_ajax_nopriv_ {action_name}の2つのフックにアタッチされます（ログインしているユーザーに実行させたくない場合のみ）。これらのアクションは、そのアクションがwp-admin/admin-ajax.phpに投稿されたときに発生します。 ajaxはそれらにフックされたphp（通常）関数です。コールバック関数は、ajaxが正常に完了したときに起動されるJavaScript関数です。

ステップバイステップ：

Jsファイルの中のステップ1

jQuery('#hide_debug').click(function()
{
    var data = {};
    data.action = 'clear_log_action';
    data.options_delete_nonce = ajax_object.options_delete_nonce;
    jQuery.post(ajax_object.ajax_url, data, clear_log_callback);

});

ステップ2、functions.phpまたはプラグイン

JavaScriptをエンキューする関数にこれを追加します。（thanks @Milo）

wp_localize_script( 'my_js_file_name', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ,   'options_delete_nonce' => wp_create_nonce( 'options_delete_nonce' ), ) );

その後、これをあなたのfunctions.phpまたはプラグインに追加してください：

// Edit: removed the nopriv hook (Thanks @toscho)
add_action('wp_ajax_clear_log_action','clear_log_ajax'); // attach your data.action to wp_ajax and wp_ajax_nopriv and hook your php function
function clear_log_ajax() {
    $nonce = $_POST['options_delete_nonce'];
    // Edit: Added nonces and permissions check (Thanks @Otto)
    if( wp_verify_nonce( $nonce, 'options_delete_nonce' ) && current_user_can( 'manage_options' ) ) {
        delete_option('wow_tweets_log');
        die(); // make sure to put a die() or exit() at the end of your ajax
    }
}

ステップ3、jsファイルに戻る

// output will be what is echoed from your ajax, if anything
function clear_log_callback(output) 
{
    jQuery('#log').hide();
}
7
Andrew Bartel