WordPress 웹 사이트에 다크 모드를 추가하는 방법

다크 모드는 웹사이트와 앱 모두에서 요즘 정말 보편화되고 있습니다. 다크 모드와 일반 모드 사이를 전환할 수 있는 휴대성은 사용자가 선호하는 대로 웹사이트를 읽거나 볼 수 있는 자유를 줍니다.

다크 모드는 특히 밤에 웹 사이트를 읽을 때 매우 유용합니다. 이렇게 하면 눈에 방출되는 빛이 줄어들어 눈의 피로가 줄어듭니다.

또한 다크 모드는 종종 유해한 청색광 노출을 줄이고 웹 사이트를 읽는 데 사용하는 장치의 배터리 수명을 늘립니다.

WordPress 웹 사이트에 다크 모드를 추가하시겠습니까? 그렇다면 오늘 올바른 위치에 왔습니다. 프론트엔드와 관리 영역의 WordPress 웹사이트에서 WordPress 다크 모드를 선택하는 방법에 대한 완전한 가이드를 제공할 것이기 때문입니다.

다크 모드란?

모바일, PC 또는 랩톱에서 다크 모드를 찾을 수 있으며 다크 모드는 화면에서 방출되는 백색광의 양을 줄입니다. 일부 가제트에는 차가운 색조 대신 따뜻한 색조를 사용하는 야간 모드가 포함되어 있습니다. 다크 모드는 배경을 어두운 색조로 채우는 다른 접근 방식을 취합니다.

WordPress 웹 사이트에 다크 모드를 추가하는 이유는 무엇입니까?

다크 모드는 눈에 상당히 자극적이고 해로울 수 있는 직사광선을 줄여 사용자가 밤에 웹사이트를 볼 때 더 나은 경험을 제공합니다. 또한 WordPress 사이트에 다크 모드 플러그인을 추가하면 다크 모드를 켜고 끌 수 있습니다. 또한 사이트가 다크 모드에서 어떻게 보이는지에 대해 더 많은 권한을 갖게 됩니다. 다크 모드는 WordPress 웹 사이트의 야간 모드처럼 작동합니다.

다크 모드 WordPress 플러그인을 사용하면 반드시 프론트엔드에서만 이것을 사용할 수 없으며 대신 WordPress 관리자에 대해 다크 모드를 사용할 수도 있습니다.

WordPress 웹 사이트에 다크 모드를 추가하는 방법

아래에서 WordPress 웹사이트에 다크 모드를 추가하는 방법을 알려드립니다. 이것은 매우 쉽고 전체 절차를 완료하는 데 몇 분이면 되므로 주의 깊게 단계를 따르십시오.

1단계: 플러그인 설치

첫 번째이자 가장 중요한 단계는 DroitThemes의 Droit Dark Mode를 다운로드하여 설치하는 것입니다. 이것은 시장에서 사용할 수 있는 최고의 WordPress 다크 모드 플러그인 중 하나이며 실제로 비용을 지불하기 전에 무료 버전에 액세스하여 기능을 확인할 수 있습니다.

워드프레스 플러그인을 설치하는 방법은 3가지가 있습니다.

방법 1: 먼저 플러그인을 다운로드하고 압축을 풀어야 합니다. 그런 다음 'droit-dark-mode.zip' 파일의 압축을 풀고 ' /wp-content/plugins/ ' 디렉터리에 넣습니다. 마지막 단계에서 플러그인 » 관리 로 이동하여 플러그인 을 활성화해야 합니다.

방법 2: 따를 수 있는 또 다른 단계는 이 다크 모드 플러그인을 설치하는 것 입니다. 대시보드 » 플러그인 » 새로 추가 » 'Droit Dark Mode' 검색 » 설치 » 활성 .

방법 3: 또 다른 단계가 있습니다. 먼저 'droit-dark-mode.zip'을 다운로드한 다음 대시보드 > 플러그인 > 새로 추가 > zip 파일 업로드 » 활성 단계를 따르십시오 .

2단계: 다크 모드 확인

활성화 후 WordPress 관리자의 설정 » Droit 다크 모드 페이지로 이동하여 일반 설정 탭을 선택합니다. 즉시 그곳으로 이동해야 합니다. 방문자의 장치가 다크 모드로 설정되면 방문자는 사이트의 다크 모드 버전을 즉시 볼 수 있습니다.

