ワードプレスのSettings APIの使い方まとめ。

管理画面へのメニュー追加からセクション、フィールドの追加、ラジオボタンやチェックボックスの使い方から、register_settingの初期値の設定法や変数を配列にまとめるサンプルコード、CSSデザインカスタマイズまで。

基本と応用

フォーム内にチェクボックスやラジオボタンを入れた具体的サンプルコード作成を通してSettings APIの基本的な使い方を解説。

  • 【基本】（前編）Settings APIの基本と使い方
  • 【WordPress】設定画面の作り方｜初心者にも分かりやすく解説！
  • Settings APIの基本の使い方。add_action( admin_menuフック）で管理画面の設定へメニューを追加して、add_options_pageで実際に基本となるサンプル設定の画面を作成。まずはURL入力（input type text）１つだけの設定画面を作り、セクション、フィールドの追加など基本の形をおさえる。
  • 【基本】（後編）Settings APIでラジオボタンやチェックボックスの使い方法
  • 【WordPress】設定画面へラジオボタンやチェックボックスを追加で完成形へ
  • Settings APIを使った設定画面で複数行入力（textarea）、ラジオボタン（input type radio）やチェックボックス（input type radio）を使ってフィールドを追加してみる。ラジオボタンやチェックボックスでは「checked」の入れ方がポイントとチェックボックスでは更にnameに配列を指定するのがポイント。
  • 【発展】変数を配列でひとまとめにして扱う方法
  • 【WordPress】SettingsAPIでデータを配列にひとまとめ！チェックボックスはどうなる？
  • 設定項目が増えるとデータベース上に変数がバラバラと増えていく。管理上も煩雑になるし作法的にも良くないようで、変数を1つの配列でまとめてみる。ポイントとの１つが複数項目を持つチェックボックス（input type checkbox）でnameを2次元配列で指定する。初期値も勿論全体を配列で指定し、サニタイズ関数（無害化）も1つの関数にまとめる。
  • 【デザイン】デザインカスタマイズ（CSSの具体例と実際の読み込み）
  • 【WordPress】SettingsAPIの設定画面をCSSでデザインカスタマイズ
  • Settings APIを使った設定画面は、add_settings_sectionで指定したセクションタイトルをh2タグで囲んでくれたり、do_settings_sectionsが各フィールド（設定のための入力や選択項目）を自動で tableタグで表示してくれる。この設定画面に対してデザインカスタマイズをする方法や、CSSファイルを別ファイルに分けて読み込む方法を試してみる。

個別の詳細

Settings APIで設定画面を作る中で、より詳しく知っておいた方が良いポイント、押さえておくと便利なポイントをまとめてます。

  • 【Tips】別ファイルに分けて設定を作成
  • WordPressでfunctions.phpを別ファイルに分ける方法！管理をグンと楽にする
  • ワードプレスでfunctions.phpに自作の関数を追加する場合、コードが長くなり分かりづらい、複数の関数追加でもどこに何があるかわかりづらい、となる場合がある。ここではinclude/include_once, require/require_once, get_template_partを使ってfunctions.phpのファイルを分け外部ファイルとして読み込む方法や読み込み方の違い、使い分けをご紹介。
  • 【Tips】テーマのパスの取得
  • 親テーマ子テーマのパス（URL）取得！共通で使える関数は？
  • パス（URL）取得では、親テーマ、子テーマの場合分けをしてget_template_directory_uri()やget_stylesheet_directory_uri()を使う場合もあるが、場合分けせず使うなら get_theme_file_uri() 。ここではget_theme_file_uri()の使い方から具体的なパス取得の動作例までご紹介。
  • 【Tips】初期値の設定方法
  • 【WordPress】register_settingで初期値を設定する方法は？add_optionを使うの？
  • Settings APIを使ったワードプレスの設定画面では変数の初期値をどこで設定するのかが分かりづらい。register_settingで初期値の設定方法から、add_option、update_optionを使った方法までを解説。関数リファレンスでregister_settingの第三引数に初期値の設定が無く、コールバック関数の指定だけで問題ない理由も調査したメモ。
  • 【Tips】ラジオボタンの記述の仕方
  • 【WordPress】フォーム内ラジオボタンにcheckedを入れる方法
  • ワードプレスで独自プラグインや自作関数の設定を作る場合、よくフォームで利用するラジオボタン。チェックされた設定を保存した後、その値を読み込んでhtmlに「checked」を入れる方法の解説。ifの値比較、三項演算子の利用もあるが、ワードプレスで用意されているchecked関数を使うのが分かりやすい。
  • 【Tips】チェックボックスの使い方
  • 【WordPress】複数チェックボックスの値取得と設定反映！checkedはどうやって入れる？
  • 設定ではよく利用するフォームのチェックボックス。1つだけのチェックボックスなら分かりやすいが複数になった場合、ワードプレスのSettings APIでのname属性の付け方から、送信したデータ（配列）を取得してその値をフォーム内のinputタグにchecked を付ける方法の解説。name属性を配列にするのがポイント。
  • 【デザイン】CSSファイルを外部ファイルとして読み込む方法
  • 【WordPress】CSSを別ファイルで読み込む方法｜SettingsAPIでの個別ページ反映
  • SettingsAPIを使って自作プラグインや独自の設定画面にCSSを反映する方法の解説。wp_register_style()、wp_enqueue_style()を使うがポイントはwp_register_style()を実行する時に使うフック。（wp_enqueue_scripts か admin_enqueue_scripts か）サンプルコードで実際CSSを読み込んでそのページだけにCSSを反映させる動作検証。

関連・補足情報

Settting APIを使う中での補足情報など。

  • 【関連・補足】add_settings_fieldのidとinput要素の関係調査
  • add_settings_fieldのidはinput要素のid属性と同じにする必要はない？
  • ワードプレスの関数リファレンス（日本語版）では Settings APIのadd_settings_field関数にはパラメータ$idがあり「input要素のid属性と同じにする」旨の記述がある。実際には同じにしなくても動作するが、どういった場合どのような理由で同じにする必要があり、どのような場合には同じにする必要がないのか調べてまとめてみた。

最後に

ワードプレスで作る自作関数や独自プラグインでは設定が必要な場面も多いですが、今回せっかく用意されているので、ということでSettings APIを使ってみました。

1度何かサンプルの設定画面を作ってしまえば、あとは必要に応じでセクション（設定項目の集まり）やフィールド（１つ１つの設定項目：inpu 入力など）の追加・削除をすればよいので楽になりますね。

ブログの収益化、ネットビジネスに興味がある場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！

時間や場所に縛られず稼いだJINが教える

～ 最短で月収10万円稼げるようになる方法 ～

お名前（全角文字）

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる！