更新日期：2021-07-24

撰寫外掛時有時候需要提供額外的自訂值，一般位置會選在左側選單的「設定」裡面，去增加一個子選單比較直覺、也方便找到位置。

Step.1 將子選單頁面加到設定的選單下

我們要建立自己的功能設定頁面，就必須「建立一個路徑」好方便點選進入，方法是管理選單載入之前就要寫進去，所以切入點是 admin_menu。

do_action( ‘admin_menu’, string $context )

Step.2 使用函數 add_options_page 將相關參數傳入

add_options_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = ”, int $position = null )

其中參數 $capability 是設定哪一種角色能使用這個功能，$menu_slug 要注意不要重複到別人設定過的名稱。

Step.3 在 options table 建立一個記錄

register_setting( string $option_group, string $option_name, array $args = array() )

以上步驟我們整理一下程式碼：

add_action( 'admin_menu', 'add_my_option_menu');
function add_my_option_menu(){
	add_options_page( 'page_title' , 'menu_title' , 'administrator' , 'sig_plugin_option_slug' , 'sig_plugin_option_page' );

	add_action( 'admin_init', function(){
		register_setting( 'my_options_group', 'my_options_name' );
	});
}

Step.4 在頁面設計一個表單

基本上就是一個 form 的 html 語法，其中要提一下函數 settings_fields，會利用一些 type=hidden 來處理表單的安全性。

<?php
function sig_plugin_option_page() {

	$options = get_option('my_options_name');
?>
	<div class="wrap">
		
		<form action="options.php" method="post">
			
			<?php settings_fields('my_options_group'); ?>

			<table class="form-table">
				<tbody>
					<tr>
						<th scope="row">文字內容</th>
						<td>
							 項目一 <input type="text" name="my_options_name[opt1]" value="<?php if(!empty($options['opt1'])) echo $options['opt1']; ?>">
						</td>
					</tr>
					<tr>
						<th scope="row">複選框</th>
						<td>
							<input type="checkbox" name="my_options_name[opt2]" value="2" <?php if(!empty($options['opt2'])) checked( $options['opt2'], "2" ); ?>> 項目二
							<input type="checkbox" name="my_options_name[opt3]" value="3" <?php if(!empty($options['opt3'])) checked( $options['opt3'], "3" ); ?>> 項目三
						</td>
					</tr>
					<tr>
						<th scope="row">選項按鈕</th>
						<td>
							<input type="radio" name="my_options_name[opt4]" value="4" <?php if(!empty($options['opt4'])) checked( $options['opt4'], "4" ); ?>> 項目四
							<input type="radio" name="my_options_name[opt5]" value="5" <?php if(!empty($options['opt5'])) checked( $options['opt5'], "5" ); ?>> 項目五
							<input type="radio" name="my_options_name[opt6]" value="6" <?php if(!empty($options['opt6'])) checked( $options['opt6'], "6" ); ?>> 項目六
						</td>
					</tr>
					<tr>
						<th scope="row">下拉選單</th>
						<td>
							<select name="my_options_name[opt7]">
								<option> -- </option>
								<option value="AA" <?php if(!empty($options['opt7'])) selected( $options['opt7'], "AA" ); ?>>項目七</option>
								<option value="BB" <?php if(!empty($options['opt7'])) selected( $options['opt7'], "BB" ); ?>>項目八</option>
							</select>
						</td>
					</tr>

				</tbody>
			</table>
			<?php submit_button(); ?>
		</form>
	</div>

<?php
}
?>

除了一般表單欄位外，之後會再繼續介紹一些特別的欄位，方便我們進階的編輯。