WordPressの管理ダッシュボードにダークモードを追加したいですか？
配色を濃くすれば、画面からの白色光や青色光を抑えることができるため、日中遅い時間や暗い場所でも作業がしやすくなる。ユーザーによっては、眼精疲労や頭痛、睡眠障害に悩まされている場合にも、この光を減らすことが役立つという。
この投稿では、WordPressの管理ダッシュボードにダークモードを追加する方法を紹介する。
ダークモードとは何か、なぜWordPressに追加するのか？
深夜や照明の少ない場所でWordPressサイトを作業することが多い場合、コンピューター画面の明るい光が眼精疲労の原因になることがあります。
明るい光は自然な概日リズムを乱し、入眠を難しくするという説さえある。
このことを念頭に置いて、多くのアプリやサイト、さらにはOSには、画面からの白色光の量を減らすダークモードがビルトインされている。
もしあなたがiPhoneやアンドロイドのスマートフォンを持っているなら、トグルを使ってダークモードに切り替えることができるかもしれない。
YouTubeのような人気サイトでは、ビルトインのダーク配色を用意しているところもある。
WordPressのサイトにダークモードを追加することは訪問者にとって素晴らしいことですが、サイトのバックエンドにもダークモードを追加したいと思うかもしれません。WordPressには管理画面用の配色が用意されていますが、初期設定の配色はどれも実際に画面を通して入ってくる白い光の量を減らすものではありません。
ということで、WordPressの管理エリアにダークモードを追加して、深夜や暗い場所でも快適にサイト作業ができるようにしよう。
WordPress管理エリアにダークモードを追加する簡単な方法
WordPressの管理ダッシュボードにダークモードを追加する最も簡単な方法は、WP Dark Modeを使うことだ。このプラグインを使えば、管理者は個別クリックでダークモードを有効化・無効化できる。
さらに良いのは、複数投稿者でWordPressブログを運営している場合、それぞれの投稿者が好みに応じてダークモードのオン・オフを切り替えられることだ。プラグインは、次回ログイン時に彼らの好みを記憶する。さらに詳しく知りたい方は、WPダークモードのレビューをご覧ください。
まず、WP Dark Modeプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPressダッシュボードのWPダークモード ” 設定ページに移動し、管理画面ダークモードタブをクリックします。
次に、「管理者ダッシュボードダークモードを有効化」ボタンを有効化します。
好みに応じて、ブロックエディターのダークモードを有効化することもできる。
その後、下にスクロールして「変更を保存」ボタンをクリックします。
この時点で、管理ツールバーに新しい「明暗」スイッチが表示されます。
このトグルをクリックすると、管理エリアでダークモードの有効化と無効化を切り替えることができる。
ダークモード」は管理者の配色ではないので、有効化した後は管理者の配色を変更してみるとよいでしょう。
暗い配色を選ぶことで、画面からの光の量をさらに減らすことができます。もうひとつのオプションは、明るい配色を選ぶことで、ダークモードのダッシュボードを読みやすくすることです。
管理者の配色を変更するには、ユーザー ” プロフィールに移動し、管理者の配色の下にあるオプションのいずれかを選択します。
サイトのフロントエンドでダークモードを有効化することもできます。
これを行うには、「Frontend Dark Mode」タブに切り替え、「Enable Frontend Dark Mode」ボタンを有効化する。
前回同様、完了したら必ず『変更を保存』ボタンを押してください。
訪問者は、あなたのWordPressブログやサイトの通常のライトバージョンを見ることができます。しかし、右下のアイコンをクリックすることで、いつでもダークモードに切り替えることができます。
管理エリアのカスタマイズのヒントやコツについては、以下のガイドをご覧ください：
- WordPress管理エリアを守るための重要なヒント（更新）
- WordPressでカスタムの管理者通知を追加する方法
- WordPressの管理バーを管理者以外のすべてのユーザーで無効化する方法
- WordPress管理画面でフッターを変更する方法
- WordPress管理画面から不要なメニュー項目を非表示にする方法
- WordPressで管理カラムを追加・カスタマイズする方法
- WordPress管理ダッシュボードにホワイトラベルを貼る方法
このチュートリアルで、WordPressの管理ダッシュボードにダークモードを追加する方法をご理解いただけたでしょうか。WordPress でランディングページを作成する方法や、WordPress のエキスパートが選ぶ必須プラグインもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thank you for the advice. I have both system and browser dark mode set on Windows 11, but WordPress keeps ignoring this setting. Browser settings and even a browser extension that should force dark mode didn’t help. And now I understand that it will be a problem of WordPress missing color scheme for dark mode. Thank you for the valuable experience and advice on how to force dark mode.
WPBeginner Support says
You’re welcome
管理者
Dan says
Thank you.
This is a workaround plugin, which is not ideal.
I’ve observed that every time I click anything in the interface, it blinks for 1 second in the original color and then switches to dark mode.
Ideally, WordPress should add it to its color scheme.
WPBeginner Support says
You may want to change your color scheme under User>Profile to set the base color to help prevent the delay in the style’s loading.
管理者
Thia says
Awesome. Just tried the plugin and It’s really cool.
WPBeginner Support says
Glad you liked our recommendation!
管理者
Darlington says
What about how to implement dark mode in the frontend of my wordpress website?
WPBeginner Support says
That would be determined by your theme, if you reach out to your theme’s support they should be able to let you know.
管理者
Darlington says
Okay. Thanks a lot.
Kuldeep Singh says
Awesome!
Thank you guys. It helped me to get desired dashboard dark theme. But I need the default editor background in dark theme too. It there any single plugin which can change the dashboard and editor background to dark mode?
WPBeginner Support says
You would want to reach out to the plugin’s support for their recommendation first
管理者