대시보드 위젯을 구성 가능하게 만들기

몇 주 전에 우리는 사용자 정의 RSS 대시보드 메타박스를 관리에 추가하는 방법을 살펴보았습니다. 오늘은 이 대시보드 메타박스에 구성 가능한 옵션을 추가하는 방법을 보여드리고자 합니다.

우리가 하려는 작업의 결과는 다음과 같습니다.

이 튜토리얼에서 가장 중요한 기능은 wp_add_dashboard_widget()입니다. 대시보드 위젯을 등록하는 워드프레스 기능입니다. 대시보드에 위젯과 위젯을 출력하는 함수를 등록하는 것은 꽤 쉽다는 것을 이미 살펴봤지만, 이 함수의 마지막 매개변수는 다루지 않았습니다. 기본적으로 wp_add_dashboard_widget()에는 4개의 매개변수가 있습니다.

$widget_id
(정수) (필수) 위젯의 식별 슬러그입니다. 이는 CSS 클래스와 위젯 배열의 키로 사용됩니다.
기본값: 없음

$widget_name
(문자열) (필수) 위젯이 제목에 표시할 이름입니다.
기본값: 없음

$콜백
(문자열) (필수) 위젯의 실제 콘텐츠를 표시하기 위해 생성하는 함수의 이름입니다.
기본값: 없음

$control_callback
(문자열) (선택 사항) 위젯 옵션(구성) 양식 제출을 처리하고 양식 요소도 표시하도록 생성하는 함수의 이름입니다.
기본값: 없음

보시다시피, 네 번째 매개변수는 "구성" 옵션을 담당하는 매개변수입니다. 이 매개변수를 채울 때 WordPress에 위젯을 구성하기 위한 특정 기능을 로드하도록 지시합니다. 메타박스 제목 위에 커서를 놓으면 자동으로 "구성" 링크가 생성됩니다.

1단계: 옵션 구성 기능 등록

따라서 첫 번째 단계는 wp_add_dashboard_widget() 호출을 수정하고 마지막 매개변수에 구성 옵션 함수의 이름을 추가하는 것입니다. rc_mdm_register_widgets() 함수는 다음과 같아야 합니다.

/**
 * 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');

마지막 매개변수에 "rc_mdm_configure_my_rss_box"를 추가했습니다.

2단계: 옵션 구성 기능 생성

이 단계는 복잡하지 않습니다. 우리가 해야 할 일은 배열에 저장된 양식 필드를 만드는 것뿐입니다. 이를 위해 update_option()을 사용하겠습니다. WordPress가 자동으로 양식을 생성하므로 전체 양식을 생성할 필요가 없습니다. 필드만 등록하면 됩니다. 언급할 만한 아주 좋은 점은 WordPress가 양식을 안전하게 만들고 잠재적인 보안 문제를 방지하는 nonce를 자동으로 양식에 추가한다는 것입니다. 다음은 rc_mdm_configure_my_rss_box() 함수의 코드입니다(기억하시나요? wp_add_dashboard_widget()에서 정의한 4번째 매개변수입니다).

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

이제 대시보드를 다시 로드할 수 있으며 위젯 메타박스에 커서를 놓으면 오른쪽 상단에 "구성" 링크가 표시됩니다. 클릭하면 옵션 양식이 로드됩니다. 필드를 채우고 피드 URL을 저장할 때 옵션 SQL 테이블에 저장됩니다.

3단계: 옵션 검색

마지막 단계는 튜토리얼의 첫 번째 부분에서 하드 코딩한 피드 URL을 바꾸는 것입니다. rc_mdm_create_my_rss_box()의 14~18번째 줄에 두 개의 URL을 추가했습니다. 간단히 다음과 같이 교체하세요.

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

그리고 그게 다야! 우리는 대시보드 위젯에 사용자 정의 옵션을 조용히 쉽게 추가할 수 있었습니다.