Tạo một tiện ích bảng điều khiển có thể định cấu hình

Một vài tuần trước, chúng tôi đã biết cách thêm metabox bảng điều khiển RSS tùy chỉnh vào quản trị. Hôm nay, tôi muốn chỉ cho bạn cách thêm các tùy chọn có thể định cấu hình vào metabox trang tổng quan này.

Đây là kết quả của những gì chúng ta sẽ làm:

Hàm quan trọng nhất trong hướng dẫn này là wp_add_dashboard_widget(). Đó là chức năng WordPress đăng ký tiện ích bảng điều khiển. Chúng ta đã thấy rằng việc đăng ký tiện ích và chức năng xuất tiện ích trên bảng điều khiển khá dễ dàng, nhưng chúng ta chưa đề cập đến tham số cuối cùng của chức năng này. Về cơ bản, wp_add_dashboard_widget() có 4 tham số:

$widget_id
(integer) (bắt buộc) một con sên nhận dạng cho tiện ích của bạn. Điều này sẽ được sử dụng làm lớp css và khóa của nó trong mảng tiện ích.
Mặc định: Không có

$widget_name
(string) (bắt buộc) đây là tên tiện ích của bạn sẽ hiển thị trong tiêu đề của nó.
Mặc định: Không có

$gọi lại
(string) (bắt buộc) Tên của hàm bạn tạo sẽ hiển thị nội dung thực tế của tiện ích của bạn.
Mặc định: Không có

$control_callback
(string) (tùy chọn) Tên của hàm bạn tạo sẽ xử lý việc gửi biểu mẫu tùy chọn (cấu hình) tiện ích và cũng sẽ hiển thị các thành phần của biểu mẫu.
Mặc định: Không có

Như bạn có thể thấy, tham số thứ tư là tham số chịu trách nhiệm về các tùy chọn “cấu hình”. Khi điền tham số này, bạn yêu cầu WordPress tải một chức năng cụ thể để định cấu hình tiện ích. Nó tự động tạo liên kết “cấu hình” trong tiêu đề metabox khi bạn đặt con trỏ lên nó.

Bước 1: Đăng ký chức năng tùy chọn cấu hình

Vì vậy, bước đầu tiên là sửa đổi lệnh gọi wp_add_dashboard_widget() và thêm tên của các hàm tùy chọn định cấu hình trong tham số cuối cùng. Các hàm rc_mdm_register_widgets() của bạn sẽ trở thành:

/**
 * Register all dashboard metaboxes
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/

function rc_mdm_register_widgets() {
	global $wp_meta_boxes;
	
	wp_add_dashboard_widget('widget_custom_rss', __('My RSS Feeds', 'rc_mdm'), 'rc_mdm_create_my_rss_box', 'rc_mdm_configure_my_rss_box');
}
add_action('wp_dashboard_setup', 'rc_mdm_register_widgets');

Chúng tôi chỉ cần thêm “rc_mdm_configure_my_rss_box” vào tham số cuối cùng.

Bước 2: Tạo chức năng tùy chọn cấu hình

Bước này không phức tạp. Tất cả những gì chúng ta phải làm là tạo các trường biểu mẫu được lưu trữ thành một mảng. Để làm như vậy, chúng tôi sẽ sử dụng update_option(). Chúng tôi không cần tạo một biểu mẫu đầy đủ vì WordPress tạo nó cho chúng tôi. Chúng ta chỉ cần đăng ký các trường. Một điểm rất hay cần đề cập là WordPress tự động thêm nonce vào biểu mẫu để giúp biểu mẫu trở nên an toàn và tránh các vấn đề bảo mật tiềm ẩn. Đây là mã của hàm rc_mdm_configure_my_rss_box() của chúng tôi ( bạn có nhớ không? Đây là tham số thứ 4 mà chúng tôi đã xác định trong wp_add_dashboard_widget() ).

/**
 * Creates the RSS metabox configuration settings
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_mdm_configure_my_rss_box( $widget_id ) {

	// Get widget options
	if ( !$rc_mdm_widget_options = get_option( 'rc_mdm_dashboard_widget_options' ) )
		$rc_mdm_widget_options = array();

	// Update widget options
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && isset($_POST['rc_mdm_widget_post']) ) {
		update_option( 'rc_mdm_dashboard_widget_options', $_POST['rc_mdm_widget'] );
	}
	
	// Retrieve feed URLs
	$url_1 = $rc_mdm_widget_options['url_1'];
	$url_2 = $rc_mdm_widget_options['url_2'];
	$url_3 = $rc_mdm_widget_options['url_3']; ?>

	<p>
		<label for="rc_mdm_url_1-"><?php _e('Enter the RSS feed URL #1:', 'rc_mdm'); ?></label>
		<input class="widefat" id="rc_mdm_url_1" name="rc_mdm_widget[url_1]" type="text" value="<?php if( isset($url_1) ) echo $url_1; ?>" />
	</p>
	
	<p>
		<label for="rc_mdm_url_2"><?php _e('Enter the RSS feed URL #2:', 'rc_mdm'); ?></label>
		<input class="widefat" id="rc_mdm_url_2" name="rc_mdm_widget[url_2]" type="text" value="<?php if( isset($url_2) ) echo $url_2; ?>" />
	</p>
	
	<p>
		<label for="rc_mdm_url_3"><?php _e('Enter the RSS feed URL #3:', 'rc_mdm'); ?></label>
		<input class="widefat" id="rc_mdm_url_3" name="rc_mdm_widget[url_3]" type="text" value="<?php if( isset($url_3) ) echo $url_3; ?>" />
	</p>
	
	<input name="rc_mdm_widget_post" type="hidden" value="1" />
	<?php
} ?>

Bây giờ bạn có thể tải lại trang tổng quan của mình và nếu bạn đặt con trỏ lên hộp metabox tiện ích, bạn sẽ thấy liên kết “cấu hình” xuất hiện ở trên cùng bên phải. Khi bạn bấm vào nó, biểu mẫu tùy chọn sẽ được tải. Và khi điền vào các trường và lưu URL nguồn cấp dữ liệu sẽ được lưu trữ trong bảng SQL tùy chọn của chúng tôi.

Bước 3: Truy xuất các tùy chọn

Bước cuối cùng là thay thế các URL nguồn cấp dữ liệu mà chúng tôi đã mã hóa cứng trong phần đầu tiên của hướng dẫn. Từ dòng 14 đến 18 trong rc_mdm_create_my_rss_box(), chúng tôi đã thêm hai URL. Đơn giản chỉ cần thay thế nó bằng:

// My feeds list
if ( !$my_feeds = get_option( 'rc_mdm_dashboard_widget_options' ) )
    $my_feeds = array();

Và thế là xong! Chúng tôi đã quản lý để thêm các tùy chọn tùy chỉnh vào tiện ích bảng điều khiển một cách dễ dàng.