웹사이트 디자인 에서 사용자 경험을 개선하는 방법은 여러 가지가 있는데 , 그중 하나가 워드프레스 관리자 아이콘을 추가하거나 변경하는 것입니다. 워드프레스 대시보드를 것은 단순히 외관을 꾸미는 것뿐만 아니라 사이트를 더 쉽고 즐겁게 사용할 수 있도록 만드는 것입니다! 관리자 아이콘을 추가하거나 변경하는 것부터 시작해 보세요.
맞춤 아이콘을 사용하면 워크플로우를 간소화하고 특히 신규 사용자가 쉽게 탐색할 수 있습니다. 또한 개인화된 대시보드는 더욱 친근하고 즐겁게 작업할 수 있도록 해줍니다!
오늘은 워드프레스 관리자 아이콘이 무엇인지 알아보고, 플러그인을 이용해 아이콘을 쉽게 추가하는 방법과 워드프레스 아이콘 폰트 사용법을 살펴보겠습니다. 사이트 사용자 경험을 향상시킬 준비가 되셨나요? 그럼 시작해 볼까요!
워드프레스 관리자 아이콘 이해하기
워드프레스 관리자 아이콘은 워드프레스 대시보드의 각 메뉴 항목 옆에 보이는 작은 이미지입니다. 이 아이콘들은 탐색 패널을 더욱 직관적이고 시각적으로 깔끔하게 만들어 줍니다. 워드프레스는 기본적으로 아이콘 폰트 Dashicons를 , 이 폰트는 그 이후로 크게 변경되지 않았습니다.
워드프레스 관리자 화면을 새롭게 단장하고 싶다면 아이콘 변경부터 시작해 보세요! 기본 아이콘을 스타일에 맞는 아이콘으로 바꾸거나, 나만의 맞춤 아이콘을 추가하여 개성 넘치는 디자인을 완성할 수 있습니다.
아이콘은 누구나 알아볼 수 있고, 로그인 페이지, 특정 게시글, 사이트의 주요 섹션 등 필요한 정보를 쉽게 찾을 수 있도록 해주기 때문에 강력한 도구입니다. 특히 다국어 사이트를 하거나 국제적인 사용자층을 대상으로 할 때 매우 유용합니다.
웹 디자인 고객의 경우 , 맞춤 아이콘을 사용하면 관리자 대시보드 탐색이 간소화되고 맞춤형 경험을 제공할 수 있습니다.
Elementor 아이콘이 표시되지 않는 문제를 해결하는 방법을 알아보세요
WordPress 관리자 아이콘은 웹사이트 디자인에 필수적인 요소입니다
웹 디자이너에게 문의하여 워드프레스 관리자 아이콘을 간편하게 추가 또는 변경하고 웹사이트 사용자 경험을 향상시키세요.
워드프레스 관리자 아이콘 추가 또는 변경 방법: 두 가지
이제 워드프레스 관리자 아이콘의 기능을 알았으니, 워드프레스에서 관리자 아이콘을 추가하거나 변경하는 방법을 알아보겠습니다. 워드프레스 관리자 아이콘을 수정하는 방법은 크게 두 가지입니다. 첫 번째는 플러그인을 사용하는 것이고, 두 번째는 코드 조각을 이용해 아이콘을 변경하는 것입니다.
두 가지 방법을 모두 살펴보고 어떤 방법이 여러분에게 가장 적합한지 결정하는 데 도움을 드리겠습니다. 그럼 시작해 볼까요?
플러그인을 사용하여 워드프레스 관리자 아이콘을 추가하거나 변경하는 방법
Font Awesome 사용하여 아이콘을 추가하는 방법을 보여드리겠습니다 .
Font Awesome을 사용하여 WordPress 사이트에 아이콘을 추가하려면 다음의 간단한 단계를 따르세요
플러그인을 설치하고 활성화하세요.
먼저 워드프레스 대시보드에 로그인한 다음, 플러그인 메뉴 Font Awesome 플러그인을 설치하고 활성화하세요.
필요에 따라 플러그인 설정을 조정하십시오.
설치된 플러그인 로 이동합니다 . Font Awesome을 찾아 설정을 클릭하세요. 이 플러그인은 기본적으로 Font Awesome CDN을 , 이 설정에 만족하신다면 문제없이 사용하실 수 있습니다.
워드프레스 관리자 계정에서 보이지 않는 사용자를 삭제하는 방법을 알아보세요
무료 아이콘과 유료 아이콘을 모두 사용하려면 Font Awesome 키트를 생성하고 API 토큰을 발급받아 플러그인 설정에 추가해야 합니다. (하지만 기본적인 아이콘만 필요한 경우에는 이 단계를 건너뛰셔도 됩니다!) 설정이 완료되면 ' 변경 사항 저장'을 클릭하는 것을 잊지 마세요.
원하는 위치에 아이콘을 추가하세요.
이제 재밌는 부분입니다! Font Awesome 아이콘은 숏코드나 HTML 스니펫을 사용하여 추가할 수 있습니다. 숏코드 형식은 [icon name= “value”]입니다. “value” 부분에 원하는 아이콘 이름을 입력하기만 하면 됩니다. 예를 들어, 상장 아이콘을 추가하려면 [icon name= “award”]를 사용하면 됩니다.
HTML에 더 익숙하시다면 Font Awesome의 표준 구문을 사용하셔도 됩니다. Font Awesome은 각 아이콘에 대한 HTML 코드 조각을 제공하므로, 아이콘을 표시하고 싶은 위치에 복사하여 붙여넣기만 하면 됩니다.
변경 사항을 미리 보세요.
게시하기 전에 미리보기를 통해 아이콘이 제대로 표시되는지 확인하세요. 아이콘이 나타나지 않으면 무료 아이콘이 아닌 유료 아이콘을 사용하고 있는지 다시 한번 확인하십시오.
다음 내용도 알아두세요: 워드프레스에서 헤더를 간편하게 편집하고 맞춤 설정하는 방법은 무엇인가요?
방법 2: 코드 조각을 사용하여 관리자 메뉴 아이콘을 수동으로 추가 또는 변경하는 방법
직접 코드를 작성하는 데 거리낌이 없다면, 관리자 아이콘을 사용자 지정하려면 약간의 코드를 추가하면 됩니다.
시작하기 전에, 이전에 워드프레스에 사용자 정의 코드를 추가해 본 경험이 없다면 안전하게 추가하는 방법에 대한 간단한 가이드를 확인해 보시는 것을 권장합니다.
가장 쉽고 안전한 방법은 WPCode CSS 추가하는 데 매우 유용합니다 . 또한 무료 버전(WPCode Lite)으로도 충분히 사용할 수 있으며, 프로 버전에는 몇 가지 유용한 추가 기능이 포함되어 있습니다.
예시: 기본 Dashicons를 사용하여 아이콘 바꾸기
이 예시에서는 기존 아이콘을 워드프레스에 내장된 아이콘 세트인 Dashicons로 교체해 보겠습니다. Dashicons는 워드프레스에 최적화되어 있으므로 사이트 속도를 저하시키지 않습니다.
시작하기 전에 필요한 준비물은 다음과 같습니다
- 업데이트하려는 메뉴 항목의 URL입니다
- 사용하고자 하는 아이콘의 이름
예를 들어 '게시물' 메뉴의 아이콘을 변경하고 싶다고 가정해 보겠습니다. 대시보드에서 '게시물' 메뉴 항목에 마우스를 올리면 브라우저 하단의 상태 표시줄에 URL이 표시됩니다. 여기서 필요한 것은 마지막 부분, 즉 edit.php입니다.
다음으로, Dashicons 웹사이트로 이동하여 원하는 아이콘을 찾고 해당 아이콘의 "슬러그"(예: dash icons-format-aside)를 복사하세요.
이제 코드를 추가해 보겠습니다
- 대시보드에서 코드 스니펫 » 스니펫 추가 로 이동하세요
- [+ 사용자 지정 스니펫 추가] 를 클릭하고 스니펫에 제목을 입력하세요.
- 코드 유형 에서 PHP 코드 조각을 선택한 다음 다음 코드를 편집기에 붙여넣으세요.
function change_post_menu_icon() {global $menu;// 메뉴 항목을 순회합니다. foreach ($menu as $key => $menu_item) {// "게시물" 메뉴 항목을 찾습니다(기본 URL은 'edit.php'). if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {// 아이콘을 다른 Dashicon 클래스로 변경합니다. $menu[$key][6] = 'dashicons-format-aside'; // 원하는 Dashicon 슬러그로 변경하세요.}}}add_action('admin_menu', 'change_post_menu_icon');
dashicons-format-aside 부분을 이전에 복사한 아이콘의 슬러그로 바꾸기만 하면 됩니다.
코드를 입력했으면 아래로 스크롤하여 삽입 위치 설정 하고 스니펫을 활성 . 그런 다음 스니펫 저장을 .
이제 워드프레스는 바로 게시물 페이지에 사용자가 선택한 아이콘을 사용하기 시작합니다!
관련 항목: Elementor에서 템플릿을 쉽게 사용하기 위한 단축 코드 설정 방법
마무리
보시다시피, 워드프레스 관리자 아이콘을 추가하거나 변경하는 것은 어렵지 않습니다. 이러한 아이콘의 핵심 기능과 의미를 이해하면 웹사이트 디자인과 사용자 경험을 개선하고 향상시키는 데 도움이 될 것입니다.
플러그인을 사용하여 아이콘을 빠르게 교체하든, 직접 코드를 추가하여 수정하든, 과정은 간단하며 특히 워드프레스에 익숙하지 않은 클라이언트나 사용자에게 큰 변화를 줄 수 있습니다. 자, 이제 관리자 영역을 조금 바꿔서 나만의 스타일로 꾸며보세요!
