WordPressWebサイトにダークモードを追加する方法

公開: 2021-06-14

ダークモードは、最近、ウェブサイトとアプリの両方で非常に一般的になっています。ダークモードと通常モードを切り替える移植性があるため、ユーザーは自分の好みに応じてWebサイトを自由に読んだり表示したりできます。

ダークモードは、特に夜間にWebサイトを読んでいるときに非常に有益になります。これにより、目に放出される光が少なくなり、目の疲れが軽減されます。

さらに、ダークモードは多くの場合、有害な青色光への露出を減らし、Webサイトを読むために使用しているデバイスのバッテリー寿命を延ばします。

では、WordPress Webサイトにダークモードを追加しますか？はいの場合は、正しい場所に来ました。今日は、フロントエンドのWordPressWebサイトと管理エリアでWordPressダークモードを選択する方法についての完全なガイドを提供します。

ダークモードとは何ですか？

ダークモードは携帯電話やPC、ラップトップで見つけることができ、ダークモードは画面から放出される白色光の量を減らします。一部のガジェットには、涼しい色調の代わりに暖かい色調を採用するナイトモードが含まれています。ダークモードは、背景を暗い色相で塗りつぶすことにより、別のアプローチを取ります。

WordPress Webサイトにダークモードを追加する理由

ダークモードは、目に非常に刺激的で有害な可能性のある直射光を減らすため、ユーザーが夜間にWebサイトを表示する際のエクスペリエンスを向上させます。さらに、WordPressサイトにダークモードプラグインを追加すると、ダークモードをオンとオフの両方に切り替えることができます。さらに、サイトがダークモードでどのように見えるかについてより多くの権限があります。ダークモードは、WordPressWebサイトのナイトモードのようにも機能します

ダークモードのWordPressプラグインでは、必ずしもフロントエンドでのみこれを使用することはできません。代わりに、WordPress管理者にもダークモードを使用できます。つまり、夜間に自分でより良い作業体験をすることができます。

WordPressWebサイトにダークモードを追加する方法

以下では、WordPressWebサイトにダークモードを追加する方法を説明します。これは非常に簡単で、手順全体を完了するのに数分しかかからないため、手順に注意深く従ってください。

ステップ1：プラグインをインストールする

最初の最も重要なステップは、DroitThemesによるDroitダークモードをダウンロードしてインストールすることです。これは、市場で入手可能な最高のWordPressダークモードプラグインの1つであり、実際にお金を払う前に、無料バージョンにアクセスして機能を確認することもできます。

WordPressプラグインをインストールするには3つの方法があります。

方法1：最初に、プラグインをダウンロードして解凍する必要があります。その後、「droit-dark-mode.zip」ファイルを解凍し、「 / wp-content / plugins / 」ディレクトリに配置します。最後のステップでは、プラグイン»管理に移動してプラグインをアクティブにする必要があります。

方法2：実行できるもう1つの手順は、このダークモードプラグインをインストールすることです。 ダッシュボード»プラグイン»新規追加»検索 'ドロイトダークモード' »インストール»アクティブ。

方法3：別の手順もあります。最初に「droit-dark-mode.zip」をダウンロードしてから、「ダッシュボード」>「プラグイン」>「新規追加」>「zipファイルをアップロード」» 「アクティブ」の手順に従います。

ステップ2：ダークモードを確認する

アクティベーション後、WordPress管理者の[設定]»[ダークモード]ページに移動し、[一般設定]タブを選択します。すぐにそこにルーティングされます。訪問者のデバイスがダークモードに設定されている場合、訪問者はサイトのダークモードバージョンを即座に表示します。

また、選択に応じてオンまたはオフに切り替えることができる「スイッチスタイル」オプションもあります。デフォルトではオンになります。このスイッチはWebサイトのどこにでも表示でき、ユーザーはこのスイッチを使用してダークモードと通常モードのどちらかを選択できます。

このスイッチは、デフォルトでWebサイトの右下隅にあります。通常のビューアとしてWebサイトにアクセスすると、スイッチをクリックして、ダークモードでWebサイトを簡単に変更できます。

ステップ3：詳細設定

Droit Dark Modeは、無料のプラグインと有料のバージョンの両方で提供されます。無料版ではカスタマイズオプションがあまり多くありませんが、有料版ではこのダークモードプラグインを好きなようにカスタマイズできます。

カスタマイズオプションは、[設定]»[ダークモード]»[詳細設定]ページにあり、追加のカスタマイズオプションがあります。ダークモードとブライトモードのどちらを使用するかを決定すると、デフォルトで保存されます。

スイッチスタイルの変更

たとえば、ダークモードスイッチャーのスタイルを変更するには、[表示設定]タブをクリックするだけです。Webサイトから選択して使用できるスイッチスタイルはいくつかあります。 Elementorウィジェットを使用して、投稿またはページのコンテンツにスイッチボタンを追加することもできます。

グーテンベルクブロックは、投稿やページのコンテンツにスイッチボタンを追加するために使用できます。

