[워드프레스] 테마 옵션/플러그인 옵션 페이지 만들기

개요

워드프레스에서 테마를 설치하면 보통 테마 옵션(Theme Options) 페이지가 외모(Appearance) 아래에 추가됩니다. 그리고 플러그인을 설치하면 설정(Settings) 아래에 해당 플러그인의 옵션을 지정할 수 있는 페이지가 추가됩니다.

이 글에서는 플러그인을 활용하여 최종적으로 아래 그림과 같은 테마 옵션이나 플러그인 옵션 페이지를 대시보드에 추가하여 관리자가 (테마 또는 플러그인 소스 파일을 편집하지 않고) 대시보드에서 변수를 입력하여 제어할 수 있도록 하는 방법에 대해 살펴보겠습니다.

워드프레스 테마 옵션 추가하기

이 작업을 수월하게 해 주는 플러그인으로 Easy Theme Options라는 플러그인이 있습니다. 이 플러그인은 제작된 지 꽤 오래되었지만 이상 없이 작동합니다. 먼저 이 플러그인을 검색하여 설치하도록 합니다. 설치 후 활성화하면 두 개의 옵션 메뉴 페이지가 대시보드에 추가됩니다. 그 중에서 외모 > Theme Options를 클릭합니다.

워드프레스 테마 옵션

참고: 워드프레스와의 호환성으로 인해 잘 작동하지 않거나 보다 강력한 기능을 원하는 경우 여기에서 유료 플러그인을 살펴보시기 바랍니다.

이미 테마 옵션 메뉴가 있기 때문에 Theme Options 메뉴가 2개가 되었네요. Theme Options 메뉴를 클릭하면 다음과 같은 화면이 표시됩니다.

Easy Theme Options Settings - 워드프레스 테마 옵션 만들기

아마 대부분의 사용자는 이 화면을 보고 '이게 뭐야?'하고 둘러보다가 삭제할 것 같습니다. 그렇다면 이 화면은 과연 무엇일까요? 바로 샘플 화면입니다. 이런 식으로 탭과 필드를 구성할 수 있다는 것을 보여줍니다.

위의 화면을 보면 General, Advanced 탭으로 구성되어 있습니다. Help 탭을 눌러보면 구체적인 사용법이 나옵니다. Help 탭을 클릭하면 맨 위에 다음과 같이 설명되어 있습니다.

Adding tabs is simple. What you have to do is to edit the includes/options.php file in the plugin directory.

즉, Theme Options 화면에 표시되는 탭과 필드를 수정하려면 includes/options.php 파일을 수정하면 됩니다.

옵션 페이지 위치

우선 외모 > Theme Options가 표시되어 있어 별로 보기가 안 좋으니 이것을 설정 메뉴 아래로 이동시키도록 하겠습니다.

easy-theme-options.php 파일에서 다음 부분을 찾습니다:

add_submenu_page(
'themes.php',
__('Easy Theme Options Settings', 'eto'),
__('Theme Options', 'eto'),
'manage_options',
'eto-settings',
'eto_settings_page');

위 부분을 아래와 비슷하게 수정합니다.

add_submenu_page(
'options-general.php',
__('사용자 지정 옵션', 'eto'),
__('내 옵션', 'eto'),
'manage_options',
'eto-settings',
'eto_settings_page');

그러면 "Theme Options"가 설정 아래로 이동하고 이름도 "내 옵션"으로 바뀝니다.

워드프레스 내 옵션 페이지 만들기

add_submenu_page에 대한 내용은 여기를 참고하시기 바랍니다. (참고로 이 WordPress Codex 페이지에서 add_dashboard_page에 대해서도 살펴보시기 바랍니다.)

탭 추가하기

이제 탭을 추가하고 필드를 추가/수정하는 방법을 살펴보겠습니다. includes/options.php 파일을 열도록 합니다. 파일을 살펴보면 쉽게 탭을 추가하고 필드를 추가할 수 있습니다.

먼저 "추가 옵션" 탭을 하나 추가하도록 하겠습니다. 다음 부분을 찾습니다.

$eto_custom_tabs = array(
array(
'label'=> __('General', 'eto'),
'id' => $prefix.'general'
),
array(
'label'=> __('Advanced', 'eto'),
'id' => $prefix.'advanced'
)
);

"Advanced" 라벨 아래에 새로운 탭을 추가할 수 있습니다. 다음과 같은 코드를 추가합니다.

// 앞부분의 코드
array(
'label'=> __('추가 옵션', 'eto'),
'id' => $prefix.'additional'
)
);

탭에 필드 추가하기

이제 추가 옵션 탭에 새로운 필드를 하나 추가해보도록 하겠습니다. TAB 2의 끝부분을 찾습니다(맨 아래).

array(
'type' => 'tab_end'
)
/* -- /TAB 2 -- */

이 코드 아래에 TAB 3, 즉 "추가 옵션" 탭을 추가하도록 해 보죠.

/* -- TAB 3 -- */
array(
'id' => $prefix.'additional', // Use data in $eto_custom_tabs
'type' => 'tab_start'
),

array(
'label'=> '텍스트 입력',
'desc' => '<br>이 필드에 텍스트를 입력하세요',
'id' => $prefix.'mycustomtext',
'type' => 'text'
),

array(
'type' => 'tab_end'
)
/* -- /TAB 3 -- */

화면을 새로 고침하면 아래 그림과 같이 "추가 옵션"이 새로 추가되고 새로운 텍스트 필드("텍스트 입력")가 표시됩니다.

워드프레스 테마 옵션 추가하기

오, 멋있지 않나요? TAB 1, TAB 2에 있는 필드를 적절히 응용하여 테마 옵션이나 플러그인 옵션을 원하는 대로 추가할 수 있습니다.

데이터 필드 불러오기

필드를 추가했다면 그 값을 불러와서 테마 혹은 플러그인 소스 파일에서 사용해야 합니다. 크게 두 가지 방법으로 값을 불러올 수 있습니다. Help 탭에서 "How to retrieve the data fields" 부분에 자세하게 설명되어 있으니 참고하시기 바랍니다.

이 방법을 사용하면 테마 커스터마이징 작업을 할 때, 추가되는 옵션을 이와 같은 방식으로 제어한다면 유지보수 측면에서 유용할 것 같습니다. 플러그인을 제작하는 경우에도 이 플러그인을 사용하여 플러그인 옵션 페이지를 만들 수 있습니다.

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.