プラグインなしの WordPress ダークモード – 可能ですか?

公開: 2022-10-18

目次

プラグインなしの WordPress ダークモードについて

画面の前で多くの時間を過ごすことで、目に負担がかかりすぎている可能性があります。 したがって、コンピューターを使用している間はそれらをなだめることが重要です。 目を休める最も効果的な方法の 1 つは、画面表示の設定をダーク モードに変更することです。

Web サイトの所有者は、Web サイトにダーク モードを追加して、ビジュアル エクスペリエンスを向上させる必要があります。 サイトに WordPress を使用している場合、ダーク モードの追加は簡単です。 手動またはプラグインのインストールの両方で実行できます。

WordPress Web サイトのダーク バージョンを作成するには、プラグインが最適なソリューションであることに同意します。 しかし、プラグインなしで WordPress のダークモードを有効にすることは不可能だと考えている方への回答もあります! ええ、それは可能です。

ここでは、プラグインを使用する場合と使用しない場合のダーク モードの追加について説明します。 また、どちらが優れているかについても話し合います。 この記事の後半では、QS ダーク モードと呼ばれるお気に入りのプラグインの 1 つについても説明します。

お楽しみに！

WordPress でダークモードを使用する利点

WordPress でダークモードを使用する必要があるのはなぜですか? その背後にはいくつかの正当な理由があります。 疲れた目で夜に PC でブラウジングしているときに、個人的にその必要性を実感します。

Web サイトの所有者は、このモードを Web サイトに追加することで、ユーザーに多くのメリットをもたらすことができます。 また、それはあなたのビジネスに付加価値を与えるものでなければなりません。

その利点は他にもあります。 以下でこれらのいくつかを見つけてみましょう。

  • コンピューター画面からの白色光を大幅に最小限に抑えます
  • 眼精疲労を軽減
  • エネルギーを節約し、バッテリー寿命を延ばします
  • ユーザーエクスペリエンスを改善することで、ページ滞在時間を増やします
  • 審美的なオーラを提供します

ええ、これらは、ダークモードがWordPressサイトに最適なオプションである理由のほとんどです.

プラグインなしの WordPress ダークモード – 可能ですか?

ここからは楽しい部分です。 ここでは、プラグインをインストールせずに WordPress サイトのライトをオフにする方法を説明します。

これを行うには 2 つの方法があります —

  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-transition: 0.4 秒のイーズインアウト。

トランジション: 0.4 秒のイーズインアウト。

あらすじ：なし

}

.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {

表示: インラインブロック;

フォントサイズ: 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;

/*ボーダー半径*/

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

境界半径: 100%;

右: 1.625em;

下: 0em;

背景: #FFB200;

変換: 回転 (-45 度);

ボックスの影: 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 #eee;

背景: 透明

}

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

背景: rgba(0, 0, 0, 0.15);

ボーダー: 0.125em 純白

}

.wpnm-button .wpnm-button-inner-left {

色: rgba(250, 250, 250, 0.51);

フォントの太さ: 太字

}

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

色: 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 タグに追加する必要があります。これにより、後でレイアウトをカスタマイズできるようになります。

それをしましょう。

jQuery(関数($) {

/* ダーク モード アイコンをクリックします。 ダーク モード クラスとラッパーを追加します。

セッションを通じてユーザー設定を保存*/

$('.wpnm-button').クリック(関数() {

// 月か太陽を表示

$('.wpnm-button').toggleClass('active');

//ダークモードが選択されている場合

if ($('.wpnm-button').hasClass('active')) {

//本体にダークモードクラスを追加

$('body').addClass('dark-mode');

//ユーザー設定をストレージに保存

localStorage.setItem('darkMode', true);

} そうしないと {

$('body').removeClass('dark-mode');

localStorage.removeItem('darkMode');

}

}))

// ストレージをチェックします。 ユーザー設定の表示

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

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

}))

「ダークモード」CSS クラスが本体クラスとして追加されているかどうかを調べてテストできるようになりました。 次に、暗い背景を追加して、正常に機能するかどうかを確認します。

body.ダークモード * {

背景: #333;

}

