WordPressで管理画面に設定ページを作成する方法
目的
WordPressの管理画面に独自の設定用ページを作成します。
例えば、スライドショーを自分のサイトに設置した場合、スライドショーの画像URLをソースに直接書くと、ソースに触れる人しか画像を変えることができなってしまう。誰でもWordpressの管理画面から設定できるようにしたい場合など、管理画面の1つのページから、サイト内で共通の設定を記載するなどの時に設定ページとして作成すると便利かと思います。
- サイトで共通の設定などを保存しておける
結果
設定ページ画面
WordPress管理メニューに独自に作成した「サイト設定管理」メニューを追加します。
追加したページにはサイト内で使う共通の設定として、wordpress内のwp_options テーブルに保存します。
保存された値はget_option関数でサイトの内のどこからでも呼び出せます。
▼Wordpress独自に作成した設定ページの画面例
サンプルコード全体
▼function.php
add_action('admin_menu', 'webmemo_option_menu');
function webmemo_option_menu() {
add_menu_page('サイト設定管理', 'サイト設定管理', 'administrator' , 'webmemo_option_menu', 'webmemo_options_page');
add_action( 'admin_init', 'register_webmemo_settings' );
}
require ( dirname(__FILE__) . '/include/admin-webmemo-option.php');
function register_webmemo_settings() {
register_webmemo_settings_detail() ;
}
function webmemo_options_page() {
webmemo_options_page_detail() ;
}
<?php
/**
* webmemo Optional Setting
*/
function register_webmemo_settings_detail() {
register_setting( 'webmemo-settings-group', 'webmemo_opt_url_1' );
}
function webmemo_options_page_detail() {
echo "<h1>WEBメモ SETTING </h1>";
?>
<style>
.form-table tr {
}
</style>
<div class="admin_optional">
<form method="post" action="options.php">
<?php settings_fields( 'webmemo-settings-group' ); ?>
<?php do_settings_sections( 'webmemo-settings-group' ); ?>
<table class="form-table">
<th scope="row" >設定</th>
<tr>
<td>
<span>▼シングルページ上部に表示する文字をいれてください。</span></br>
<textarea id="slideshow_1" name="webmemo_opt_url_1" cols="160" rows="7"><?php echo esc_attr( get_option('webmemo_opt_url_1') ); ?></textarea>
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
?>
方法
以下を編集します。
※function.phpに全て書くと管理が煩雑になるため外部ファイルに設定を記載し、function.phpから呼び出しています。
※外部ファイルは「include」ディレクトリを作成し、その中に格納しています。
▼前提 directory図(treeイメージ)
テーマディレクトリ
├ function.php <--- (修正)設定ページを定義した外部ファイルの読み込み
└ include(dir)
└ admin-webmemo-option.php <--- (新規作成)設定ページを定義しているファイル
フロー
| 1function.phpの編集(外部フィルの読み込み) (修正ファイル：function.php) |
| ↓ |
| 2設定ページの処理部分の関数を作成 (修正ファイル：admin-alpha-option.php) |
| ↓ |
| 3任意の場所に設定した値を表示する |
1.function.phpの編集(外部フィルの読み込み)
▼管理メニューに「サイト設定管理」として設定ページを登録する。
add_action()を使用してアクションフックadmin_menuに管理メニュー登録用の関数webmemo_option_menu()を登録します。
この関数の中でadd_menu_page()を実行して、メニューに登録しています。
add_memu_page()の引数は以下、
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
add_action('admin_menu', 'webmemo_option_menu');
function webmemo_option_menu() {
//サイト設定管理ページのhtmlを表示する関数「webmemo_options_page」を呼び出し
add_menu_page('サイト設定管理', 'サイト設定管理', 'administrator' , 'webmemo_option_menu', 'webmemo_options_page');
//wp_options テーブルに値を登録する関数「register_webmemo_settings」を呼び出し
add_action( 'admin_init', 'register_webmemo_settings' );
}
▼設定ページの処理が記載しているファイルと関数の登録
「サイト設定管理」のHTMLおよびwp_options テーブルに値を登録する処理はfunction.phpに記載しますが、管理を容易にするため 外部ファイル「admin-webmemo-option.php」を作成して、それぞれの処理を記載しています。
function.phpでは外部ファイルの読み込みとそれぞれの処理が記載されている関数を呼び出しています。
//設定ページ用外部ファイルの読み込み
require ( dirname(__FILE__) . '/include/admin-webmemo-option.php');
//設定ページに出力されるHTMLを作る関数(処理はadmin-webmemo-option.phpに記載)
function webmemo_options_page() {
webmemo_options_page_detail() ;
}
//wp_options テーブルに値を設定する関数(処理はadmin-webmemo-option.phpに記載)
function register_webmemo_settings() {
register_webmemo_settings_detail() ;
}
2.設定ページの処理部分の関数を作成
▼wp_options テーブルに値を設定する処理
register_setting関数を使用して、独自の設定グループ名と、設定名をを登録します。
register_setting( $option_group, $option_name, $sanitize_callback ); $option_groupはsettings_fieldsに設定する値と同じ名称にする必要があります。
function register_webmemo_settings_detail() {
register_setting( 'webmemo-settings-group', 'webmemo_opt_url_1' );
}
設定ページの作成を参考に、do_settings_fields()とsettings_fields()を用いて値の保存処理を作成します。
do_settings_fields( $page, $section ) settings_fields( $option_group )これらの関数を使用する場合はformタグで動作します。formタグはaction属性で、options.phpを呼び出しデータを送っています。
<php
function webmemo_options_page_detail() {
echo "<h1>WEBメモ SETTING </h1>";
?>
<div class="admin_optional">
<form method="post" action="options.php">
<?php settings_fields( 'webmemo-settings-group' ); ?>
<?php do_settings_sections( 'webmemo-settings-group' ); ?>
<table class="form-table">
<th scope="row" >設定</th>
<tr>
<td>
<span>▼シングルページ上部に表示する文字をいれてください。</span></br>
<textarea id="slideshow_1" name="webmemo_opt_url_1" cols="160" rows="7"><?php echo esc_attr( get_option('webmemo_opt_url_1') ); ?></textarea>
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
?>
3.任意の場所に設定した値を表示する
wp_options テーブルに保存した値はget_option()で取得が可能です。
get_option( $option, $default )
以下は設定ページを表示した際に前回の保存データを取得しています。
<span>▼シングルページ上部に表示する文字をいれてください。</span></br>
<textarea id="slideshow_1" name="webmemo_opt_url_1" cols="160" rows="7"><?php echo esc_attr(
get_option('webmemo_opt_url_1') ); ?></textarea>
参考
- get_option() - WORDPRESS Codex(日本語版)
- add_menu_page() - WORDPRESS Codex(日本語版)
- add_action() - WORDPRESS Codex(日本語版)
- do_settings_fields() - WORDPRESS Codex(日本語版)
- settings_fields() - WORDPRESS Codex(日本語版)
その他詳細
値保存後のwp_options テーブル
▼wp_options テーブルの列
「xxxx」にはインストール時に自ら設定した値が入る
mysql> show columns from wp_xxxxoptions;
+--------------+---------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+--------------+---------------------+------+-----+---------+----------------+
| option_id | bigint(20) unsigned | NO | PRI | NULL | auto_increment |
| option_name | varchar(191) | NO | UNI | | |
| option_value | longtext | NO | | NULL | |
| autoload | varchar(20) | NO | | yes | |
+--------------+---------------------+------+-----+---------+----------------+
mysql> select * from wp_xxxxoptions where option_id = "1099";
+-----------+-------------------+-----------------------------+----------+
| option_id | option_name | option_value | autoload |
+-----------+-------------------+-----------------------------+----------+
| 1099 | webmemo_opt_url_1 | サンプル設定ページ | yes |
+-----------+-------------------+-----------------------------+----------+
1 row in set (0.00 sec)