데브포일 홈
WordPress 자동화
Guest
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 아이콘을 사용하면 별도의 이미지 파일이 필요 없습니다.

자주 사용하는 아이콘:
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)