ブラウザまたはクライアント側で実行しており、サーバーは何も認識していないため、ライト モードが読み込まれた後にダーク モードが読み込まれることがわかります。 ここでは、ボディはダークモードを使用せずにレンダリングされ、JS はクラスを追加する前に DOM がロードされるのを待ちます。

したがって、ユーザーにとって完璧なソリューションではありません。 エクスペリエンスを向上させるためのより良い方法があるはずです。 何を調べましょう。

  • Cookie を使用してセッションを通じてユーザー設定を保存する

それでは、body クラスをサーバーに追加して、サービスを提供する前にサーバーをロードする方法を見てみましょう。 そのための最善の方法は、Cookie を使用してユーザー設定を保存することです。 このようにして、ユーザーのダーク モード設定用の Cookie を作成し、それに応じてダーク モード ボディ クラスを追加する必要があります。

HTML がレンダリングされるときに、ダーク モードのボディ クラスが有効になります。 したがって、JS コードを次のように書き直す必要があります。

jQuery(関数($) {

//クッキーオブジェクトを作成

var cookieStorage = {

setCookie: 関数 setCookie(キー、値、時間、パス) {

var の有効期限 = new Date();

expires.setTime(expires.getTime() + 時間);

var パス値 = ”;

if (typeof path !== '未定義') {

pathValue = 'path=' + パス + ';';

}

document.cookie = キー + '=' + 値 + ';' + pathValue + 'expires=' + expires.toUTCString();

}、

getCookie: 関数 getCookie(キー) {

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

キー値を返しますか? keyValue[2] : null;

}、

removeCookie: 関数 removeCookie(キー) {

document.cookie = キー + '=; 最大年齢 = 0; パス=/';

}

};

//ダークモードアイコンをクリックします。 ダーク モード クラスとラッパーを追加します。 セッションを通じてユーザー設定を保存する

$('.wpnm-button').クリック(関数() {

// 月か太陽を表示

$('.wpnm-button').toggleClass('active');

//ダークモードが選択されている場合

if ($('.wpnm-button').hasClass('active')) {

//本体にダークモードクラスを追加

$('body').addClass('dark-mode');

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

} そうしないと {

$('body').removeClass('dark-mode');

setTimeout(関数() {

cookieStorage.removeCookie('yonkovNightMode');

}、100);

}

}))

// ストレージをチェックします。 ユーザー設定の表示

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

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

}))

  • ボディ クラス フィルターを介してダーク モード クラスを追加します。

そこで、「yonkovNightMode」という名前の Cookie を設定しました。ユーザーがダーク モード オプションを選択すると、この Cookie がアクティブになります。 ただし、最初に PHP でこの Cookie を取得してから、それを body クラスに追加する必要があります。

次のスニペットをコピーして、子テーマの functions.php ファイルに貼り付けます。

<?php

/**

*ダークテーマモードを有効にする

* https://wordpress.org/plugins/wp-night-mode/ から分岐

*/

関数 yonkov_dark_mode($classes) {

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

//クッキーが保存されている場合..

もし ($yonkov_night_mode !== ”) {

// 「ダークモード」ボディクラスを追加

return array_merge($classes, array('dark-mode'));

}

$classes を返します。

}

add_filter('body_class', 'yonkov_dark_mode');

あなたは終わった

これで、完全に機能するダーク モード レイアウトのプロトタイプを実際に作成できました。 スニペットは、オープンソースの WordPress プラグインから取得されました。 そのため、WordPress Web サイトのいずれかに使用して、ユーザー エクスペリエンスを向上させるダーク モード オプションを追加できます。

2.ダークモードオプションを備えた既製のWordPressテーマを使用する

ダークモードのトグルボタンがすでにインストールされている既製のWordPressテーマを選択するのはどうですか. このようにして、プラグインを使用せずに WordPress サイトでダークモードを使用できます。 また、ほとんどのテーマはナイト モード プラグインまたはカスタム CSS コードでカスタマイズする必要があるため、カスタマイズを回避するのにも役立ちます。

