WordPress Admin Panel Menu example
워드프레스 관리자 패널에 매뉴 추가하고 옵션 설정하기
원문참조 : https://codex.wordpress.org/Administration_Menus
테스트 환경
Autoset 9
WordPress 4.4
개요
보통 테마나 플러그인을 개발할 때는 이용자가 옵션을 설정할 수 있도록 관리자 패널에 메뉴와 옵션 설정 화면을 제공할 필요가 있다
사이트 관리자가 옵션을 설정하고 저장하면 그 폼의 데이터는 서버측 데이터베이스에 저장되어야 하며 추후 플러그인 등의 php 함수에서 필요할 때마다 그 값을 데이터베이스로부터 읽어와서 사용할 수 있어어 한다.
관리자 패널에 메뉴를 설정한다는 것은 개발자가 php 함수를 작성해야 하므로 일반 플러그인 작성하는 방법을 사용하며 그 메뉴를 클릭하면 옵션 설정 폼이 화면에 보이도록 해야 한다.
옵션설정 폼에 데이터를 입력하고 저장하면 서버측에서 워드프레스가 관리하는 데이터베이스에 저장하도록 해야 한다. 워드프레스가 관리하는 'wp_options' 테이블에 플러그인의 옵션을 저장하는 가장 간단한 방법은 워드프레스가 제공하는 add_option(), get_option(), update_option(), delete_option() 등의 Options API 함수를 사용하는 것이다.
이렇게 'wp_options' 테이블에 저장된 옵션 데이터는 다른 플러그인이나 php 함수 안에서도 동일한 Options API 함수를 사용할 수 있으므로 쉽게 플러그인과 연결되어 플러그인에 설정될 수 있다
관리자 패널의 사이드바에 탑메뉴 혹은 [설정] 메뉴 하위에 서브메뉴를 추가하는 방법
관리자 패널의 사이드바에 메뉴를 추가하기 위해서는 일반 플러그인을 작성 방법과 기본적으로 동일한 방법을 따르면 된다
wp-content/plugins/ 안에 임의의 폴더를 생성하고 임의의 php 파일을 생성한 후 다음과 같은 코드를 작성하여 저장하면 관리자 패널의 [플러그인] 화면에서 하나의 플러그인으로 동록되어 나타나므로 [활성화] 링크를 누르면 관리자 패널에 메뉴가 삽입된다
관리자 패널의 사이드바에만 메뉴를 추가할 수 있는 것은 아니고 거의 대부분의 관리자용 페이지에 관리자용 메뉴를 추가할 수 있다
구체적인 방법은 https://codex.wordpress.org/Administration_Menus 페이지를 참고하면 된다
여기서는 관리자 패널의 사이드바에 탑메뉴를 추가하는 방법과 사이드바의 [설정] 메뉴 하위에 서버메뉴를 추가하는 방법을 코드를 통해 알아본다
아래의 코드를 사용하여 테스트하면 된다 ( wp-content / plugins / my-admin-menu / admin-menu-test.php )
<?php
/*
Plugin Name: My Sample Plugin with Admin Menu
Description: Simple Plugin with Admin Panel Menu
Author: Kim Chang-Woon
Version: 1.0
*/
add_action('admin_menu', 'sample_plugin_admin_menu');
function sample_plugin_admin_menu(){
/* add_menu_page(): 관리자 패널의 사이드바에 탑레벨 메뉴를 추가함
add_submenu_page(): 관리자 패널의 사이드바에 설정된 탑메뉴 하위에 서브 메뉴를 추가함
add_options_page(): 관리자 패널의 [설정] 메뉴 하위에 서브 메뉴를 추가함
위의 함수에 전달되는 파라미터는 다음과 같은 의미를 가진다
param 1: 옵션 설정페이지 제목
param 2: 메뉴 라벨
param 3: 관리자 권한으로 접근 가능한 기능 표시(http://codex.wordpress.org/Roles_and_Capabilities#manage_options)
param 4: 메뉴 식별자
param 5: 메뉴를 클릭하면 실행되는 함수. 함수가 실행되면 옵션설정 화면이 보여진다
*/
//add_menu_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'identifier2', 'my_plugin_options' );
add_options_page( 'My Plugin Options', 'My Plugin', 'manage_options', 'identifier2', 'my_plugin_options' );
}
function my_plugin_options() {
if ( !current_user_can( 'manage_options' ) ) {
wp_die( __( '관리자만이 이 기능을 사용할 수 있습니다.' ) );
}
echo '<h1>여기에 옵션설정 폼을 보여주면 된다</h1>';
}
옵션 폼을 보여주고 폼에 입력된 데이터를 서버 데이터베이스에 저장하고 읽어오는 예
서버 데이터베이스에 저장하고 읽어오는 기능은 WordPress Options API를 사용함
<?php
/*
Plugin Name: My Sample Plugin with Admin Menu
Description: Simple Plugin with Admin Panel Menu
Author: Kim Chang-Woon
Version: 1.0
*/
add_action('admin_menu', 'sample_plugin_admin_menu');
function sample_plugin_admin_menu(){
/* add_menu_page(): 관리자 패널의 사이드바에 탑레벨 메뉴를 추가함
add_submenu_page(): 관리자 패널의 사이드바에 설정된 탑메뉴 하위에 서브 메뉴를 추가함
add_options_page(): 관리자 패널의 [설정] 메뉴 하위에 서브 메뉴를 추가함
*/
// 관리자 패널 사이드바에 탑메뉴를 추가하려는 경우
add_menu_page( 'My Plugin Options', 'My Plugin 설정', 'manage_options', 'my-unique-identifier1', 'my_plugin_options' );
// 관리자 패널 사이드바의 [설정] 메뉴 하위에 서브메뉴를 추가하는 경우
//add_options_page( 'My Plugin Options', 'My Plugin 설정', 'manage_options', 'my-unique-identifier2', 'my_plugin_options' );
}
// 화면에 옵션 폼을 출력한다
function my_plugin_options() {
if ( !current_user_can( 'manage_options' ) ) {
wp_die( __( '관리자만이 이 기능을 사용할 수 있습니다.' ) );
}
// variables for the field and option names
$opt_name = 'mt_favorite_color';
$hidden_field_name = 'mt_submit_hidden';
$data_field_name = 'mt_favorite_color';
// Read in existing option value from database
$opt_val = get_option( $opt_name );
// See if the user has posted us some information
// If they did, this hidden field will be set to 'Y'
if( isset($_POST[ $hidden_field_name ]) && $_POST[ $hidden_field_name ] == 'Y' ) {
// Read their posted value
$opt_val = $_POST[ $data_field_name ];
// Save the posted value in the database
update_option( $opt_name, $opt_val );
// Put a "settings saved" message on the screen
?>
<div class="updated"><p><strong><?php _e('settings saved.', 'menu-test' ); ?></strong></p></div>
<?php
} // end of option update
// Now display the settings editing screen
echo '<div class="wrap">';
// header
echo "<h2>" . __( 'Menu Test Plugin Settings', 'menu-test' ) . "</h2>";
// settings form
?>
<form name="form1" method="post" action="">
<input type="hidden" name="<?php echo $hidden_field_name; ?>" value="Y">
<p><?php _e("Favorite Color:", 'menu-test' ); //Display some translated text ?>
<input type="text" name="<?php echo $data_field_name; ?>" value="<?php echo $opt_val; ?>" size="20">
</p><hr />
<p class="submit">
<input type="submit" name="Submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
<?php
} // end of function
?>