WordPress에서 야간 모드를 활성화하는 방법

한동안 운영 체제와 응용 프로그램에는 야간에 빛의 방출을 줄여 눈의 손상을 줄이기 위해 흰색 배경을 검은색 배경으로 바꾸는 그래픽 인터페이스 버전이 포함되어 있습니다. 이것은 야간 모드 로 알려져 있습니다.

패션으로든 실제로 작동하기 때문에 야간 모드가 점점 인기를 얻고 있습니다. 검은 화면이 흰색 화면보다 에너지를 덜 사용하기 때문에 야간 모드가 환경에 도움이 된다고 주장하는 사람들이 있습니다. 그러나 이러한 종류의 어두운 모드를 비방하는 사람들도 있습니다.

이것이 가능한 한 귀하의 웹 사이트에도 관심이 있는 기능일 수 있으며, 오늘 이를 위해 WordPress의 야간 모드에 대해 이야기할 것입니다.

WordPress에는 아직 기본적으로 야간 모드가 포함되어 있지 않지만 WordPress 대시보드와 프런트엔드 모두에 야간 모드를 추가하는 옵션이 있습니다. 평소와 같이 플러그인은 이 흥미로운 시각적 기능으로 WordPress를 확장하는 솔루션입니다.

WordPress 대시보드에서 야간 모드를 활성화하는 방법

WordPress 대시보드에서 야간 모드를 활성화할 수 있는 WordPress용 다크 모드 플러그인으로 시작합니다. 사용하기 쉽고 무료입니다.

첫 번째는 플러그인을 설치하고 활성화하는 것입니다. 위의 스크린샷에서 볼 수 있듯이 플러그인 메뉴를 통해 WordPress 대시보드 내에서 직접 WordPress 플러그인 디렉토리에서 찾을 수 있습니다.

다크 모드 플러그인이 설치되면 WordPress의 각 사용자는 대시보드에서 활성화할 수 있는 옵션이 프로필에 표시됩니다.

이 플러그인의 좋은 점은 다크 모드 또는 일반 모드에서 WordPress 대시보드를 보고 싶은 방식을 선택하는 것은 각 사용자라는 것입니다. 이런 식으로 흰색 배경으로 워드프레스 대시보드를 언제나처럼 계속 사용하고 싶은 사람이 있다면 그렇게 하는 데 문제가 없습니다.

이전 스크린샷에서 다크 모드를 활성화한 결과를 볼 수 있습니다. 그리고 그것은 멋져 보인다! 사이드 메뉴 뿐만 아니라 페이지 중앙에도 검정색 배경을 적용한 결과물이 정말 마음에 들었습니다.

불행히도 WordPress 다크 모드 플러그인에는 구텐베르크 블록 편집기와의 호환성을 제공하기 위해 보류 중인 문제가 있습니다. 다음 스크린샷에서 아직 구텐베르크에 어두운 배경을 적용할 수 없음을 알 수 있습니다.

플러그인이 충분히 성공하고 사용자가 요청하면 개발자는 결국 블록 편집기가 야간 모드에서도 나타나도록 조정하게 될 것입니다. 어쨌든 Gutenberg의 광란의 발전 속도와 스타일의 "자주" 업데이트는 적응을 다소 복잡하게 만듭니다.

WordPress 방문자를 위해 야간 모드를 활성화하는 방법

다크 모드 플러그인은 WordPress 대시보드에 야간 모드만 추가합니다. 웹사이트의 나머지 부분, 즉 방문자가 보는 프런트엔드는 변경 없이 계속 동일하게 보입니다.

방문자가 웹사이트에서 밝은 배경 대신 어두운 배경을 사용하여 야간 모드를 활성화할 수 있는 옵션을 갖게 하려면 WP 야간 모드 플러그인을 설치해야 합니다.

다크 모드와 같은 이 플러그인은 완전 무료이며 WordPress 플러그인 디렉토리에서도 사용할 수 있습니다.

일단 설치되면 설정 이나 추가 메뉴에 아무 것도 표시되지 않습니다. 당신이해야 할 일은 모양 메뉴로 이동하여 메뉴를 편집하는 것입니다. 기본 메뉴에서 특정 URL 없이 사용자 정의 링크를 추가해야 합니다. 이 새로운 메뉴 항목은 야간 모드를 활성화 및 비활성화하는 스위치를 추가하는 데 도움이 됩니다.

메뉴 관리 인터페이스 자체에서 다음 스크린샷과 같이 CSS 클래스를 추가하는 옵션을 활성화하려면 오른쪽 상단 모서리에 있는 화면 옵션을 열어야 합니다.

이 작업을 완료하면 추가한 메뉴 항목을 편집할 때 CSS 클래스를 추가할 수 있는 추가 필드가 표시됩니다. 여기에 CSS 클래스 wp-night-mode 를 포함해야 합니다. 이 클래스는 WP 야간 모드에서 야간 모드 스위치로 사용해야 하는 항목을 식별하는 데 필요한 클래스입니다.

기본적으로 WP 야간 모드는 인터페이스에 어두운 색상을 추가하지 않는 플러그인입니다. 배경, 텍스트 및 링크 모두에 표시하려는 어두운 색상을 선택하는 사람이어야 합니다. 이러한 색상을 정의하려면 모양 메뉴로 이동하여 사용자 정의 메뉴를 열어야 합니다.

WordPress 사용자 정의 프로그램이 열리고 거기에서 야간 모드 옵션을 찾을 수 있습니다. 선택하면 기본적으로 야간 모드를 활성화하고 여러 스타일을 생성할 수 있는 옵션이 표시됩니다. 각 스타일에서 배경색, 텍스트 색상 및 링크 색상을 정의합니다.

커스터마이저의 좋은 점은 선택한 색상으로 웹사이트가 어떻게 보일지 실제 미리 볼 수 있다는 것입니다.

불행히도 결과는 완벽하지 않습니다. 일부 요소에는 여전히 야간 모드에서 이상하게 보이는 밝은 배경이 있습니다. 하지만 걱정하지 마세요. 이 문제를 해결할 수 있습니다. 커스터마이저 자체에서 CSS 규칙을 추가하여 이러한 작은 문제를 해결할 수 있습니다.

사용자 정의 도구로 돌아가면 추가 CSS 옵션이 표시됩니다. 선택하면 바로 거기에 CSS 규칙을 작성할 수 있습니다. 이러한 규칙은 다음 유형일 수 있습니다.

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

플러그인이 실제로 하는 일은 웹사이트의 body 태그에 CSS 클래스 wp-night-mode-on 을 적용하는 것입니다. 따라서 HTML 요소의 배경을 수정하고 어둡게 만들고 싶다면 해당 요소에 대한 선택기를 찾아 body 태그에 wp-night-mode-on 클래스가 있을 때 수정 사항을 적용하기만 하면 됩니다.

다음 비교에서 우리가 적용한 색상을 사용하여 일반 모드와 야간 모드 간의 기본 비교를 볼 수 있습니다.

몇 가지 플러그인 덕분에 WordPress에 야간 모드를 추가하는 것은 매우 쉽습니다. 오늘 우리는 WordPress 대시보드와 프런트엔드에서 야간 모드를 활성화하는 데 도움이 되는 플러그인을 검토했습니다.

애플리케이션에서 야간 모드를 정기적으로 사용하십니까? 귀하의 의견과 함께 아래에 의견을 작성하는 것을 잊지 마십시오!

Unsplash에서 Priscilla Du Preez의 추천 이미지.