WordPressでナイトモードを有効にする方法

しばらくの間、オペレーティングシステムとアプリケーションには、夜間の発光を減らして目を傷つけないように、白い背景を黒い背景に置き換えたバージョンのグラフィックインターフェイスが含まれています。 これはナイトモードとして知られています。

ファッションによるものであれ、実際に機能するためであれ、ナイトモードはますます人気があります。 黒い画面は白い画面よりもエネルギー消費が少ないため、夜間モードが環境にメリットがあることを確認する人がいます。 しかし、この種のダークモードを批判する人もいます。

とにかく、これはあなたがあなたのウェブサイトにも持っていることに興味がある機能かもしれません、そしてこれのために今日私たちはWordPressのナイトモードについて話します。

WordPressのデフォルトにはまだナイトモードが含まれていませんが、WordPressダッシュボードとフロントエンドの両方にナイトモードを追加するオプションがあります。 いつものように、プラグインはこの奇妙な視覚的機能でWordPressを拡張するためのソリューションです。

WordPressダッシュボードでナイトモードを有効にする方法

WordPress用のダークモードプラグインから始めます。これにより、WordPressダッシュボードでナイトモードをアクティブにできます。 使いやすく、無料です。

まず、プラグインをインストールしてアクティブ化します。 上のスクリーンショットでわかるように、WordPressプラグインディレクトリで直接、WordPressダッシュボード内のプラグインメニューから直接見つけることができます。

ダークモードプラグインがインストールされると、WordPressの各ユーザーは、自分のプロファイルにダッシュボードでプラグインをアクティブ化するオプションがあります。

このプラグインの良いところは、ダークモードまたは通常モードでWordPressダッシュボードをどのように表示するかを選択するのは各ユーザーです。 このように、WordPressダッシュボードをいつものように白い背景で使い続けたい人がいれば、問題はありません。

前のスクリーンショットでは、ダークモードを有効にした結果を見ることができます。 そしてそれは素晴らしく見えます！ サイドメニューだけでなく、ページの中央部分にも黒の背景色を使用した結果が本当に気に入りました。

残念ながら、WordPressダークモードプラグインには保留中の問題があります。Gutenbergブロックエディターとの互換性を提供するためです。 次のスクリーンショットでは、暗い背景をグーテンベルクにまだ適用できないことがわかります。

プラグインが十分に成功し、ユーザーがそれを要求した場合、その開発者は、ブロックエディターもナイトモードで表示されるようにプラグインを適応させることになります。 いずれにせよ、グーテンベルクの熱狂的な開発ペースとそのスタイルの「頻繁な」更新により、適応はやや複雑になります。

WordPressの訪問者のためにナイトモードをアクティブにする方法

ダークモードプラグインは、WordPressダッシュボードにナイトモードのみを追加します。 Webサイトの残りの部分、つまり訪問者に表示されるフロントエンドは、変更を加えることなく、引き続き同じように見えます。

明るい背景の代わりに暗い背景を使用して、訪問者がWebサイトでナイトモードをアクティブ化するオプションを使用できるようにする場合は、WPナイトモードプラグインをインストールする必要があります。

このプラグインは、ダークモードと同様に完全に無料で、WordPressプラグインディレクトリでも利用できます。

インストールすると、 [設定]やその他のメニューには何も表示されなくなります。 あなたがしなければならないことはあなたのメニューを編集するために外観メニューに行きそしてそこに行くことです。 メインメニューで、特定のURLなしでカスタムリンクを追加する必要があります。 この新しいメニュー項目は、ナイトモードをアクティブまたは非アクティブにするスイッチを追加するのに役立ちます。

次のスクリーンショットに示すように、メニュー管理インターフェイス自体で、右上隅にある画面オプションを開いて、CSSクラスを追加するオプションをアクティブにする必要があります。

これを行ったら、追加したメニュー項目を編集するときに、CSSクラスを追加できる追加のフィールドが表示されます。 ここでは、CSSクラスwp-night-modeを含める必要があります。 このクラスは、WPナイトモードがナイトモードスイッチとして使用するアイテムを識別するために必要なクラスです。

デフォルトでは、WPナイトモードはインターフェイスに暗い色を追加しないプラグインです。 背景、テキスト、リンクの両方に表示する暗い色を選択するのはあなたでなければなりません。 これらの色を定義するには、[外観]メニューに移動し、[カスタマイズ]メニューを開く必要があります。

WordPressカスタマイザーが開き、ナイトモードオプションが表示されます。 これを選択すると、デフォルトでナイトモードをアクティブにし、いくつかのスタイルを作成するオプションがあることがわかります。 各スタイルで、背景色、テキストの色、およびリンクの色を定義します。

カスタマイザーの良いところは、選択した色でWebサイトがどのように表示されるかを実際にプレビューできることです。

残念ながら、結果は完全ではありません。一部の要素には、ナイトモードでは奇妙に見える明るい背景がまだあります。 しかし、心配しないでください。これを修正できます。 カスタマイザー自体から、CSSルールを追加して、これらの小さな問題を修正できます。

カスタマイザーに戻ると、[追加のCSS ]オプションが表示されます。 これを選択すると、CSSルールをその場で作成できるようになります。 これらのルールは、次のタイプにすることができます。

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

プラグインが実際に行うことは、WebサイトのbodyタグにCSSクラスwp-night-mode-onを適用することであることに注意してください。 したがって、HTML要素の背景を修正して暗くしたい場合は、その要素のセレクターを見つけて、 bodyタグにwp-night-mode-onクラスがあるときに修正を適用するだけです。

次の比較では、通常モードとナイトモードの基本的な比較を、適用した色で確認できます。

いくつかのプラグインのおかげで、WordPressにナイトモードを追加するのは非常に簡単です。 今日は、WordPressダッシュボードとフロントエンドでナイトモードをアクティブにするのに役立つプラグインを確認しました。

アプリケーションでナイトモードを定期的に使用していますか？ あなたの意見を下にコメントすることを忘れないでください！

UnsplashのPriscillaDuPreezによる注目の画像。