では、ライト モードと一緒にダーク モードをサポートする WordPress テーマにはどのようなものがありますか? ここでは、ダーク モード レイアウトを備えた人気の WordPress テーマをいくつかご紹介します。 確認してみましょう。

  • Twenty Twenty One:これは、ダーク モード レイアウトが付属するデフォルトの WordPress テーマです。 デフォルトでは無効になっており、テーマ オプションから有効にする必要があります。
  • Estera: WooCommerce サイトで人気の WordPress テーマです。 ユーザーがライトモードとダークモードを切り替えることができるダークモードトグルボタンが付属しています。
  • HIghStarter:この軽量の WordPress テーマは、ポートフォリオ サイトで人気があります。 プラグインを別途インストールすることなく、ダークモード スイッチを備えています。 これにより、ユーザーはライト モードとダーク モードを切り替えることができます。
  • Mate:これは美しくデザインされた WordPress テーマで、サイト ヘッダーから直接ライト モードまたはダーク モードを選択できます。

手動またはプラグイン ダークモードの有効化に使用する方法は?

WP Web サイトで手動でダークモードを有効にする方法については既に説明しました。 また、特にコーディング部分で、ダークモードを有効にするのが面倒だと感じる方も多いと思います。

そのため、2 番目のオプションとして使用することをお勧めします。 手動またはプラグインのいずれかの方法を選択する場合、サイトにダークモードのトグルボタンをすばやく簡単に追加できるプラグインオプションを選択することをお勧めします.

完璧なプラグインについて言えば、ここでお勧めするお気に入りのプラグインがあります: QS Dark Mode Plugin. これは、ゴージャスなダーク スキームをサイトにもたらし、「ゴーイング ダーク」トレンドに対処できるようにするプラグインです。

ダーク モード プラグインをインストールする必要がある理由、特に QS ダーク モード プラグインをインストールし、手動の方法を使用しない理由を確認しましょう。

QS Dark Mode Plugin: 完璧なダークモード ソリューション

QS ダーク モード プラグインが Web サイトの完璧なダーク モード ソリューションになる理由はいくつかあります。 これらのいくつかは次のとおりです。

  • それは無料です
  • カスタム CSS のサポート
  • さまざまなアニメーションや CTA テキストなど、さまざまなダーク スイッチ スタイル
  • 時間ベースのダークモードを提供
  • ボタンの位置を最適化するオプション
  • 幅広いダークカラースキーム
  • ダーク モード ベースの画像とフォント サイズのサポート
  • WooCommerce対応

プラグインのインストールに関しては、他のプラグインを WordPress サイトにインストールするのと同じです。 ただし、まだ修正中の場合は、こちらの手順でお手伝いできます。 チェックアウトしましょう。

  • QS モード プラグインをダウンロードし、関連するディレクトリ (通常は /wp-content/plugins/plugin-name ディレクトリ) にファイルをアップロードします。
  • WordPress プラグイン画面からプラグインを直接インストールするには。 WP ダッシュボードから [プラグイン] > [新規追加] をクリックし、次に検索バーでプラグインを検索して、[インストール] をクリックします。
  • 「プラグイン」画面から QS ダーク モード プラグインを有効にします。
  • アクティブ化したら、ダークモードを有効にする必要があります。
  • 画面上のトグルをクリックして、ダークモードに切り替えることができます
  • トグルをもう一度クリックしてライトモードを有効にします
  • カスタマイズするには、プラグインのWP Admin Dark Mode Sidebarですべての設定を確認できます

ダーク モードがアクティブなときにカラー スキームを使用できますか?

ダークモードは、画面から出る白色または青色光の量を減らすように見えます. 常に黒くしなければならないという意味ではありません。 QS ダーク モード プラグインでできることのように、ダーク モードが有効になっている場合でも配色を選択できます。

ただし、明るい前景色と暗い背景色でコンテンツが高いコントラストで表示されるように、色が選択されています。

結論

プラグインなしでWordPress Webサイトにダークモードを追加することは可能ですか. しかし、あなた自身がテーマの開発者またはコーダーでない限り、この手動の方法でそれを行うことを好まないでしょう.

代わりに、ダーク モード プラグインを追加する方が賢明で簡単です。 私たちのお気に入りのプラグインである QS ダーク モード プラグインについて言及しました。

暗転は目の健康だけでなく、Web サイトの美的魅力にも影響することを忘れないでください。 そうすることで、ユーザー エンゲージメントを向上させながら、全体的なビジュアル エクスペリエンスにオーラを加えることができます。

Astra Pro vs Elementor Pro –直接比較