WordPress

管理画面でAjaxを使ってみる(埋め込み):【74日目】WordPress1日1プラグイン

更新日:

ようこそのお運びで、厚く御礼申し上げます。
今回は管理画面でAjaxを使ってみようと思います。

管理画面で自分が設定したテキスト入力のページを、Ajax対応にしてみる。

以前作成した「管理画面にメニューを追加して、記事に文字列を追加してみる」のコードをAjaxにしてみる。

Ajaxじゃないコードはこちらの記事

今回の仕様は

以前の仕様と同じですが

  • 管理画面メニュー:設定>テキスト登録
  • 文字列(テキスト)を入力する
  • 入力した内容は、記事の末尾に表示される

こちらをAjaxに対応させてみます。

画面遷移を見てみましょう

管理画面:設定>テキスト登録のメニューからページを開きます。

140408-0004

こちらに、文字列(テキスト)を入力して、「変更を保存」をクリックします。
140408-0001

あとは、更新中はローディング画像の表示、完了すると「更新されました」メッセージを表示します。

140408-0002

ここからが本題、Ajaxにしてみます。

まずは、HTMLのテキスト入力部、その他画面周りについてピックアップ

<!--ローディング画像&結果表示-->
<div id=loadingmessage><img src="{$dirUrl}/loadimg.gif" /></div>
<div class="updated fade" id="res"></div>
...
<!--テキスト入力-->
<input name="paka3_options['text']" type="text" id="add_text" value="$add_text" class="regular-text" />
...
<!--更新ボタン-->
<input type="button" id="text_submit" class="button-primary" value="変更を保存" />
....
  • ローディング画像&結果表示は、表示・非表示を切り替えます
  • テキスト入力は、id="add_text"をキーに処理をします
  • 更新ボタンは、id="text_submit"からイベントハンドラを取得します

Httpリクエストを送る、javascriptを書いてみます

WordPress Codexをもとにコードを書いてみました。
日本語版英語版で書いているコードが違うので今回は英語版を参考にしました。

また、今回このjavascriptは埋め込み式にしています。
埋め込みの場合はヘッダーに埋め込むとjqueryの順番等でエラーが出る場合があるので、今回はフッターに入れました。

<script type="text/javascript">
   (function($) {
   //ローディング画像&結果の非表示
   $('#loadingmessage').hide();
   $('#res').hide();

   $(document).ready(function(){
       $(document).on('click','#text_submit', function(){
           //ローディング画像表示
           $('#loadingmessage').show();
           //結果非表示
           $('#res').hide();
           //httpリクエスト&結果
           $.post(
              ajaxurl,
                 {
                    action : 'paka3_my_action',
                    security : '{$security}',
                    add_text : $("#add_text").val()
                 },
                 function( response ) {
                    //ブラウザコンソールに表示
                    console.log( response );
                    //結果の設定
                    $("#res").html("<p><strong>"+response.text+"</strong>に更新されました</p>");
                    //ローディング画像非表示
                    $('#loadingmessage').hide();
                    //結果表示
                    $('#res').show();
                    }
             );
          return false;
       });
     });
   })(jQuery);
</script>
  • バージョン2.8からadmin-ajax.phpは常に読み込まれているので、ajaxurlは記入するだけで使えます。
  • 「action : 'paka3_my_action'」には、php側で実行するアクションを設定できます。php側は「wp_ajax_」を追加してアクションフックを設定します
    add_action( 'wp_ajax_paka3_my_action', array($this,'my_action_callback'))

    このリクエストがあると、上記のアクションフックが実行され、my_action_callback関数が呼び出されます。

  • security : '{$security}'にはphp側でnonceを設定しました。
    $security= wp_create_nonce('paka3addtext');

    wp_create_nonceでセキュリティコードを発行し、リクエストを受け取ったときにcheck_ajax_refererで精査します。
    サンプルがWordPress Codex:check_ajax_refererにサンプルコードがありますので参照してください。

コールバック関数で、データを保存

 if(isset($_POST['add_text']) && check_ajax_referer( 'paka3addtext', 'security' )){
        //更新処理
        $opt = array('text'=>$_POST['add_text']);
        update_option('paka3_options', $opt);
        //JSONに変換、値を返します
        $response = json_encode( $opt );
	header( "Content-Type: application/json" );
	echo $response;
        exit;
    }

今回はJSは埋め込みなので、1ファイルでおさまります

paka3AjaxAdmin.php」というファイルを作成し、以下のコードを記入します。

このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。

今回のまとめ

今回は管理画面のAjaxについて書いてみました。こちらは1ファイルなので外部ファイルにして書く方法も調べてみます。

-WordPress
-, , , ,

Copyright© アルパカ@ラボ , 2024 All Rights Reserved Powered by AFFINGER5.