또한 선택에 따라 켜거나 끌 수 있는 "스타일 전환" 옵션이 있습니다. 기본적으로 켜져 있습니다. 이 스위치는 웹사이트 어디에서나 표시할 수 있으며 사용자는 이 스위치를 사용하여 다크 모드와 일반 모드 중에서 선택할 수 있습니다.

이 스위치는 기본적으로 웹사이트의 오른쪽 하단에서 찾을 수 있습니다. 일반 뷰어로 웹사이트를 방문하면 스위치를 클릭하여 다크 모드에서 웹사이트를 쉽게 변경할 수 있습니다.

3단계: 고급 설정

음, The Droit Dark Mode는 무료 플러그인과 유료 버전으로 제공됩니다. 무료 버전은 사용자 정의 옵션을 너무 많이 허용하지 않는 반면 유료 버전을 사용하면 이 다크 모드 플러그인을 원하는 방식으로 사용자 정의할 수 있습니다.

설정 » Droit Dark Mode » 고급 설정 페이지에서 사용자 지정 옵션을 찾을 수 있으며 추가 사용자 지정 선택 사항이 있습니다. 어둡거나 밝은 모드를 사용할지 결정하면 기본적으로 저장됩니다.

스위치 스타일 변경

예를 들어 다크 모드 스위처의 스타일을 수정하려면 디스플레이 설정 탭을 클릭하기만 하면 됩니다. 웹사이트에서 선택하고 사용할 수 있는 여러 스위치 스타일이 있습니다. Elementor 위젯을 사용하여 게시물이나 페이지의 콘텐츠에 전환 버튼을 추가할 수도 있습니다.

구텐베르크 블록은 게시물이나 페이지의 콘텐츠에 전환 버튼을 추가하는 데 사용할 수 있습니다.

스위치를 다른 위치로 설정할 수 있는 옵션이 있다면 얼마나 좋을까요? 이제 Droit 다크 모드 플러그인 덕분에 가능합니다. 왼쪽 상단, 왼쪽 하단, 오른쪽 상단에서 시작하여 웹사이트의 다양한 위치에 스위치를 배치할 수 있기 때문입니다. 오른쪽 하단, 중앙 하단, 중앙 상단 등.

무료 버전에서; 선택할 수 있는 2개의 다크 모드 스위처 옵션이 있습니다.

사용자는 요소 또는 위젯 또는 Gutenberg 블록을 사용하여 스위치 위치를 변경하고 모든 콘텐츠, 게시물 또는 페이지에 배치할 수 있습니다. 스위치를 클릭하고 마우스를 당겨 정확한 위치를 찾기만 하면 스위치를 다른 위치로 이동할 수 있습니다.

다크 모드의 색상 변경하기

색상 팔레트에서 어두운 모드 색상을 빠르게 변경하기 위해 10개 이상의 고유한 색상 사전 설정 중에서 선택할 수 있는 다중 색상 사전 설정이 있습니다. Droit Dark Mode 설정으로 이동한 다음 스타일 설정으로 스크롤하면 원하는 대로 사용자 지정할 수 있는 색상 옵션 설정을 찾을 수 있습니다.

또한 시장에 나와 있는 모든 주요 테마는 Droit Dark Mode 플러그인과 호환되므로 사용할 수 있습니다.

무료 버전에서는 2가지 색상 중에서 선택할 수 있습니다.

WordPress 관리자에게 다크 모드를 추가하는 방법

지금까지 워드프레스 웹사이트에 Droit Dark Mode 플러그인을 추가하는 방법을 보여 드렸습니다. 이제 관리자에서 추가하는 방법을 보여드리겠습니다.

WordPress가 다양한 관리 색 구성표를 제공하지만 슬프게도 그 중 어느 것도 어두운 모드를 사용하지 않고 빛을 줄일 수 있다는 것을 이미 알고 계실 것입니다. 따라서 가장 간단하고 효과적인 솔루션은 Droit Dark Mode 플러그인을 사용하는 것입니다.

1단계: 추가 방법

