워드프레스 알림판에 새로운 옵션 페이지를 추가하고 싶은 경우가 있습니다. 예를 들어, 헤더나 푸터에 특정 문구를 코드를 사용하여 테마 파일에 직접 추가한 경우 추후에 고객이 해당 문구를 쉽게 바꿀 수 있도록 알림판에 옵션 페이지를 추가하면 편리할 수 있습니다.
워드프레스 알림판에 옵션 페이지 추가하기
워드프레스 관리자 페이지에 옵션 페이지를 추가하는 방법은 워드프레스 Codex 문서에 잘 설명되어 있습니다.
설명이 매우 장황한데요. 최종적으로 두 개의 필드를 추가하는 방법을 설명하고 있습니다. 종합적인 코드가 https://gist.github.com/vishalkakadiya/735691e184255cd285725c3474109008 문서에도 나와 있습니다. 이 문서에서는 Codex 문서에서 제시하는 코드의 내용을 그대로 여기에 복사했습니다.
class MySettingsPage
{
/**
* Holds the values to be used in the fields callbacks
*/
private $options;
/**
* Start up; 시작
*/
public function __construct()
{
add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
add_action( 'admin_init', array( $this, 'page_init' ) );
}
/**
* Add options page; 옵션 페이지 추가
*/
public function add_plugin_page()
{
// This page will be under "Settings"; "설정" 페이지 아래에 표시됨
add_options_page(
'Settings Admin',
'My Settings', // "설정" > "My Settings" 페이지
'manage_options',
'my-setting-admin',
array( $this, 'create_admin_page' )
);
}
/**
* Options page callback
*/
public function create_admin_page()
{
// Set class property; 클래스 속성 설정
$this->options = get_option( 'my_option_name' );
?>
<div class="wrap">
<h1>My Settings</h1>
<form method="post" action="options.php">
<?php
// This prints out all hidden setting fields
settings_fields( 'my_option_group' );
do_settings_sections( 'my-setting-admin' );
submit_button();
?>
</form>
</div>
<?php
}
/**
* Register and add settings; 설정 등록 및 추가
*/
public function page_init()
{
register_setting(
'my_option_group', // Option group; 옵션 그룹
'my_option_name', // Option name; 옵션명
array( $this, 'sanitize' ) // Sanitize
);
add_settings_section(
'setting_section_id', // ID
'My Custom Settings', // Title, 옵션 페이지에 표시되는 타이틀
array( $this, 'print_section_info' ), // Callback
'my-setting-admin' // Page
);
add_settings_field(
'id_number', // ID
'ID Number', // Title
array( $this, 'id_number_callback' ), // Callback
'my-setting-admin', // Page
'setting_section_id' // Section
);
add_settings_field(
'title',
'Title',
array( $this, 'title_callback' ),
'my-setting-admin',
'setting_section_id'
);
}
/**
* Sanitize each setting field as needed
*
* @param array $input Contains all settings fields as array keys
*/
public function sanitize( $input )
{
$new_input = array();
if( isset( $input['id_number'] ) )
$new_input['id_number'] = absint( $input['id_number'] );
if( isset( $input['title'] ) )
$new_input['title'] = sanitize_text_field( $input['title'] );
return $new_input;
}
/**
* Print the Section text
*/
public function print_section_info()
{
print 'Enter your settings below:'; // 옵션 페이지에 표시되는 문구. 예: '아래에 설정을 입력하세요'
}
/**
* Get the settings option array and print one of its values
*/
public function id_number_callback()
{
printf(
'<input type="text" id="id_number" name="my_option_name[id_number]" value="%s" />',
isset( $this->options['id_number'] ) ? esc_attr( $this->options['id_number']) : ''
);
}
/**
* Get the settings option array and print one of its values
*/
public function title_callback()
{
printf(
'<input type="text" id="title" name="my_option_name[title]" value="%s" />',
isset( $this->options['title'] ) ? esc_attr( $this->options['title']) : ''
);
}
}
if( is_admin() )
$my_settings_page = new MySettingsPage();위의 코드를 사용 중인 테마의 함수 파일에 추가하면 ID Number와 Title이라는 두 필드를 설정 > My Settings 페이지에서 입력할 수 옵션 페이지가 알림판에 추가됩니다. (차일드 테마를 만들어서 작업하도록 합니다. 그렇지 않으면 테마가 업데이트될 경우 수정 사항이 사라지게 됩니다.)
만약 추가로 필드를 추가하고 싶다면 다음 부분을 찾아서 그대로 복사하여 그 아래에 붙여넣은 다음 적절히 값을 변경하면 됩니다.
add_settings_field(
'title',
'Title',
array( $this, 'title_callback' ),
'my-setting-admin',
'setting_section_id'
); 그리고 아래의 섹션에서도 비슷한 방법으로 새로 추가하는 항목을 추가해주어야 합니다. 가령, 전화번호를 받는 항목을 텍스트 필드로 추가하는 경우 다음과 같은 세 가지 코드 스니핏을 적절한 곳에 추가해주면 됩니다.
// Telephone
add_settings_field(
'telephone_number',
'Telephone Number',
array( $this, 'telephone_number_callback' ),
'my-setting-admin',
'setting_section_id'
);
// return $new_input; 바로 위에 추가
if( isset( $input['telephone_number'] ) )
$new_input['telephone_number'] = sanitize_text_field( $input['telephone_number'] );
// public function title_callback() 아래에 추가
public function telephone_number_callback()
{
printf(
'<input type="text" id="telephone_number" name="my_option_name[telephone_number]" value="%s" />',
isset( $this->options['telephone_number'] ) ? esc_attr( $this->options['telephone_number']) : ''
);
}그러면 다음과 같이 3가지 필드가 표시됩니다.
이제 값을 입력하여 저장하면 DB에 저장됩니다. 그러면 저장된 값을 어떻게 불러올 수 있을까요? 값을 불러오려면 다음과 같은 코드를 사용합니다.
$my_options = get_option( 'my_option_name' );
echo $my_options['title'];
echo $my_options['id_number'];
echo $my_options['telephone_number'];이 방법을 사용하면 별도의 플러그인 없이 옵션 페이지를 워드프레스 관리자 페이지에 추가할 수 있습니다.
다른 방법으로 워드프레스 알림판 > 설정 > 일반에 사용자 입력 테스트 필드를 추가하는 방법이 다음 글에 설명되어 있습니다.
하나의 텍스트 필드를 "일반" 설정 페이지에 추가하려는 경우 이 방법을 사용하는 것이 더 간편합니다.
댓글 남기기