更新日期:2021-05-12

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

Step.1 新增一個設定下的子選單、註冊設定值名稱:

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.2 建立表單內容:

<?php
function sig_plugin_option_page() {

	$options = get_option('my_options_name');
?>
	<div class="wrap">
		<h1>標題</h1>

		<div class="card">
			<h2 class="title">區塊一</h2>
		</div>

		<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
}
?>