はぴすぷ

【WordPressプラグイン開発】独自設定ページでオプションを追加・変更する方法

   

前回で管理画面にメニューを用意することが出来るようになりました。

【WordPressプラグイン開発】管理画面にメニュー・サブメニューを追加する方法

後はそのメニューで表示されるページで設定を確認出来たり、変更出来るようになれば色々と出来ますよね！

なので今回は管理画面のメニュー画面で、設定を扱う方法を説明したいと思います。

スポンサーリンク

WordPressの設定の保存場所

WordPressの基本的な設定は、データベースの「options」テーブルに保存されています。

恐らく殆どの人はテーブルのプレフィックス（接頭辞）に「wp_」が設定されていると思いますので、「wp_options」になっていると思います。

テーブルの中身はこんな感じです。「option_id」は自動繰り上げで採番されているもので特に意味はありません。

SS_5378

一意な名前「option_name」に対して、値「option_value」が保存されています。

「autoload」が「yes」だとWordPressの初期化時に読み出されます。

ちょっとしたプラグインのデータであれば、このテーブルに自分専用の設定値を追加して更新するのが簡単です。

設定値の操作方法

WordPressにはデータベースの操作を意識せず、設定（optionテーブル）を簡単に扱える関数が用意されています。

直接データベースを触ることも可能ですが、フックが拾えなくなってしまうので、WordPressで用意されているものを使うようにしましょう。

それでは順に紹介します。

設定を追加する

add_option( $option, $value = '', $deprecated = '', $autoload = 'yes' )
  1. $option：保存する設定の名前
  2. $value：保存する値（arrayやオブジェクトもシリアライズされて保存される）
  3. $deprecated：現在は使われていない（空文字かNULL）
  4. $autoload：wp_load_alloptionsで自動で読み出すか。(‘yes’ or ‘no’)（実際は’no’とfalse以外が’yes’になる）

もし、設定の名前が衝突した場合は、何もせず無視されます。失敗した時には「false」が返り、成功時に「true」が返ります。

同じ名前を使ってしまうと思わぬ不具合を起こすので、必ずユニークになるようにプレフィックスなど付けましょう！

設定を取得する

get_option( $option, $default = false )
  1. $option：取得する設定の名前
  2. $default：取得しようとした設定が無い時に返る値

取得出来た時は、arrayやオブジェクトを保存していた時は元の型に戻して返してくれます。便利ですね！

取得出来なかった場合は$defaultで渡した値か「false」が返ります。

設定を更新する

update_option( $option, $value, $autoload = null )
  1. $option：更新する設定の名前
  2. $value：更新する値（arrayやオブジェクトも可）
  3. $autoload：wp_load_alloptionsで自動で読み出すか。(‘yes’ or ‘no’)（実際は’no’とfalse以外が’yes’になる）

更新関数ですが、更新しようとした設定が、存在しない場合は追加してくれます。便利ですね！

更新・追加したらtrueを返して、更新の必要がない場合はfalseが返ります。

最初に元の値とだけ比較して、同じなら即false返してるので、$autoloadだけの更新は出来ません。これバグじゃね(；´Д｀)することないだろうけど。

設定を削除する

delete_option( $option )
  1. $option：削除する設定の名前

削除完了でtrue、元からない場合や失敗でfalseが返ります。

以上！「$autoload」が少し気持ち悪いくらいで、他は特に何のひねりもないので、簡単に扱えるのではないかと思います( ･`д･´)

管理画面に設定を追加・変更する画面を実装する

実はこうしなさい！というものが厳密に無さそうで、色んなプラグインの中を見ると、みんな好きなように実装しています。

個人的に配布しているものなら分かるんですが、全て公式プラグインなんですよね(´・ω・`)

何のバリデート処理も、セキュリティ対策もしてないものが結構多い。

まぁ管理者向けの機能がほとんどで、一般向けに提供されてるものでないから大丈夫ですよね。

という訳で、今回紹介するのはWordPressの機能をそこまで使わない、少し簡単な方法です。

WordPressの機能をガチガチに使った方法はまた別の機会に紹介します。

サンプル

メジャーどころなフォーム要素盛り込んでみました。

前回作ったメニューで、ページの内容を返す関数を置き換えてみて下さい。

