Tạo admin options page đơn giản

Nếu bạn đang viết giao diện hoặc plugin cho WordPress và bạn cần viết trang option để lưu các cài đặt thì bài viết này sẽ giúp ích được cho bạn. Trong bài này mình sẽ nêu một ví dụ đơn giản về cách viết options page trên plugin. Trong trường hợp bạn muốn tích hợp vào giao diện thì cũng làm tương tự nhé.

<?php
/*
Plugin Name: Driver's License by HocWP
Plugin URI: https://hocwp.net/
Description: This plugin is created by HocWP Team.
Author: HocWP Team
Version: 1.0
Author URI: http://facebook.com/hocwpnet/
Text Domain: hocwp-pdl
*/
define( 'HOCWP_PDL_PATH', dirname( __FILE__ ) );

global $hocwp_pdl;
$hocwp_pdl          = new stdClass();
$hocwp_pdl->options = get_option( 'hocwp_pdl' );

$defaults           = array(
	'port' => 3333
);
$hocwp_pdl->options = wp_parse_args( $hocwp_pdl->options, $defaults );

function hocwp_pdl_admin_menu_action() {
	add_options_page(
		__( 'Driver License Settings', 'hocwp-pdl' ),
		__( 'Driver License', 'hocwp-pdl' ),
		'manage_options',
		'hocwp_pdl',
		'hocwp_pdl_admin_settings_page_callback'
	);
}

add_action( 'admin_menu', 'hocwp_pdl_admin_menu_action' );

function hocwp_pdl_admin_settings_page_callback() {
	load_template( HOCWP_PDL_PATH . '/admin-settings-page.php' );
}

function hocwp_pdl_admin_init_action() {
	register_setting( 'hocwp_pdl', 'hocwp_pdl', 'hocwp_pdl_admin_settings_page_sanitize' );
	add_settings_field( 'hostname', __( 'Hostname / IP', 'hocwp-pdl' ), 'hocwp_pdl_admin_settings_page_settings_field_hostname_callback', 'hocwp_pdl' );
	add_settings_field( 'port', __( 'Port', 'hocwp-pdl' ), 'hocwp_pdl_admin_settings_page_settings_field_port_callback', 'hocwp_pdl' );
	add_settings_field( 'username', __( 'Username', 'hocwp-pdl' ), 'hocwp_pdl_admin_settings_page_settings_field_username_callback', 'hocwp_pdl' );
	add_settings_field( 'password', __( 'Password', 'hocwp-pdl' ), 'hocwp_pdl_admin_settings_page_settings_field_password_callback', 'hocwp_pdl' );
}

add_action( 'admin_init', 'hocwp_pdl_admin_init_action' );

function hocwp_pdl_admin_settings_page_sanitize( $input ) {
	return $input;
}

function hocwp_pdl_admin_settings_page_settings_field_hostname_callback() {
	global $hocwp_pdl;
	$value = isset( $hocwp_pdl->options['hostname'] ) ? $hocwp_pdl->options['hostname'] : '';
	?>
	<label for="hocwp_pdl_hostname">
		<input id="hocwp_pdl_hostname" type="text" name="hocwp_pdl[hostname]" class="regular-text"
		       value="<?php echo esc_attr( $value ); ?>">
	</label>
	<?php
}

function hocwp_pdl_admin_settings_page_settings_field_port_callback() {
	global $hocwp_pdl;
	$value = isset( $hocwp_pdl->options['port'] ) ? $hocwp_pdl->options['port'] : '';
	?>
	<label for="hocwp_pdl_port">
		<input id="hocwp_pdl_port" type="text" name="hocwp_pdl[port]" class="regular-text"
		       value="<?php echo esc_attr( $value ); ?>">
	</label>
	<?php
}

function hocwp_pdl_admin_settings_page_settings_field_username_callback() {
	global $hocwp_pdl;
	$value = isset( $hocwp_pdl->options['username'] ) ? $hocwp_pdl->options['username'] : '';
	?>
	<label for="hocwp_pdl_username">
		<input id="hocwp_pdl_username" type="text" name="hocwp_pdl[username]" class="regular-text"
		       value="<?php echo esc_attr( $value ); ?>">
	</label>
	<?php
}

function hocwp_pdl_admin_settings_page_settings_field_password_callback() {
	global $hocwp_pdl;
	$value = isset( $hocwp_pdl->options['password'] ) ? $hocwp_pdl->options['password'] : '';
	?>
	<label for="hocwp_pdl_password">
		<input id="hocwp_pdl_password" type="password" name="hocwp_pdl[password]" class="regular-text"
		       value="<?php echo esc_attr( $value ); ?>">
	</label>
	<?php
}

Và đoạn code hiển thị HTML của options page trong tập tin admin-settings-page.php như sau:

<div class="wrap">
	<h1><?php _e( 'Driver License Settings', 'hocwp-pdl' ); ?></h1>

	<form method="post" action="options.php">
		<?php
		settings_fields( 'hocwp_pdl' );
		global $wp_settings_fields;
		if ( isset( $wp_settings_fields['hocwp_pdl']['default'] ) ) {
			?>
			<table class="form-table">
				<tbody>
				<?php do_settings_fields( 'hocwp_pdl', 'default' ); ?>
				</tbody>
			</table>
			<?php
		}
		do_settings_sections( 'hocwp_pdl' );
		submit_button();
		?>
	</form>
</div>

Bạn có thể xem thêm cách hoạt động của hàm add_options_page trên trang codex của WordPress. Chúc bạn thành công.