WordPressプラグインに設定ページをつける

プラグインの動作を動的に変更しようとする場合、WordPressの管理画面に設定ページを設けます。このプラグインの設定ページのつけ方をサンプルコーディング付きで教えます。

設定ページと設定値

手順

Sample Settingページを追加

<?php
/*
Plugin Name: Sample Plugins
Plugin URI: http://example.com/sampleplugins
Description: 設定ページをつくるサンプルプラグイン
Author: somebody
Version: 1.0
Author URI: http://example.com/author
*/

//設定値を保存するグローバル変数
$gbSetting = null;

//設定ページを追加するためにadmin_menuをフックする
add_action( 'admin_menu','add_my_setting');

//アクションフックで呼ぶ関数
function add_my_setting(){
	add_options_page(
		'Sampleプラグインの設定',		//ページタイトル
		'Sample Setting',			//設定メニューに表示されるメニュータイトル
		'administrator',			//権限
		'sample_setup_page',		//設定ページのURL。options-general.php?page=sample_setup_page
		'my_setting_htmlpage'		//設定ページのHTMLをはき出す関数の定義
	);
}

//設定ページのHTML
function my_setting_htmlpage() {
	echo '<div clas="wrap">';
	echo '<p>Sample Pluginの設定ページ</p>';
	echo '</div>';
} 
?>

sampleプラグインの配置位置

add_options_page

add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);

設定値の読み出し／保存のロジック作成

参考:

WordPress Setting API

Setting API

Setting APIの呼び出すタイミングと順番

	add_action( 'admin_init', array( $this, 'sample-setting_init'));

register_setting

register_setting( $option_group, $option_name, $sanitize_callback );

add_setting_section

add_settings_section( $id, $title, $callback, $page );

add_setting_field

add_settings_field( $id, $title, $callback, $page, $section, $args );

設定値を入出力するためのHTML出力関数を構築

データベースの設定値を反映する

$sample_user_setrting = array( 
"option_a" =>1,
"option_b"=>1,
"select_mode"=>3,
"comment"=>"これはコメントです。"
)

function option_a_callback() {
	$sample_user_setting = get_option('sample_user_setting');

	if( $sample_user_setting ['option_a']=="1" ) {
		$check = "checked=\"checked\"";
	}
	else
	{
		$check = "";
	}
?>
   <input type="hidden" name="sample_user_setting[option_a]" value="0">
   <label for="option_a"><input type="checkbox" id="option_a" name="sample_user_setting[option_a]" size="30" value="1"<?php echo $check; ?>/>option A</input></label>
<?php	
}
?>

クエリーパラメータを配列で戻す

//admin initのアクションフック
add_action( "admin_init", "sample_setting_init");

//設定値を読込保存を実行するSetting API群
function sample_setting_init() {
	register_setting(
		'sample_option_group',			// option group
		'sample_user_setting'			// option name(DB)
	);		


	add_settings_section(
		'setting_section_id',				// id
		'Sampleプラグイン　設定ページ',		// title
		'print_sction_info',				// callback
		'sample_setup_page'			// page
	);

	add_settings_field(
		'option_a',							// id
		'オプションA',  				// title
		'option_a_callback',			// callback
		'sample_setup_page',			//page
		'setting_section_id'				//Section
	);
	add_settings_field(
		'option_b',				// id
		'オプションB',  				// title
		'option_b_callback',			// callback
		'sample_setup_page',			//page
		'setting_section_id'				//Section
	);
	add_settings_field(
		'select_mode',				// id
		'モード選択:',  				// title
		'option_select_mode_callback',		// callback
		'sample_setup_page',			//page
		'setting_section_id'				//Section
	);
	add_settings_field(
		'comment',				// id
		'コメント:',  				// title
		'comment_option_callback',			// callback
		'sample_setup_page',			//page
		'setting_section_id'				//Section
	);
}

//コールバック関数
function print_sction_info() {
}

function option_a_callback() {
	global $gbSetting;

	if( $gbSetting['option_a']=="1" ) {
		$check = "checked=\"checked\"";
	}
	else
	{
		$check = "";
	}
?>
   <input type="hidden" name="sample_user_setting[option_a]" value="0">
   <label for="option_a"><input type="checkbox" id="option_a" name="sample_user_setting[option_a]" size="30" value="1"<?php echo $check; ?>/>option A</input></label>
<?php	
}

function option_b_callback() {
	global $gbSetting;

	if( $gbSetting['option_b']=="1" ) {
		$check = "checked=\"checked\"";
	}
	else
	{
		$check = "";
	}
?>
   <input type="hidden" name="sample_user_setting[option_b]" value="0">
   <label for="option_b"><input type="checkbox" id="option_b" name="sample_user_setting[option_b]" size="30" value="1"<?php echo $check; ?>/>option B</input></label>
<?php	
}
function option_select_mode_callback() {
	global $gbSetting;

	$mode_val = $gbSetting['select_mode'];
	$select_tbl = array(
		array( 'val'=>1, 'name'=>'動作1'),
		array( 'val'=>2, 'name'=>'動作2'),
		array( 'val'=>3, 'name'=>'動作3'),
	);

	$html = "";
	foreach( $select_tbl as $r ) {
		$v = $r['val'];
		$n = $r['name'];
		if( $v==$mode_val ) {
			$checked="selected";
		}
		else
		{
			$checked = "";
		}
		$html .= "<option value=\"$v\" $checked>$n</option>";
	}
	$html = "<select name=\"sample_user_setting[select_mode]\">" . $html . "</select>";
	//作成したHTMLコードをはき出す
	echo $html;

}
function comment_option_callback() {
	global $gbSetting;

	$comment_text = $gbSetting['comment'];
?>
   <input type="text" name="sample_user_setting[comment]" value="<?php echo $comment_text; ?>">
<?php	
} 
?>

最後に設定ページのHTMLを仕上げる

//設定ページのHTML(最終版)
function my_setting_htmlpage() {
	global $gbSetting;
	//データベース上の設定値の読込
	$gbSetting = get_option('sample_user_setting');
	if( !$gbSetting ) {
		//設定のデフォルト値 
		$gbSetting = array(
			'option_a' => 1,
			'option_b' => 1,
			'select_mode' => 3,
			'comment' => 'ここはコメント欄です',
		);
		update_option( 'sample_user_setting', $gbSetting );
	}

?>
	<div class="wrap">
	 
	<h2>サンプルプラグイン</h2>
	 
	<form method="post" action="options.php">
	 
	<?php
	     settings_fields( 'sample_option_group' );
	     do_settings_sections( 'sample_setup_page' );
		 submit_button(); // 送信ボタン 
    ?>
	 
	</form>
	 
	</div><!-- .wrap -->
<?php
} 
?>

setting_fields

settings_fields( $option_group )

do_settings_sections

do_settings_sections( $page );

サンプルダウンロード

• ブロガー上級編

• wordpress
• 設定ページ
• 付け方
• サンプルコーディング