<?php
// メニューで表示されるページの内容を返す関数
function mt_options_page() {
    // POSTデータがあれば設定を更新
    if (isset($_POST['my_text'])) {
        // POSTデータの'"などがエスケープされるのでwp_unslashで戻して保存
        update_option('my_text', wp_unslash($_POST['my_text']));
        update_option('my_textarea', wp_unslash($_POST['my_textarea']));
        update_option('my_radio', $_POST['my_radio']);
        update_option('my_select', $_POST['my_select']);
        // チェックボックスはチェックされないとキーも受け取れないので、ない時は0にする
        $my_checkbox = isset($_POST['my_checkbox']) ? 1 : 0;
        update_option('my_checkbox', $my_checkbox);
    }
?>
<div class="wrap">
<h2>設定サンプル</h2>
<?php
    // 更新完了を通知
    if (isset($_POST['my_text'])) {
        echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible">
            <p><strong>設定を保存しました。</strong></p></div>';
    }
?>

<form method="post" action="">
<table class="form-table">
    <tr>
        <th scope="row"><label for="my_text">マイテキスト</label></th>
        <td><input name="my_text" type="text" id="my_text" value="<?php form_option('my_text'); ?>" class="regular-text" /></td>
    </tr>
    <tr>
        <th scope="row"><label for="my_textarea">マイテキストボックス</label></th>
        <td><textarea name="my_textarea" id="my_textarea" class="large-text code" rows="5"><?php echo esc_textarea(get_option('my_textarea')); ?></textarea></td>
    </tr>
    <tr>
        <th scope="row"><label for="my_checkbox">マイチェックボックス</label></th>
        <td><label><input name="my_checkbox" type="checkbox" id="my_checkbox" value="1" <?php checked( 1, get_option('my_checkbox')); ?> /> チェック</label></td>
    </tr>
    <tr>
        <th scope="row">マイラジオ</th>
        <td><p><label><input name="my_radio" type="radio" value="0" <?php checked( 0, get_option( 'my_radio' ) ); ?>	/>ラジオ0</label><br />
                <label><input name="my_radio" type="radio" value="1" <?php checked( 1, get_option( 'my_radio' ) ); ?> />ラジオ1</label></p>
        </td>
    </tr>
    <tr>
        <th scope="row"><label for="my_select">マイセレクト</label></th>
        <td>
            <select name="my_select" id="my_select">
                <option value="0" <?php selected( 0, get_option( 'my_select' ) ); ?> >セレクト0</option>
                <option value="1" <?php selected( 1, get_option( 'my_select' ) ); ?> >セレクト1</option>
            </select>
        </td>
    </tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}

これでこんな感じになります。

SS_5379

サンプルの説明

基本的には設定を保存する為のフォームを作成して、受け取った値をほぼそのまま保存しているのみです。

formのaction（実行先）を空にすることで、表示中のページ実行先にしています。

フォームからデータが送られてきた時に、データを保存して、設定を保存したことを伝える通知を表示します。

フォームの作成時に設定値を取得して値を適用した状態にして完了です！

フォームの作成時にWordPressの関数を、いくつか呼んでいるので軽く説明します。

form_option

form_option('my_text');

inputのvalueに値を設定している部分ですが、form_optionは以下の様に実装されていて、設定を取得してhtmlタグをエスケープして書き出してくれます。

echo esc_attr( get_option( $option ) );

esc_textarea

echo esc_textarea(get_option('my_textarea'));

テキストエリアの値を設定している部分も、同じようにhtmlタグをエスケープしています。

checked

checked( 0, get_option( 'my_radio' ) );

checkedは2つの引数が一致していると、チェックボックスやラジオでの選択状態「 checked=”checked”」を書き出してくれます。先頭に半角スペースが付いています。

selected

selected( 0, get_option( 'my_radio' ) );

selectedも同じように、セレクトボックスの選択状態「 selected=”selected“」を書き出してくれます。他にも「disabled」が用意されていたりします。

submit_button

submit_button();

そのままで、サブミットボタンを書き出してくれます。

以上( ･`д･´)

特にWordPressで用意されている関数を使う必要もないんですが、こんなのあるよ！という紹介です。

終わりに

ついに設定も保存して取得出来るようになりました！

これでちょっとしたプラグインなら作れちゃいますね(^q^)

次回はプラグインを有効化した時に、データベースに新しいテーブルを作って、データを追加したり削除したりする方法を紹介しようと思います！

それでは！

 - WordPress, プラグイン