설정 » 다크 모드 페이지에서 일반 설정 탭으로 이동하기만 하면 됩니다. 그런 다음 '백엔드 다크 모드 사용' 설정을 켭니다. 페이지 하단의 설정 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오. 이제 관리자 표시줄 상단에 밝은 모드와 어두운 모드 사이를 쉽게 전환할 수 있는 스위치가 있어야 합니다.

2단계: 더 많은 사용자 지정 옵션 및 기능

관리 영역의 이 다크 모드 플러그인에서 찾을 수 있는 몇 가지 기능을 살펴보겠습니다.

색상 선택

브라우저에 따라 관리자 대시보드에 대한 색상 사전 설정을 선택합니다. 어둡고 밝은 관리자 대시보드에 대한 색상 사전 설정을 설정할 수 있습니다. 즉, WordPress 웹 사이트에서 작업하는 동안 선택에 따라 색상을 선택할 수 있는 전체 액세스 권한이 있습니다.

다크 모드는 관리자 색 구성표가 아니기 때문에 WordPress에 이미 존재하는 색 구성표와 쉽게 결합할 수 있습니다. 이렇게 하려면 사용자 » 프로필로 이동하고 드롭다운 메뉴의 관리 색 구성표에서 옵션을 선택합니다. 관리자 색 구성표 옵션에 액세스하려면 어두운 모드를 꺼야 합니다.

다른 페이지 및 게시물에 대해 야간 모드 설정하기

다크 모드를 활성화/비활성화하고 선택에 따라 개별 게시물에서 다른 색상 팔레트를 선택할 수 있는 옵션이 있습니다. 또한 각 카테고리에 대해 다크 모드를 활성화/비활성화하고 별도의 색상 팔레트를 지정할 수 있습니다.

이러한 사용자 정의 옵션은 귀하의 웹사이트가 다른 경쟁업체와 차별화되기를 원할 때 특히 효과적입니다.

다양한 제품 강조하기

다른 특정 제품에서 다크 모드 또는 야간 모드를 활성화 또는 비활성화하거나 다른 색상을 설정한다고 가정해 보겠습니다. 이 WordPress 다크 플러그인을 사용하면 그렇게 할 수도 있습니다.

특정 콘텐츠를 강조 표시한다고 가정해 보겠습니다. 모든 페이지/게시물 유형에 대해 콘텐츠 앞/뒤에 다크 모드 전환 버튼을 배치할 수 있기 때문에 이 WordPress 플러그인으로도 쉽습니다.

사용자 정의 색상 및 텍스트 전환

모든 단락, 링크, 제목 버튼 및 기타 UI 요소에 대해 사용자 정의 색상을 선택하고 설정할 수도 있습니다. 너무 많은 사용자 지정 옵션으로 인해 다른 옵션을 보는 데 지칠 것입니다.

또한 어둡거나 밝은 곳에서 다크 모드 스위치의 텍스트를 편집할 수 있습니다.

이미지 사용자 정의

이미지는 모든 웹사이트에서 시청자의 관심을 끄는 첫 번째 요소입니다. Droit Dark Mode pro 버전을 사용하면 이미지의 밝기, 불투명도 및 대비를 쉽게 편집할 수 있습니다.

콘텐츠를 완벽하게 일치시키기 위해 필요에 따라 밝기, 불투명도 및 대비를 높이거나 낮춥니다.

작은 팁: WordPress 블록 편집기에서 게시물을 작성할 때 다크 모드를 사용할 수도 있습니다. 왼쪽 상단의 작은 색상 기호를 클릭하여 사용하려는 모드를 선택합니다. 눈에 부담을 덜 주는 간편한 작업 환경을 위해 더 이상 무엇이 필요합니까?

결론

WordPress 웹 사이트에 다크 모드를 추가하는 방법을 알고 싶었기 때문에 여기에 있는 것 같습니다. 오늘 우리는 그렇게 했습니다. 지금까지 이 기사에서는 WordPress 웹사이트에 다크 모드를 추가하는 데 필요한 모든 것에 대해 논의했습니다.

WordPress 사이트에 직접 다크 모드를 추가하는 것은 불가능하며 이를 위해서는 추가 플러그인이 필요하며 Droit Dark Mode 플러그인은 웹사이트와 관리자 패널에 다크 모드를 제공하는 데 정말 잘 작동합니다. 이 플러그인이 제공하는 사용자 정의는 엄청나며 불평 없이 즐겁게 사용할 수 있습니다.