スイッチをさまざまな位置に設定するオプションがあるとしたら、それはどれほど素晴らしいことでしょう。さて、これはDroitダークモードプラグインにも感謝する可能性があります。これにより、スイッチをWebサイトの左上、左下、右上からさまざまな位置に配置できるようになります。右下、中央下、中央上など。

無料版では; 2つのダークモードスイッチャーオプションから選択できます。

ユーザーは、elementorウィジェットまたはGutenbergブロックのいずれかを使用して、スイッチの位置を変更し、コンテンツ、投稿、またはページに配置できます。スイッチをクリックしてマウスを引くだけで、スイッチをさまざまな位置に移動して正確な位置を見つけることができます。

ダークモードの色を変更する

カラーパレットからダークモードの色をすばやく変更するために、10以上のユニークなカラープリセットから選択できる複数のカラープリセットがあります。 Droit Dark Mode設定に移動し、スタイル設定までスクロールすると、選択に応じてカスタマイズできるカラーオプション設定が表示されます。

さらに、市場に出回っているすべての主要なテーマはDroit Dark Modeプラグインと互換性があるため、カバーされています。

無料版では、2色から選択するオプションがあります。

WordPress管理者にダークモードを追加する方法

これまで、Droit DarkModeプラグインをWordPressWebサイトに追加する方法を説明してきましたが、次に、これを管理者に追加する方法を説明します。

WordPressが多くの異なる管理カラースキームを提供していることをすでにご存知かもしれませんが、残念ながら、それらのどれもダークモードにならず、ライトを減らすことができません。したがって、最も単純で効果的な解決策は、Droitダークモードプラグインを使用することです。

ステップ1：追加する方法

[設定]»[ダークモード]ページの[一般設定]タブに移動するだけです。次に、[バックエンドダークモードを有効にする]設定をオンにします。ページの下部にある[設定を保存]ボタンをクリックして設定を保存することを忘れないでください。これで、管理バーの上部に、ライトモードとダークモードを簡単に切り替えることができるスイッチが表示されます。

ステップ2：より多くのカスタマイズオプションと機能

管理エリアのこのダークモードプラグインにあるいくつかの機能を見てみましょう。

色の選択

ブラウザに応じて、管理ダッシュボードのカラープリセットを選択します。暗い管理ダッシュボードと明るい管理ダッシュボードのカラープリセットを設定できます。これは、WordPress Webサイトで作業しているときに、選択に応じて色を選択するための完全なアクセス権を持つことを意味します。

ダークモードは管理者の配色ではないため、WordPressにすでに存在する配色と簡単に組み合わせることができます。これを行うには、[ユーザー]»[プロファイル]に移動し、ドロップダウンメニューから[管理カラースキーム]の下のオプションを選択します。管理者の配色オプションにアクセスするには、ダークモードをオフにする必要があることに注意してください。

別のページと投稿にナイトモードを設定する

ダークモードを有効/無効にしたり、選択によって個々の投稿で異なるカラーパレットを選択したりするオプションがあります。さらに、カテゴリごとに、ダークモードを有効/無効にしたり、個別のカラーパレットを指定したりできます。

これらのカスタマイズオプションは、Webサイトを他の競合他社から際立たせたい場合に特に効果的です。

コンテンツごとにさまざまな製品を強調表示

別の特定の製品でダークモードまたはナイトモードを有効または無効にしたい、あるいは別の色を設定したいとします。このWordPressダークプラグインはあなたがそれをすることさえ可能にするでしょう。

特定のコンテンツを強調したいとします。すべてのページ/投稿タイプに対して、コンテンツの前後にダークモードスイッチボタンを配置できるため、このWordPressプラグインでも簡単です。

カスタムカラーとスイッチテキスト

すべての段落、リンク、見出しボタン、その他のUI要素にカスタムカラーを選択して設定することもできます。非常に多くのカスタマイズオプションがあるため、さまざまなオプションを見るのにうんざりします。

ダークモードスイッチのテキストをダークモードまたはライトモードで編集することもできます。

画像のカスタマイズ

画像は、どのWebサイトでも視聴者の注意を引く最初のものです。 Droit Dark Modeプロバージョンを使用すると、画像の明るさ、不透明度、コントラストを簡単に編集できます。

コンテンツを完全に一致させるために必要な場合は、明るさ、不透明度、コントラストを増減します。

ヒント： WordPressブロックエディターで投稿を作成するときにダークモードを使用することもできます。左上の小さな色の記号をクリックして、使用するモードを選択します。目への負担を軽減する簡単な作業体験には、さらに何が必要ですか。

結論

あなたはおそらくWordPressのウェブサイトにダークモードを追加する方法を知りたいと思っていたのでここにいます、そして今日、私たちはそれをしました。この記事のこれまでのところ、WordPressWebサイトにダークモードを追加するために必要なすべてについて説明してきました。

WordPressサイトにダークモードを直接追加することはできません。そのためには、追加のプラグインが必要になります。私たちにとって、Droitダークモードプラグインは、Webサイトと管理パネルでダークモードを提供するのに非常に効果的です。このプラグインが提供するカスタマイズは計り知れないものであり、文句なしにそれを使用して楽しい時間を過ごすことができます。