플러그인이 없는 WordPress 다크 모드 – 가능합니까?

게시 됨: 2022-10-18

목차

플러그인이 없는 WordPress 다크 모드 정보

화면 앞에서 많은 시간을 보내면서 눈에 과도한 부담을 주었을 것입니다. 따라서 컴퓨터를 사용하는 동안 진정시키는 것이 중요합니다. 눈을 쉬게 하는 가장 효과적인 방법 중 하나는 화면 표시 설정을 어두운 모드로 변경하는 것입니다.

웹사이트 소유자는 시각적 경험을 향상시키기 위해 웹사이트에 다크 모드를 추가해야 하고 추가할 수 있습니다. 사이트에 WordPress를 사용하는 경우 다크 모드를 쉽게 추가할 수 있습니다. 수동으로 또는 플러그인을 설치하여 둘 다 수행할 수 있습니다.

플러그인이 WordPress 웹사이트의 다크 버전을 만드는 데 가장 적합한 솔루션이라는 데 동의합니다. 그러나 플러그인 없이 WordPress 다크 모드를 활성화하는 것이 불가능하다고 생각하는 사람들을 위한 답변도 있습니다! 네, 가능합니다.

여기에서는 플러그인을 사용하거나 사용하지 않고 다크 모드를 추가하는 방법에 대해 설명합니다. 또한 어느 것이 어디에서 뛰어난지 토론하십시오. 이 기사의 뒷부분에서 QS Dark Mode라는 우리가 가장 좋아하는 플러그인 중 하나를 알게 될 것입니다.

계속 지켜봐 주세요!

WordPress에서 다크 모드 사용의 이점

WordPress에서 다크 모드를 사용해야 하는 이유는 무엇입니까? 그 뒤에는 몇 가지 좋은 이유가 있습니다. 피곤한 눈으로 밤에 PC를 검색하면서 개인적으로 필요성을 깨닫습니다.

웹사이트 소유자는 이 모드를 웹사이트에 추가하여 사용자에게 많은 이점을 제공할 수 있습니다. 또한 비즈니스에 가치를 더해야 합니다.

그 이상의 이점이 있습니다. 아래에서 이들 중 일부를 알아보겠습니다.

  • 컴퓨터 화면에서 나오는 백색광을 크게 최소화
  • 눈의 피로 감소
  • 에너지를 절약하고 배터리 수명을 늘립니다.
  • 사용자 경험을 개선하여 페이지에 머문 시간을 늘립니다.
  • 미학적 아우라를 제공합니다.

네, 이것이 다크 모드가 WordPress 사이트에 훌륭한 옵션인 이유입니다.

플러그인이 없는 WordPress 다크 모드 – 가능합니까?

이제 재미있는 부분이 나옵니다. 플러그인을 설치하지 않고 WordPress 사이트의 조명을 끄는 방법을 살펴보겠습니다.

두 가지 방법이 있습니다.

  1. HTML, CSS 및 JQuery를 사용하여 다크 모드 추가
  2. 다크 모드가 활성화된 기성 테마 사용

아래에서 이 두 가지 방법에 대해 자세히 살펴보겠습니다.

1) HTML, CSS, JQuery를 이용한 다크 모드 추가

테마 개발자라면 WordPress 사이트에 다크 모드 토글을 포함하는 이 수동 방법을 선호해야 합니다. 이 방법에서는 HTML, CSS, JQuery와 관련된 약간의 코딩을 거쳐야 합니다.

여기에서 쉽게 사용할 수 있는 코드 조각을 얻을 수 있으므로 코딩이 어렵다고 걱정하지 마십시오. 따라서 적절한 위치에 복사하여 붙여넣어 어두운 모드를 활성화할 수 있습니다.

이 스니펫은 오픈 소스이며 무료이므로 주저하지 말고 사용하십시오.

  • HTML 코드 조각 추가

먼저 HTML 스니펫을 추가하여 다크 모드 토글 버튼을 만듭니다. 다음 스니펫을 복사하여 테마의 머리글이나 바닥글에 붙여넣기만 하면 됩니다.

<div class="wpnm-button">

<div class="wpnm-button-inner-left"></div>

<div class="wpnm-button-inner"></div>

</div>

  • CSS로 스타일 지정

이제 다음 CSS 스니펫으로 다크 모드 버튼 또는 스위처의 스타일을 지정해야 합니다.

/* 다크 모드 전환기 */

.wpnm-버튼 {

글꼴 크기: 16px

}

.wpnm-button-inner-left:empty {

여백-왼쪽: -0.625em

}

.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {

상자 크기: 테두리 상자;

여백: 0;

패딩: 0;

/*이행*/

-webkit-transition: 0.4초 인-아웃;

-moz-transition: 0.4초 인-아웃;

-o-전환: 0.4초 인-아웃;

전환: 0.4초 이즈 인 아웃;

개요: 없음

}

