そんなにGeekじゃないエンジニアブログ

WordPressプラグインの設定画面で保存後にメッセージを出すには、POSTではなくGETのパラメータをチェックすればよかった

calendar

こんにちは。でんすけ(@notgeek_densuke)です。

WordPressプラグインを作っていて、設定画面で「変更を保存」ボタンを押した際に「設定を保存しました」みたいな表示を出したい!

こういうやつね。

やり方がわからず、ちょっとハマったのでメモ。

スポンサーリンク

WordPressプラグインの設定値が保存されたかどうかを知るにはGETメソッドを見る

まずは結論。

設定値が保存されたかどうかを知るには、
GETメソッドに「settings-updated」というパラメータが付いているのをチェックすればいけます。

こんな感じ。

<?php
register_setting( 'option_group', 'option_name' );
add_management_page( 'PLUGIN_NAME', 'PLUGIN_NAME', 'manage_options', 'MENU_SLUG', 'show_menu' );

function show_menu(){
   // 成功メッセージ表示
    if( true == $_GET['settings-updated']){ ?>
        <div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>
    <?php } ?>

    <h2>設定画面</h2>
    <hr>

    <form method="post" action="options.php">
        <?php settings_fields( self::$option_grp ); ?>
        <?php do_settings_sections( self::$option_grp ); ?>

        <input type="text" name="option_name" value="">
    </form>

    <?php submit_button(); ?>
<?php } ?>

$_GET[‘settings-updated’]を見て、trueであれば、設定値が保存されていると判断して、「設定を保存しました」と表示させています。

register_settingで設定値を登録して、
フォームに、option名が付いた入力要素を作っておけば、
あとは、submit_button()のボタンで設定値の保存が完了する、という流れ。

公式のCodexを参考にして設定画面を作ると、そういう流れになります。

設定値の保存時のPOST、GET動作

そもそも、POST、GETのリクエストの流れがどうなっているのかというと。

formタグのactionoptions.phpが指定されているので、
submitボタンを押すと、options.phpへPOSTリクエストが投げられます。

で、POSTを受け取ったoptions.phpは、設定値パラメータをDBに保存するなりした後、
302リダイレクトで設定画面のURLに戻そうとします。
このとき、GETメソッドで、「settings-updated:true」を付けてリダイレクトしてきます。

なので、$_GET[‘settings-updated’]をチェックしてやればよいというわけですな。

POSTパラメータではだめなの?

ネット上の情報だけをいろいろ見ていると、POSTのパラメータをみて更新されたかどうかを判断しているところが多かったです。
こんな感じ。

<?php
add_management_page( 'PLUGIN_NAME', 'PLUGIN_NAME', 'manage_options', 'MENU_SLUG', 'show_menu' );

function show_menu(){
   // 成功メッセージ表示
    if( isset($_POST['option_name']) ){ 
        if( update_option('option_name', wp_unslash($_POST['option_name']) ){
            echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
        };
    }
    ?>

    <h2>設定画面</h2>
    <hr>

    <form method="post" action="">
        <input type="text" name="option_name" value="">
    </form>

    <?php submit_button(); ?>
<?php } ?>

まず、ひとつ前のソース例に戻って説明すると、
公式のCodexを参考にして設定画面を作った場合、register_settingを使うなりして、設定値の保存処理をWordPressにある程度任せたりします。
options.phpにPOSTリクエストを投げて、保存処理を任せることになるわけですね。

そうすると、設定画面のページには302リダイレクトでGETメソッドのリクエストが来ることになります。
つまり、POSTメソッドのパラメータは設定されていない、空の状態で来るため、$_POST[‘option_name’]では判定することができません。
なので、前述した通り、$_GET[‘settings-updated’]をチェックすることになるわけです。

一方、今回のソースだと。
16行目のようにactionを空にしておくと、設定画面自身にPOSTリクエストが投げられることになります。
なので、$_POST[‘option_name’]を見ることで、設定の保存リクエストかどうかを判断することができるわけですね。

ただ、そうすると自分で「update_option」などで設定値の保存処理を書かないといけなくなります。
せっかく公式が勧めているSetting APIを使った作り方があるので、それに乗っかりたいですが、自分で細かくカスタマイズしたい人は、POSTを自分で処理する書き方がいいのかもしれません。

 

おまけ:メッセージのスタイル

メッセージのスタイルについて。

<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>
<div id="settings_error" class="error notice is-dismissible"><p><strong>エラーです</strong></p></div>

とすると、見た目はこんな感じになります。

クラスに「is-dismissible」を付けておくと、右端に×ボタンがついて、クリックで消せるようになります。

updated」もしくは「notice-success」で、左端が緑色になります。
error」もしくは「notice-error」で、左端が赤になります。

notice」で、白の背景色などの基本的な設定をしてくれます。

いずれもWorpPressが標準で用意してくれているものなので、活用しちゃいましょう。

基本は「notice is-dismissible」を付けておいて、
「updated」or「error」で色を付ける、という感じです。

まとめ

ということで、WordPressプラグインで「設定を保存しました」メッセージを出す方法でした。

GETメソッドの「settings-updated」をチェックするといいよ、という話です。

POSTの内容を自分で確認したい場合は、自前でPOSTの処理をするように実装すべし。

ちなみに、今回掲載したコードはあんまりちゃんと動作確認してないので、参考程度に見てください。

というか、「保存しました」メッセージを出力するようなAPIがあってもよさそうなんだけど、無いのかしら。今のところ自分で実装するしかなさそうですね。

それではまたー。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください