STAGE 13 · Lv.62
관리자 메뉴와 설정 페이지
add_menu_page, add_submenu_page로 관리자 메뉴를 구성하고, Settings API로 설정 페이지를 만들어 register_setting, options 테이블, settings sections/fields를 활용합니다.
관리자 메뉴 시스템 이해하기
WordPress 관리자 메뉴 구조
WordPress 관리자 화면의 왼쪽 사이드바에 있는 메뉴는 최상위 메뉴(Top-level Menu)와 서브메뉴(Submenu)로 구성됩니다. 플러그인은 자체 최상위 메뉴를 추가하거나, 기존 메뉴 아래에 서브메뉴를 추가할 수 있습니다.
메뉴를 추가하려면 admin_menu 액션 훅을 사용합니다. 네트워크 관리자(멀티사이트)에서는 network_admin_menu를 사용합니다.
좋은 플러그인은 메뉴를 과도하게 추가하지 않습니다. 단일 설정 페이지만 필요하다면 "설정" 메뉴 아래 서브메뉴로 추가하는 것이 UX 관점에서 더 좋습니다. 복잡한 플러그인(예: WooCommerce)만 자체 최상위 메뉴를 사용합니다.
Top-level
독립적인 최상위 메뉴
Sub-menu
기존 메뉴 하위 항목
Settings API
표준 설정 프레임워크
Capability
권한 기반 접근 제어
add_menu_page() - 최상위 메뉴 추가
함수 시그니처와 매개변수
add_menu_page()는 관리자 사이드바에 새로운 최상위 메뉴를 추가합니다. 7개의 매개변수를 받으며, 각각의 역할을 정확히 이해해야 합니다.
// add_menu_page() 전체 시그니처
add_menu_page(
$page_title, // (string) 페이지 <title> 태그에 표시될 텍스트
$menu_title, // (string) 사이드바 메뉴에 표시될 텍스트
$capability, // (string) 접근에 필요한 권한 (예: 'manage_options')
$menu_slug, // (string) 고유 슬러그 (URL에 사용됨)
$callback, // (callable) 페이지 내용을 렌더링할 함수
$icon_url, // (string) 메뉴 아이콘 URL 또는 Dashicons 클래스
$position // (int|float) 메뉴 위치 (숫자)
);
// 실전 예제: 플러그인 메인 메뉴 추가
add_action('admin_menu', function() {
// 최상위 메뉴
add_menu_page(
'My Plugin 설정', // 페이지 제목
'My Plugin', // 메뉴 제목
'manage_options', // 관리자만 접근
'my-plugin', // 슬러그
'my_plugin_dashboard_page', // 콜백
'dashicons-admin-generic', // Dashicons 아이콘
30 // 위치 (댓글 아래)
);
// 서브메뉴들
add_submenu_page(
'my-plugin', // 부모 메뉴 슬러그
'대시보드', // 페이지 제목
'대시보드', // 메뉴 제목
'manage_options', // 권한
'my-plugin', // 부모와 같은 슬러그 = 첫 번째 서브메뉴
'my_plugin_dashboard_page' // 콜백
);
add_submenu_page(
'my-plugin',
'설정',
'설정',
'manage_options',
'my-plugin-settings',
'my_plugin_settings_page'
);
add_submenu_page(
'my-plugin',
'로그',
'로그',
'manage_options',
'my-plugin-logs',
'my_plugin_logs_page'
);
});
// 콜백 함수들
function my_plugin_dashboard_page() {
echo '<div class="wrap">';
echo '<h1>' . esc_html(get_admin_page_title()) . '</h1>';
echo '<p>플러그인 대시보드입니다.</p>';
echo '</div>';
}
Dashicons 아이콘 사용법
WordPress에 내장된 Dashicons 아이콘을 사용하면 별도의 이미지 파일이 필요 없습니다.
자주 사용하는 아이콘:
SVG 아이콘을 사용하려면:
자주 사용하는 아이콘:
dashicons-admin-generic - 톱니바퀴dashicons-chart-bar - 차트dashicons-cart - 장바구니dashicons-email - 이메일dashicons-admin-tools - 도구dashicons-database - 데이터베이스SVG 아이콘을 사용하려면:
'data:image/svg+xml;base64,' . base64_encode($svg)
| 위치 번호 | 기본 메뉴 | 설명 |
|---|---|---|
| 2 | 대시보드 | 관리자 홈 |
| 4 | 구분선 | - |
| 5 | 글 | 포스트 관리 |
| 10 | 미디어 | 미디어 라이브러리 |
| 20 | 페이지 | 페이지 관리 |
| 25 | 댓글 | 댓글 관리 |
| 59 | 구분선 | - |
| 60 | 외모 | 테마 관리 |
| 65 | 플러그인 | 플러그인 관리 |
| 70 | 사용자 | 사용자 관리 |
| 75 | 도구 | 가져오기/내보내기 |
| 80 | 설정 | 사이트 설정 |
🔒
여기까지는 미리보기입니다
관리자 메뉴와 설정 페이지
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.
Google로 3초 만에 시작 →🧵 Threads로 시작무료 공개 강의 둘러보기 (Lv.1~3)무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.