.wpnm-버튼 .wpnm-버튼 내부, .wpnm-버튼 .wpnm-버튼 내부-왼쪽 {

디스플레이: 인라인 블록;

글꼴 크기: 0.875em;

위치: 상대;

패딩: 0em;

라인 높이: 1em;

커서: 포인터;

색상: rgba(149, 149, 149, 0.51);

글꼴 두께: 보통

}

.wpnm-button .wpnm-button-inner-left:before {

콘텐츠: ";

디스플레이: 블록;

위치: 절대;

z-인덱스: 1;

줄 높이: 2.125em;

텍스트 들여쓰기: 2.5em;

높이: 1em;

너비: 1em;

여백: 0.25em;

/*경계 반경*/

-웹킷 테두리 반경: 100%;

-moz-border-radius: 100%;

경계 반경: 100%;

오른쪽: 1.625em;

하단: 0em;

배경: #FFB200;

변환: 회전(-45deg);

상자 그림자: 0 0 0.625em 흰색

}

.wpnm-button .wpnm-button-inner-left:after {

콘텐츠: "";

디스플레이: 인라인 블록;

너비: 2.5em;

높이: 1.5em;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

경계 반경: 1em;

배경: rgba(255, 255, 255, 0.15);

수직 정렬: 중간;

여백: 0 0.625em;

테두리: 0.125em 솔리드 #FFB200

}

.wpnm-button.active .wpnm-button-inner-left:before {

오른쪽: 1.0625em;

상자 그림자: 0.3125em 0.3125em 0 0 #ee;

배경: 투명

}

.wpnm-button.active .wpnm-button-inner-left:after {

배경: rgba(0, 0, 0, 0.15);

테두리: 0.125em 단색 흰색

}

.wpnm-버튼 .wpnm-버튼-내부 왼쪽 {

색상: rgba(250, 250, 250, 0.51);

글꼴 두께: 굵게

}

.wpnm-버튼.활성 .wpnm-버튼-내부-왼쪽 {

색상: rgba(149, 149, 149, 0.51);

글꼴 두께: 보통

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

색상: rgba(250, 250, 250, 0.51);

글꼴 두께: 굵게

}

이 스니펫은 플러그인에서 가져온 것이며 크레딧은 플러그인 작성자인 Marko Arula에게 있습니다.

  • Body 태그에 다크 모드 CSS 클래스 추가

이제 이 특정 클래스를 body 태그에 추가해야 나중에 레이아웃을 사용자 정의할 수 있습니다.

그걸하자.

제이쿼리(함수($) {

/*다크 모드 아이콘을 클릭합니다. 다크 모드 클래스와 래퍼를 추가합니다.

세션을 통해 사용자 기본 설정 저장*/

$('.wpnm-버튼').click(함수() {

//달이나 태양을 표시

$('.wpnm-버튼').toggleClass('활성');

//다크모드가 선택되면

if ($('.wpnm-button').hasClass('활성')) {

// 바디에 다크 모드 클래스 추가

$('바디').addClass('어두운 모드');

// 사용자 환경 설정을 스토리지에 저장

localStorage.setItem('darkMode', true);

} 또 다른 {

$('바디').removeClass('어두운 모드');

localStorage.removeItem('다크 모드');

}

})

//저장소를 확인합니다. 사용자 기본 설정 표시

if (localStorage.getItem(“darkMode”)) {

$('바디').addClass('어두운 모드');

$('.wpnm-버튼').addClass('활성');

}

})

이제 "다크 모드" CSS 클래스가 본문 클래스로 추가되었는지 검사하고 테스트할 수 있습니다. 다음으로 어두운 배경을 추가하여 제대로 작동하는지 확인합니다.

body.dark 모드 * {

배경: #333;

}

브라우저나 클라이언트 측에서 하고 있고 서버는 아무것도 모르기 때문에 라이트 모드가 로드된 후에 다크 모드가 로드되는 것을 볼 수 있습니다. 여기서 본문은 작동 중인 다크 모드 없이 렌더링되고 JS는 클래스를 추가하기 전에 DOM이 로드될 때까지 기다립니다.

따라서 사용자에게 완벽한 솔루션은 아닙니다. 경험을 개선할 수 있는 더 나은 방법이 있어야 합니다. 무엇인지 알아보자.

  • 쿠키를 사용하여 세션을 통해 사용자 기본 설정 저장

이제 서버에 본문 클래스를 추가하여 제공하기 전에 로드되도록 하는 방법을 살펴보겠습니다. 가장 좋은 방법은 쿠키를 사용하여 사용자 기본 설정을 저장하는 것입니다. 이런 식으로 사용자의 다크 모드 기본 설정에 대한 쿠키를 만들고 그에 따라 다크 모드 바디 클래스를 추가해야 합니다.

