Wordpresのテーマを本格的に開発してみるにてWordpressの管理画面に オリジナルメニューを追加したり、既存メニューを削除したりしました。

今回はオリジナルメニューの遷移先の中身を作って、 値を入力して保存する仕組みを作っていきます。

飛び先のページを作成する

前回まではメニューの項目をクリックするとページジャンプはするものの、 何も表示されないという状態になっています。

そりゃ中身作ってないんだからあたりまえですよね。

ってことで中身のHTMLを軽く組みましょう。

中身はまだ単純なので一旦functions.phpに記述してOKです。

前回「themeOptionPageView()」として定義した関数の中身を作っていきます。

// ~~　各種省略


//-----------------------------------------------------
// テーマコンフィグのView
//-----------------------------------------------------
// themeOptionメニューの内容を描写する
function themeOptionPageView() { ?>

  <div class="admin--page--wrap">

    <h1>テーマ設定</h1>

    <?php /* 設定用のフォーム */ ?>
    <form method="post" action="options.php">

      <?php /* 設定値のグループを指定して設定値を取得 */ ?>
      <?php settings_fields( 'mytheme_options_group' ); ?>
      <?php do_settings_sections( 'mytheme_options_group' ); ?>

      <?php $options = get_option( 'mytheme_options' ); ?>

      <?php /* 設定値を表示。 */ ?>
      <table class="form-table">
        <tr valign="top">
          <th scope="row">保存したい文字列を入力</th>
          <td>
            <?php /* 設定値をエスケープして表示します。 */ ?>
            <?php $option = isset( $options['something'] ) ? esc_attr( $options['something'] ) : '' ?>
            <input type="text" name="mytheme_options[something]" value="<?php echo $option; ?>">
          </td>
        </tr>
        <tr valign="top">
          <th scope="row">現在保存されている値 => </th>
          <td>
            <?php $option = isset( $options['something'] ) ? esc_attr( $options['something'] ) : '' ?>
            <p><?php echo $option; ?></p>
          </td>
        </tr>
      </table>

      <?php submit_button(); ?>

    </form>
  </div><!-- .admin--page--wrap -->

<?php }

関数定義の行の末端にある「?>」はPHP状態を閉じるためにやっているのに気をつけてください。

そうしないとHTMLを記述できないからです。

これだけだとセキュリティ的によろしくないのでサニタイズを行います。

サニタイズする

意図しない値が保存されるのを防ぐためにサニタイズという手法を行います。

文字列を入力できるということは悪意のあるコードを入力することも可能ということでもあります。

サニタイズ自体はなくても動作はしますが、セキュリティの観点から言うと DB等と連携するフォーム作成としては必須の処理になります。

記述場所は同じくしてfunctions.phpでOKです。

// サニタイズ関数
function sanitizeMythemeOptions( $options ) {

  // 返す用の空配列を作成
  $new_options = array();

  // 文字列設定値のサニタイズ
  if ( isset( $options['something'] ) ) {
    $new_options['something'] = sanitize_text_field( $options['something'] );
  }
  // サニタイズ処理を行った文字列か、元々問題の無い文字列が入った配列を返す
  return $new_options;
}

sanitize_text_field関数はWordpress独自の関数になります。

説明としては

ユーザーが入力、またはデータベースから取得した文字列を無害化します。 無効な UTF-8 をチェックし、独立した '<' 文字をエンティティーへ変換し、 タグをすべて除去し、改行・タブ・余分な空白を削除し、オクテット（'%' に続く 2 桁の 16 進数）を除去します。

となっています。

引用：関数リファレンス/sanitize text field

入力した値をPOSTして値を保存する

次はサニタイズ関数が返してくれる値をDBに保存する処理を作りましょう。

前回作成した「themeOptionInit()」関数の中身を記述します。

//-----------------------------------------------------
// add_action
//-----------------------------------------------------
// アドミンでログインしているときのみ作動
if ( is_admin() ) {
  add_action('admin_menu', 'removeMenuCommand', 9999); // メニュー削除関数の実行
  add_action('admin_menu', 'addMenuCommand', 9999); // メニュー追加
  add_action('admin_init', 'themeOptionInit' ); // DB保存準備
}

//-----------------------------------------------------
// 便利関数
//-----------------------------------------------------

// ～～各種関数省略

// DB保存準備関数
function themeOptionInit() {
  register_setting(
    'mytheme_options_group', // フォームで設定したnameの値
    'mytheme_options', // 設定値の名前
    'sanitizeMythemeOptions' // サニタイズ用の関数
  );
}

やってることはWordpress公式の関数「registar_setting」を呼び出しているだけです。

引数の1つ目はhtmlのフォーム側のフィールド名を設定。

「settings_fields( 'mytheme_options_group' )」で設定した値と一致してる必要があります。

2つ目はDB側に保存したい値を保存するために識別するようの名前。

3つ目は先ほど作ったサニタイズ関数をココで渡しておきます。

こうすることでフォームに入力されてsubmitを押されたら option.phpがDBに保存しようとするのでそのときに「register_setting」で 設定された値等を参照して処理をしてくれます。

Wordpressはoptions.phpが値を保存してくれる

基本的にオリジナルの保存項目は基本的にWordpressのDBの「options」テーブルになります。

今回の処理の流れとしては

といった感じですね。

これで作ったメニューをクリックしてフォームに入力してsubmitすると、 値がちゃんと保存出来ているのがわかると思います。

フォームだけだと保存されたか分かりづらいので、 現在保存されている値を下に文字列として表示しています。

試しにhtmlタグで囲った文字列を入力して保存してみると、 ちゃんとサニタイズ関数が働いているのがわかると思います。

今回はここまでにしておきましょう。

今の所テーマの設定を保存したいという状況ではないので、 必要になったらまた戻ってきて設定変更させたい部分を記述していきましょう。

それでは。