WordPress Settings API を利用してタブを実装する

自作のプラグインの度重なる機能追加に伴って、設定項目が多くなってきた。

そこで設定ページにタブを追加しようとしたが、ちょっと手こずったので備忘録として残しておきます。

WordPress Settings API

WordPress Settings API を利用すれば、WordPress の管理画面で統一したユーザー インターフェイスを半自動的に管理される設定ページを追加できます。

この API には、設定ページ、セクションおよびフィールドはあるのだが、残念ながらタブがありません。しかし、メニューの設定ページでタブを使用しているので、その部分のコードをハックして利用できました。

インターフェイスとしては下記の2種類になるとおもいますが、ここではメニューの設定ページのタブに合わせて、タブを切り替えたときにページをリロードする方法としました。

• すべてのフィールドをエコーし、JavaScript（jQuery UI のタブ等）を利用してタブの切り替えにより表示／非表示する方法
• ひとつのタブをページとしてタブを切り替えたときにページをリロードする方法

サンプル コード

<?php

class SampleSettingsPage
{
	private $options;

	public function __construct() {
		add_action( 'admin_menu',  array( $this, 'add_menu' ) );
		add_action( 'admin_init',  array( $this, 'init_page' ) );
	}

	function add_menu() {
		add_options_page( 'サンプル設定', 'サンプル設定', 'manage_options', 'sample-settings', array( $this, 'create_page') );
	}

	function create_page() {
		?>
		<div class="wrap">
			<h1>サンプル設定</h1>
			<?php // settings_errors(); // 設定ページの場合は不要 ?>
			<?php $active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'tab-page1'; ?>
			<h2 class="nav-tab-wrapper">
				<a href="?page=sample-settings&amp;tab=tab-page1" class="nav-tab <?php echo $active_tab == 'tab-page1' ? 'nav-tab-active' : ''; ?>">タブページ1</a>
				<a href="?page=sample-settings&amp;tab=tab-page2" class="nav-tab <?php echo $active_tab == 'tab-page2' ? 'nav-tab-active' : ''; ?>">タブページ2</a>
			</h2>
			<form method="post" action="options.php">
			<?php
				settings_fields( 'sample_settings' );
				do_settings_sections( 'sample-settings' );
				submit_button();
			?>
			</form>
		</div>
		<?php
	}

	function init_page() {
		$this->options = get_option( 'sample_options' );

		$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'tab-page1';
		switch ( $active_tab ){
			case 'tab-page1':
				add_settings_section( 'sample_section1', 'セッション', '__return_false', 'sample-settings' );
				add_settings_field( 'field1', 'フィールド', array( $this, 'display_field1' ), 'sample-settings', 'sample_section1' );
				break;
			case 'tab-page2':
				add_settings_section( 'sample_section2', 'セッション', '__return_false', 'sample-settings' );
				add_settings_field( 'field2', 'フィールド', array( $this, 'display_field2' ), 'sample-settings', 'sample_section2' );
				break;
		}
		register_setting( 'sample_settings', 'sample_options', array( $this, 'sanitize' ) );
	}

	function sanitize( $input ) {
		$output = get_option( 'sample_options' );
		if ( isset( $input['field1'] ) )
			$output['field1'] = sanitize_text_field( $input['field1'] );
		if ( isset( $input['field2'] ) )
			$output['field2'] = sanitize_text_field( $input['field2'] );
		return $output;
	}

	function display_field1() {
		$value = isset( $this->options['field1'] ) ? $this->options['field1'] : '';
		?>
		<div>
		<label class="description">
			<input id="sample_options[field1]" name="sample_options[field1]" class="regular-text" type="text" value="<?php echo esc_attr( $value ); ?>" />
		</label>
		</div>
		<?php
	}

	function display_field2() {
		$value = isset( $this->options['field2'] ) ? $this->options['field2'] : '';
		?>
		<div>
		<label class="description">
			<input id="sample_options[field2]" name="sample_options[field2]" class="regular-text" type="text" value="<?php echo esc_attr( $value ); ?>" />
		</label>
		</div>
		<?php
	}
}

if ( is_admin() ) {
	$sample_settings_page = new SampleSettingsPage();
}