これらの4つの簡単なステップでWordPressウェブサイトにダークモードを追加する方法
公開: 2022-06-162019年10月にInstagramと他のいくつかの主要なウェブサイトやアプリがダークモードを追加したとき、この機能に対する人々の関心が大幅に高まったのを目撃しました。
ただし、Instagramがダーク、別名ナイトモードを採用しているという外れ値を除外したとしても、上のグラフは、過去数年間でこの機能の人気が高まっていることを明確に示しています。
Instagramに加えて、他の多くの大手企業がナイトモードの時代に移行しているため、切り替えも検討する必要があります。 トレンドになっているだけでなく、ユーザーの眼精疲労の軽減、サイトへのアクセスに使用するデバイスのバッテリー寿命の延長、見た目が格好良くなるなど、ユーザーにとって多くのメリットがあります。
OK、最後のものは少し主観的かもしれませんが、私たちはそれに固執しています。
ありがたいことに、WordPressWebサイトにダークモードを追加するのは非常に簡単です。 Webサイトが各ユーザーにどのように表示されるかを設定できるだけでなく、管理ダッシュボードに機能を追加して、自分の目を休めることもできます。
サイトにダークモードを追加することを検討している場合、それを行う方法はいくつかありますが、想像できるように、プラグインを使用するのがはるかに簡単です。
この投稿では、ロサンゼルスのほとんどのWebサイトデザイン会社が推奨するプラグイン（WPダークモード）を紹介し、この機能を追加してカスタマイズし、WebサイトとWordPressのテーマに合うようにするために必要なすべての手順を確認します。
しかし、最初に、ダークモードとは何か、そしてその最も顕著な利点を見てみましょう。 読む！
ダークモードとは何ですか？なぜそれが役立つのですか？
ナイトモードとも呼ばれるダークモードは、ウェブサイトの配色を明るい色から暗い色に変更するシンプルな表示切り替えです。
白い背景に黒い文字が表示されている一般的なWebサイトでは、これは通常、色が単純に反転しているように見えますが、以下で説明するように、それ以上のものがあります。
この簡単な調整により、特にユーザーが夕方にWebサイトにアクセスしている場合に、画面から出る白色光が大幅に減少し、目の疲れが軽減されます。
ダークモードを有効にするオプションは、ほとんどの最新のオペレーティングシステムとWebブラウザで利用できます。
ダークモードの最も顕著な利点
この投稿全体でこの機能の利点のいくつかについてはすでに説明しましたが、便宜上、ここでそれらすべてをわかりやすい箇条書きで概説すると思いました。
したがって、ダークモードの利点は次のとおりです。
- 目の負担が少ない
- エネルギー消費量の削減とバッテリー寿命の延長
- 画面からの白色光が少ない
- あなたのページにより多くの時間を費やしました
ご存知のように、最新のブラウザとオペレーティングシステムでは、オプションとしてダークモードがすでに提供されていますが、ウェブサイトを好みのユーザーに適切な配色で表示したい場合は、自分で追加する必要があります。
ありがたいことに、WPダークモードプラグインをインストールすると、このプロセスが簡単になるだけでなく、Webサイトのダークモードの外観をあらゆる種類で制御できるようになります。
ダークモードとナイトモード
先に進む前に、ワシの目の読者が問題を抱えている可能性のある潜在的な問題に対処したいと思います。 つまり、この記事では「ダークモード」と「ナイトモード」という用語を同じ意味で使用してきましたが、技術的には2つの異なる機能を説明できます。
「ナイトモード」という用語は、ほとんどの最新のスマートフォンで利用できる機能によく使用されます。この機能は、夜が明けると画面から青い光を完全にまたは部分的に取り除き、スクリーンタイムが睡眠サイクルに与える影響を減らします。
ただし、前に説明したように、2つの用語は同じ意味で使用できます。これは、この投稿で採用したアプローチです。
これで、WordPress Webサイトにダーク（またはナイト）モードを追加する方法を見てみましょう。
WPダークモードプラグインを使用してWordPressWebサイトにダークモードを追加する方法
WordPressサイトにダークモードを追加する理由がすべてわかったので、4つの簡単な手順でそれを行う方法を説明します。
マイアミのウェブデザイン会社の友人たちが、WPダークモードと呼ばれる特殊なプラグインに依存するこのステップバイステップガイドの作成を手伝ってくれました。
1.プラグインをインストールします
ダークモードのWordPressプラグインはいくつかありますが、WPダークモードが最もユーザーフレンドリーで信頼性が高いことがわかりました。
これは、複雑な設定やコードを処理することなく、サイトのダークバージョンをすばやく簡単に構築できるプラグインです。
ご想像のとおり、WordPressプラグインディレクトリはこのツールを見つけることができる場所です。
以前にサイトにプラグインを追加したことがあると想定していますが、万が一の場合に備えて、管理ダッシュボードに移動し、[プラグイン]タブから[新規追加]を選択するだけです。
そこから、 WPダークモードを見つけて、[今すぐインストール]と[アクティブ化]をクリックします。
2.必要な設定をオンにします
[一般設定]タブでダークモードのオンとオフを切り替えることができます。 このタブを開くと、2つのオプションがデフォルトですでにオンになっていることがわかります。
これらは、 [フロントエンドダークモードを有効にする]と[OS対応ダークモードを有効にする]です。
前者はウェブサイトでダークモードを有効にしますが、後者はユーザーのOSまたはブラウザがダークモードに設定されている場合に機能が自動的にアクティブになることを意味します。
もう1つのオプションは、ダークモードをデフォルトにすることです。 これはかなり自明です—それをオンにすると、すべてのユーザーは自分の好みに関係なくあなたのウェブサイトの暗いバージョンを見るでしょう。
3.フロートスイッチをオンにしてカスタマイズします
ユーザーにいつでも暗いモードと明るいモードを切り替えるオプションを提供したい場合は、[フロートスイッチの表示]オプションを有効にすることもできます。
このオプションは、缶に書かれていることを正確に実行します。サイトのフロントエンドにトグルを配置して、ユーザーがダークモードを好きなようにオンまたはオフにできるようにします。
[表示設定]セクションで、アイコンの配置とスタイルをいじることができます。 プラグインの無料バージョンでは、スタイルに関するオプションがいくらか制限されていますが、主要な機能（ダークモードのオンとオフの切り替え）があります。
4.さまざまなダークモードの配色を試してください
この時点で、WordPress Webサイトには完全に機能するダークモードがあり、それだけを探している場合は、この手順をスキップできます。
ただし、サイトを一般的に見せたくない場合は、ダークモードの色をカスタマイズすることを強くお勧めします。 必要なすべてのオプションは、 [スタイル設定]セクションにあります。
この画面には、サイトの視覚的アイデンティティと連動する可能性のある色のパレットが表示されます。
ご想像のとおり、無料バージョンのWPダークモードプラグインでは、ここで提供されるオプションがいくらか制限されていますが、適切な解決策を見つけることができるはずです。
色をさらにカスタマイズしたい場合は、プレミアムバージョンで幅広いプリセットカラーパレットが提供され、独自のスキームを作成できます。
ボーナス—WordPress管理ダッシュボードでダークモードを有効にする
WordPress Webサイトのフロントエンドでダークモードのすべての利点を顧客と見込み客に提供する場合は、同じ礼儀を自分自身に拡張し、モードを管理ダッシュボードにも追加してみませんか？
デフォルトのWordPressの配色が明るすぎて好みに合わない場合は、WPダークモードプラグインが解決策になります。 方法は次のとおりです。
- WPダークモードプラグインをインストールします—ここで説明することはあまりありません。 この手順を完了する方法については、上記のセクションをご覧ください。
- バックエンドダークモードを有効にする—このオプションは、前に説明した他の重要な設定（一般設定）と同じタブにあります。 このセクションに移動して、 [バックエンドダークモードを有効にする]というタイトルのスイッチを切り替える必要があります。 下にスクロールして[設定の保存]をクリックして変更を適用することを忘れないでください。
- 管理ダッシュボードのダークモードを切り替える-管理ダッシュボードの上部にスイッチがあり、ダークモードをオンにできます。 これは、複数の管理者がいるWebサイトで特に役立ちます。これは、各ユーザーが個別にダークモードをオンまたはオフにできるためです。
- （オプション）管理ダッシュボードの配色を調整します—ダークモードをオンにした状態で、すべてをより美しく見せるためにいくつかの色を切り替えることができます。 これを行うには、[ユーザー]> [プロファイル]に移動し、好みのパレットを選択します。 色を設定したら、[プロファイルの更新]をクリックして新しい設定を適用します。
そして、それがすべてです。 このガイドが、WordPressサイトと管理ダッシュボードにダークモードを実装するのに役立つことを願っています。
このアップグレードは、WPダークモードプラグインでは無視できないほど簡単なので、この優れた機能をサイトに追加することをお勧めします。
著者略歴：クリストファーは、Digital Strategy Oneのデジタルマーケティングスペシャリストであり、フリーランスのブロガーです。 彼は、新しいWebテクノロジーのトレンドと、さまざまなチャネルにわたるデジタル音声配信に焦点を当てています。 クリストファーは自由な時間にドラムとマジック：ザギャザリングを演奏します。