아이콘 설정 : Dashicons, 이미지 URL, SVG 데이터 URI
add_menu_page() 함수의 여섯 번째 파라미터 $icon_url에 어떤 값을 전달하느냐에 따라 아이콘이 표시되는 방식이 달라집니다.
방법 1: Dashicons 사용 (가장 권장)
워드프레스에 내장된 공식 아이콘 폰트 라이브러리를 사용하는 가장 표준적이고 효율적인 방법입니다.
장점:
- 성능: 이미 관리자 페이지에 로드되어 있으므로 추가적인 HTTP 요청이 발생하지 않아 매우 빠릅니다.
- 일관성: 워드프레스의 기본 UI와 완벽한 디자인 통일성을 제공합니다.
- 편의성: 클래스 이름만 알면 바로 사용할 수 있어 매우 간편합니다.
- 스타일링: CSS로 색상 등을 쉽게 변경할 수 있습니다. (예: 활성화 시 색상 변경)
단점:
- 제공되는 아이콘 외에 다른 디자인을 사용할 수 없습니다.
사용 방법
1단계: 아이콘 클래스 이름 찾기
- **워드프레스 Dashicons 공식 페이지**에 접속합니다.
- 사용하고 싶은 아이콘을 클릭합니다. (예: 책 모양 아이콘)
- 화면 우측 상단에 표시되는 CSS 클래스 이름을 복사합니다. (예:
dashicons-book-alt)
2단계: 코드에 적용하기
복사한 클래스 이름을 add_menu_page() 함수의 $icon_url 파라미터에 문자열로 전달합니다.
// functions.php
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
add_menu_page(
'나의 플러그인',
'나의 플러그인',
'manage_options',
'my-plugin-slug',
'my_plugin_page_content_callback',
'dashicons-book-alt' // <-- 여기에 복사한 클래스 이름을 넣습니다.
);
}
function my_plugin_page_content_callback() {
echo '<div class="wrap"><h1>나의 플러그인 페이지</h1></div>';
}
이것으로 끝입니다. 워드프레스는 dashicons- 접두사를 보고 이것이 Dashicon임을 자동으로 인식하여 해당 아이콘을 렌더링합니다.
방법 2: 이미지 URL 사용 (PNG, GIF, JPG 등)
테마나 플러그인 폴더에 저장된 이미지 파일을 아이콘으로 사용하는 방법입니다.
장점:
- 자유로운 디자인: 원하는 어떤 이미지든 아이콘으로 사용할 수 있어 브랜딩에 유리합니다.
단점:
- 성능 저하: 아이콘마다 별도의 HTTP 요청이 발생하여 페이지 로딩 속도에 미세한 영향을 줄 수 있습니다.
- 품질 문제: 비트맵 이미지(PNG, JPG)는 확대 시 깨져 보일 수 있습니다.
- 관리 포인트 증가: 이미지 파일을 직접 관리해야 합니다.
사용 방법
1단계: 이미지 파일 준비
- 크기: 20×20 픽셀을 권장합니다.
- 형식: 배경이 투명한 PNG 파일을 권장합니다.
- 위치: 테마의 경우
assets/images/폴더, 플러그인의 경우assets/또는images/폴더에 저장합니다.- 예시 경로:
/wp-content/themes/my-theme/assets/images/custom-icon.png
- 예시 경로:
2단계: 코드에 적용하기
워드프레스의 경로 관련 함수를 사용하여 이미지의 전체 URL을 동적으로 생성하고, 그 URL을 $icon_url 파라미터에 전달합니다.
// functions.php (테마의 경우)
add_action( 'admin_menu', 'my_theme_admin_menu' );
function my_theme_admin_menu() {
// get_template_directory_uri() 함수로 현재 테마 폴더의 URL을 가져옵니다.
$icon_url = get_template_directory_uri() . '/assets/images/custom-icon.png';
add_menu_page(
'나의 테마 옵션',
'테마 옵션',
'manage_options',
'my-theme-options-slug',
'my_theme_options_page_callback',
$icon_url // <-- 여기에 생성된 이미지 URL을 넣습니다.
);
}
function my_theme_options_page_callback() {
echo '<div class="wrap"><h1>테마 옵션 페이지</h1></div>';
}
- 플러그인의 경우:
get_template_directory_uri()대신plugins_url( 'assets/images/custom-icon.png', __FILE__ )함수를 사용합니다.
방법 3: SVG 데이터 URI 사용 (Base64 인코딩)
SVG(Scalable Vector Graphics) 이미지를 텍스트(데이터 URI) 형태로 변환하여 코드에 직접 포함시키는 가장 진보된 방법입니다.
장점:
- 최고의 품질: 벡터 기반이므로 어떤 크기로 확대해도 절대 깨지지 않습니다.
- 성능 최적화: 별도의 파일 요청이 없어 HTTP 요청을 줄일 수 있습니다.
- 관리 용이성: 이미지 파일 없이 PHP 코드만으로 아이콘을 관리할 수 있습니다.
단점:
- 코드가 길어지고 복잡해 보일 수 있습니다.
- 인코딩 과정에 대한 이해가 필요합니다.
사용 방법
1단계: SVG 파일 준비 및 Base64 인코딩
- 아이콘으로 사용할 SVG 파일을 준비합니다. (예:
my-icon.svg) - 이 SVG 파일을 Base64로 인코딩해야 합니다.
- 온라인 도구: ‘SVG to Base64’로 검색하여 나오는 웹사이트를 사용하면 편리합니다.
- PHP 코드:
base64_encode( file_get_contents( $path_to_svg ) )코드로 동적으로 인코딩할 수도 있습니다.
2단계: 코드에 적용하기
'data:image/svg+xml;base64,' 라는 정해진 접두사 뒤에, 1단계에서 얻은 Base64 인코딩 문자열을 붙여서 $icon_url 파라미터에 전달합니다.
// functions.php
add_action( 'admin_menu', 'my_svg_icon_menu' );
function my_svg_icon_menu() {
// Base64로 인코딩된 SVG 데이터 (매우 긴 문자열이 될 수 있음)
// 예시: <svg>...</svg>를 인코딩한 결과
$svg_base64 = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTAgMmMtNC40MiAwLTggMy41OC04IDhzMy41OCA4IDggOCA4LTMuNTggOC04LTMuNTgtOC04LTh6bTAgMTQuNWMtMy41OSAwLTYuNS0yLjkxLTYuNS02LjVTNi40MSAzLjUgMTAgMy41IDYuNSAyLjkgNi41IDYuNSA5LjA5IDE2LjUgMTIgMTYuNXoiLz48L3N2Zz4=';
// 데이터 URI 형식으로 최종 URL을 만듭니다.
$icon_url = 'data:image/svg+xml;base64,' . $svg_base64;
add_menu_page(
'SVG 아이콘 메뉴',
'SVG 아이콘',
'manage_options',
'my-svg-icon-menu-slug',
'my_svg_icon_menu_callback',
$icon_url // <-- 여기에 생성된 데이터 URI를 넣습니다.
);
}
function my_svg_icon_menu_callback() {
echo '<div class="wrap"><h1>SVG 아이콘 메뉴 페이지</h1></div>';
}