프로그래밍

[워드프레스] 관리자 화면에 메뉴 추가하기(add_menu_page)

📈 2

워드프레스 테마나 플러그인을 만들 때 본인이 만든 관리자 화면에서 테마나 플러그인의 설정 페이지를 만들어 작동하도록 하고 싶을 때가 있습니다.

설정 페이지를 만들기 위해서는 일단 관리자 화면에 먼저 메뉴를 추가해야 합니다. 오늘은 add_menu_page 함수를 이용해 간단하게 관리자 화면에 메뉴를 추가하는 방법을 정리해봅니다.

add_menu_page 기본 사용법

워드프레스에서는 기본적으로 add_menu_page 라는 내장 함수를 이용해 사용자가 직접 관리자 화면에 메뉴를 추가 할 수 있도록 하고 있습니다. add_menu_page 함수의 사용법은 아래와 같습니다.

function custom_admin_menu() {
 add_menu_page(
  $page_title,
  $menu_title,
  $capability,
  $menu_slug,
  ($function),
  ($icon_url),
  ($position)
 );
}
add_action( 'admin_menu', 'custom_admin_menu' );

admin_menu 함수가 실행 될 때 메뉴를 추가하기 위해 새로 만든 custom_admin_menu 함수가 실행 되도록 합니다.

custom_admin_menu 함수에서는 add_menu_page 내장 함수를 이용해 새로운 메뉴를 만들어 줍니다.

add_menu_page 파라미터

add_menu_page 함수에 들어가는 파라미터를 하나씩 알아 봅시다. 참고로 위 예제에서 괄호가 없는 파라미터는 필수 투입 파라미터이고, 괄호 안에 있으면 선택적으로 투입 할 수 있습니다.

page_title

사용자가 메뉴를 눌러 진입한 페이지의 제목입니다. 인터넷 브라우저의 탭이나 타이틀바에 표시되는 페이지의 제목이라고 생각하면 됩니다.

menu_title

실제 관리자 화면의 메뉴 목록에 표시될 메뉴의 이름입니다. 아무래도 관리자 화면의 메뉴 폭이 크지 않으니 짧고 간단하게 투입하는 것이 좋겠네요.

capability

메뉴를 볼 수 있는 사용자의 권한을 의미합니다. manage_options 값 정도를 넣으면 충분합니다. 필요에 따라 다양한 권한을 설정 할 수 있습니다. 다양한 권한에 대한 값은 아래 참고자료의 Role and Capabilities 페이지를 참고하세요.

menu_slug

메뉴를 눌러 표시되는 페이지의 slug 를 입력합니다. slug 는 영어 소문자, 숫자, hypen 으로만 구성됩니다.

function

실제 페이지에 표시될 내용을 출력해 줄 함수를 넣으면 됩니다. 이번 포스트에 이 부분까지 포함하면 너무 길어지니 다음에 이 부분만 추가적으로 다뤄 보겠습니다.

icon_url

메뉴 항목의 아이콘을 설정합니다. svg 파일을 직접 연결하거나, Dashicons 를 사용 할 수 있고, none 으로 설정해 아무 것도 표시 하지 않을 수 있습니다.

position

메뉴 항목이 표시 될 위치를 설정합니다. 본인이 원하는 위치에 맞는 적당한 숫자를 넣으면 됩니다. 간단하게 몇 가지만 알아보면 아래와 같습니다(워드프레스 한국어 버전 메뉴입니다).

  • 5 – 글
  • 20 – 페이지
  • 60 – 테마 디자인
  • 65 – 플러그인
  • 80 – 설정

예를 들어 설정 메뉴 바로 밑에 추가하고 싶다면 81 정도로 설정하면 됩니다.

add_menu_page 실전 예제

실제로 add_menu_page 함수를 사용하는 방법은 아래와 같습니다.

function custom_admin_menu() {
 add_menu_page(
  'My custom plugin settings page',
  'My custom plugin',
  'manage_options',
  'my-custom-plugin-settings',
  'custom_plugin_setting',
  'dashicons-admin-generic',
  81
 );
}
add_action( 'admin_menu', 'custom_admin_menu' );

대충 어떻게 사용하는지 감이 잡히죠? 생각보다 굉장히 간단합니다.

추가적으로 서브 메뉴 만드는 방법과 실제 설정 페이지를 만드는 방법에 대해서도 포스팅 하도록 하겠습니다.

참고자료