html이 렌더링될 때 다크 모드 바디 클래스를 활성화합니다. 따라서 다음과 같은 방법으로 JS 코드를 다시 작성해야 합니다.

제이쿼리(함수($) {

//쿠키 객체 생성

var 쿠키 저장소 = {

setCookie: 함수 setCookie(키, 값, 시간, 경로) {

var 만료 = new Date();

Expires.setTime(expires.getTime() + 시간);

var 경로 값 = ";

if (경로 유형 !== '정의되지 않음') {

경로값 = '경로=' + 경로 + ';';

}

document.cookie = 키 + '=' + 값 + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie: 함수 getCookie(키) {

var keyValue = document.cookie.match('(^|;) ?' + 키 + '=([^;]*)(;|$)');

반환 키 값? 키 값[2] : 널;

},

제거 쿠키: 기능 제거 쿠키(키) {

document.cookie = 키 + '=; 최대 연령=0; 경로=/';

}

};

//다크 모드 아이콘을 클릭합니다. 다크 모드 클래스와 래퍼를 추가합니다. 세션을 통해 사용자 선호도 저장

$('.wpnm-버튼').click(함수() {

//달이나 태양을 표시

$('.wpnm-버튼').toggleClass('활성');

//다크모드가 선택되면

if ($('.wpnm-button').hasClass('활성')) {

// 바디에 다크 모드 클래스 추가

$('바디').addClass('어두운 모드');

cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');

} 또 다른 {

$('바디').removeClass('어두운 모드');

setTimeout(함수() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//저장소를 확인합니다. 사용자 기본 설정 표시

if (cookieStorage.getCookie('yonkovNightMode')) {

$('바디').addClass('어두운 모드');

$('.wpnm-버튼').addClass('활성');

}

})

  • 바디 클래스 필터를 통해 다크 모드 클래스 추가

그래서 "yonkovNightMode"라는 쿠키를 설정했습니다. 사용자가 다크 모드 옵션을 선택하면 활성화됩니다. 그러나 먼저 PHP로 이 쿠키를 가져와서 본문 클래스에 추가해야 합니다.

하위 테마의 functions.php 파일에 다음 스니펫을 복사하여 붙여넣습니다.

<?php

/**

* 어두운 테마 모드 활성화

* https://wordpress.org/plugins/wp-night-mode/에서 분기됨

*/

기능 yonkov_dark_mode($classes) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;

//쿠키가 저장되어 있다면..

if ($yonkov_night_mode !== ”) {

// '다크 모드' 바디 클래스 추가

return array_merge($classes, array('어두운 모드'));

}

$classes를 반환합니다.

}

add_filter('body_class', 'yonkov_dark_mode');

완료되었습니다.

그래서 실제로 다크 모드 레이아웃의 완전한 기능을 갖춘 프로토타입을 만들었습니다. 스니펫은 오픈 소스 WordPress 플러그인에서 가져왔습니다. 따라서 WordPress 웹 사이트에서 더 나은 사용자 경험을 위해 다크 모드 옵션을 추가하는 데 사용할 수 있습니다.

2. 다크 모드 옵션이 있는 기성 WordPress 테마 사용

이미 다크 모드 토글 버튼이 설치된 기성품 WordPress 테마를 선택하는 것은 어떻습니까? 이렇게 하면 플러그인을 사용하지 않고 WordPress 사이트에서 다크 모드를 사용할 수 있습니다. 또한 대부분의 테마를 야간 모드 플러그인 또는 사용자 정의 CSS 코드로 사용자 정의해야 하므로 사용자 정의를 피하는 데 도움이 됩니다.

그렇다면 라이트 모드와 함께 다크 모드를 지원하는 WordPress 테마는 무엇입니까? 여기에서는 다크 모드 레이아웃으로 인기 있는 WordPress 테마를 가져왔습니다. 알아 보자.

  • Twenty Twenty One: 다크 모드 레이아웃과 함께 제공되는 기본 WordPress 테마입니다. 기본적으로 비활성화되어 있으며 테마 옵션에서 활성화해야 합니다.
  • Estera: WooCommerce 사이트의 인기 있는 WordPress 테마입니다. 다크 모드 토글 버튼이 있어 사용자가 라이트 모드와 다크 모드를 전환할 수 있습니다.
  • HIghStarter: 이 가벼운 WordPress 테마는 포트폴리오 사이트에서 인기가 있습니다. 플러그인이 별도로 설치되지 않은 다크 모드 스위치가 있습니다 . 그리고 이를 통해 사용자는 밝은 모드와 어두운 모드 사이를 전환할 수 있습니다.
  • Mate: 사이트 헤더에서 직접 밝은 모드 또는 어두운 모드를 선택할 수 있는 아름답게 디자인된 WordPress 테마입니다.

수동 또는 플러그인 다크 모드 활성화에 사용할 방법은 무엇입니까?

우리는 이미 WP 웹사이트에서 다크 모드를 수동으로 활성화하는 방법에 대해 논의했습니다. 그리고 우리는 많은 사람들이 특히 코딩 부분에서 다크 모드를 활성화하는 것이 번거롭다는 것을 알게 될 것이라는 것을 알고 있습니다.

따라서 두 번째 옵션으로 사용하는 것이 좋습니다. 수동 또는 플러그인 방법 중에서 선택할 때 사이트에 다크 모드 토글 버튼을 빠르고 편리하게 추가할 수 있는 플러그인 옵션을 선호하기 때문입니다.

완벽한 플러그인에 대해 이야기하면서 가장 좋아하는 플러그인이 있습니다. 바로 QS 다크 모드 플러그인입니다. 그것은 귀하의 사이트에 멋진 어두운 계획을 가져오고 '어두워지는' 경향에 대처할 수 있게 해주는 플러그인입니다.

다크 모드 플러그인, 특히 QS 다크 모드 플러그인을 수동 방식으로 설치하지 않고 설치해야 하는 이유를 확인해 보겠습니다.

QS 다크 모드 플러그인: 완벽한 다크 모드 솔루션

QS 다크 모드 플러그인이 웹사이트에 완벽한 다크 모드 솔루션이 될 수 있는 데에는 몇 가지 이유가 있습니다. 그 중 일부는 다음과 같습니다.

  • 무료입니다
  • 사용자 정의 CSS 지원
  • 다양한 애니메이션 및 CTA 텍스트를 포함한 다양한 다크 스위치 스타일
  • 시간 기반 다크 모드 제공
  • 버튼 위치 최적화 옵션
  • 다양한 어두운 색 구성표
  • 다크 모드 기반 이미지 및 글꼴 크기 지원
  • 우커머스 지원

플러그인 설치와 관련하여 WordPress 사이트에 다른 플러그인을 설치하는 것과 같습니다. 그러나 여전히 해결 중인 경우 여기에서 몇 가지 지침을 통해 도움을 드릴 수 있습니다. 확인해 봅시다.

  • QS 모드 플러그인을 다운로드하고 파일을 관련 디렉토리(일반적으로 /wp-content/plugins/plugin-name 디렉토리)에 업로드합니다.
  • WordPress 플러그인 화면에서 직접 플러그인을 설치하려면. WP 대시보드에서 플러그인 > 새로 추가를 클릭하고 검색 창에서 플러그인을 검색한 후 설치를 클릭합니다.
  • '플러그인' 화면에서 QS 다크 모드 플러그인 활성화
  • 활성화되면 다크 모드가 활성화되어야 합니다.
  • 화면의 토글을 클릭하여 어두운 모드로 전환할 수 있습니다.
  • 토글을 다시 클릭하여 조명 모드를 활성화합니다.
  • 사용자 정의하려면 플러그인의 WP Admin 다크 모드 사이드바에서 모든 설정을 확인할 수 있습니다.

다크 모드가 활성화되어 있을 때 색 구성표를 사용할 수 있습니까?

다크 모드는 화면에서 나오는 흰색 또는 파란색 빛의 양을 줄이는 것처럼 보입니다. 그것은 당신이 항상 검은 색으로 가야한다는 것을 의미하지는 않습니다. QS 다크 모드 플러그인으로 할 수 있는 것과 같이 다크 모드가 활성화된 경우에도 색 구성표 중에서 선택할 수 있습니다.

그러나 색상은 밝은 전경색과 어두운 배경색과 고대비로 콘텐츠가 표시되는 방식으로 선택됩니다.

결론

따라서 플러그인 없이 WordPress 웹사이트 에 다크 모드를 추가 할 수 있습니다. 그러나 당신이 테마 개발자나 코더가 아닌 한, 이 수동 방법을 선호하지 않을 것입니다.

대신 다크 모드 플러그인을 추가하는 것이 더 현명하고 쉬울 것입니다. 우리가 가장 좋아하는 플러그인인 QS Dark Mode Plugin에 대해 언급했습니다.

어두워지는 것은 눈의 건강뿐만 아니라 웹사이트의 미적 매력에 관한 것임을 기억하십시오. 이렇게 하면 전반적인 시각적 경험에 아우라를 추가하는 동시에 사용자 참여도를 높일 수 있습니다.

Astra Pro 대 Elementor Pro – 일대일 비교