WordPressにダークモードを実装する手順

まず初めに、ダークモードって知っていますか。ダークモードとは黒を基調にした配色にディスプレイを置き換える機能のことである。

設定方法
  • mac:システム環境設定一般外観モード
  • iPhone:設定画面表示と明るさ外観モード
ダークモードにするメリット
  • 消費電力を抑えられる(有機ELディスプレイの場合)
  • 目への負担が少ない(特に暗い場所)
  • アングラ感があってかっこいい(個人の感想)

最近のスマホでもダークモードへの切り替え機能が標準装備になりつつある。すでに、TwitterやInstagram、YouTubeなどはダークモードに対応しているので、ネットサーフィンをしているとありがたみを感じる。

しかし、企業サイトや個人ブログでダークモードを採用しているところは非常に少ない。とはいえ、ユーザビリティを高めておいて損はないし、間違いなくこれからダークモードを搭載したサイトが増えてくると思う。

今回の記事では、当サイトが実装した(サイトを移行してからは手をつけていない)手順とワンタッチで切り替えられるボタンの設置方法を解説する。始めに言っておくと、今まで独自にCSSをカスタムしたり多くの装飾を利用している方はかなり大変な作業かと思う。なので、余裕があるときに作業するのがオススメ。作業自体は非常にシンプルだが、クラス名を探したりするのが大変である。スクリプトとか組めるなら話は別だが。

@TOC

ダークモードの実装方法

ダークモードを実装する方法は色々あるが、シンプルなものを選んだ。下記が今回、候補に挙がった方法。

ダークモードを実装する方法
  1. メディアクエリ
    • @media (prefers-color-scheme: dark)
  2. プラグイン
  3. Darkmode.js
  4. JavaScript

今回は1と4を使用する。2と3はお手軽にダークモードを実装できるのが魅力だが、よほどシンプルなサイトでない限り微調整が大変なのであまりおすすめはしない。

1のメディアクエリはOSの設定に準拠したモードが採用される。コード自体もシンプルで簡単。ただ、IEなど対応していないブラウザもあるので注意が必要である。そこまで気にしなくてもいいとは思うが一応下記を参照に。

4のJavaScriptは切り替えボタンを実装するのに利用する。メディアクエリだけでは切り替えることはできない。もし、そういったボタンが必要ないのであれば無視して構わない。

メディアクエリを利用した方法

@media (prefers-color-scheme: dark) {
body {
    background-color: #000;
    color: #dddddd;
}
.postContents p,ul,ol {
    color: #dddddd;
}
}

上記の@media (prefers-color-scheme: dark) {}の中にダークモードで適応させたいスタイルを書いていく。本当はもっと長いコードだけど省略している。あくまでダークモードなのでダークカラーをbackground-colorにして、それ以外の色もグレー系を使えば統一感が出る。最初に使う色を4、5色ほど書き出しておくと作業がスムーズに進むのでオススメ。

ダークモードのカラーリングは下記の記事を参考にした。

また、CSS変数を使えば効率的に色指定ができる。変数が使われているかいないかはテーマによって異なるので確かめる必要があるが、私が使用しているテーマ「SWELL」はCSS変数が使われており楽に実装できた。以前使用していた「THE THOR」は対応していなくて大変だった。

これでメディアクエリを利用したダークモードの実装方法は終わり。シンプルだが、作業量が多い。

JavaScriptを使って切り替えボタンを設置

前述した方法でダークモードに対応することができるが、ユーザーが任意で切り替えることはできない(設定を変更する必要があるということ)。この章で説明するのはダークモードとライトモードを切り替えるボタンの設置方法である。できるだけシンプルに、コピペさえすればできる感じを目指した。

まずはCSSを作成

先ほど書いたダークモード用のCSSとライトモードに適応させたいスタイルの2通りのファイルを子テーマにアップロードする。

@media (prefers-color-scheme: dark) {
    :root {
        --main-text: #ddd;
        --main-bg: #000;
    }
}

body {
    color: var(--main-text);
    background-color: var(--main-bg);
}
body {
    color: var(--main-text);
    background-color: var(--main-bg);
}

サーバーにアップロードするにはFTPソフトを利用する。私は「Filezilla」というソフトを使っている。

これを子テーマにアップロードする。WordPressであればURL.com -> wp-content -> themes子テーマ名で探せるはず。

スタイルシートを読み込ませる

CSSをサーバーにアップロードしたら、それを読み込ませるためのコードを書いていく。下記をコピーして子テーマにあるheader.php内の</head>タグの直前に貼り付ければOK。

もし、子テーマにheader.phpがなければ前述したFTPソフトでアップロードする必要がある。

<link rel="stylesheet" href="#" type="text/css" id="darkmode">	
<link rel="stylesheet" href="#" type="text/css" id="lightmode">

次はfooter.phpに下記のコードをコピペする。これも子テーマを選択する必要がある。

<script>
    var changeStyle = function(url) {
    var linkstyle = document.getElementById('darkmode');
    linkstyle.href = url;
};
</script>

<script>
    var changeStyle = function(url) {
    var linkstyle = document.getElementById('lightmode');
    linkstyle.href = url;
};
</script>

これでスタイルシートを読み込むための準備が完了した。あとはHTMLをサイトに埋め込み、CSSで装飾をしていく。

切り替えボタンのデザイン

HTMLを埋め込む

HTMLは下記をコピーして、ウィジェットなどにテキスト(ビジュアルではなく)として貼り付ける。

<div class="darkmode_button">
    <a onclick="changeStyle('https://url.com/wp-content/themes/child-theme/darkmode.css');"class="dark_button"><i class="fas fa-moon black-light"></i></a>
    <a onclick="changeStyle('https://url.com/wp-content/themes/child-theme/lightmode.css');"class="white_button"><i class="fas fa-sun white-light"></i></a>
</div>

URLの部分と子テーマの部分はそれぞれ自分のサイトの名称に変更する。

また、<i>タグの中にあるfas fa-moonfas fa-sunFont Awesomeから読み込んでいるものである。それぞれ好きなアイコンを選べばOK。
※使い始めはCDNを読み込ませるための準備が必要。

CSSでボタンを装飾する

div.darkmode_button {
    margin: 1em auto;
    text-align: center;
}

a.dark_button {
    display: inline-block;
    width: 20%;
    border-radius: 3px;
    background: #1c1c1e;
    padding: 10px;
    margin: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
}

.white-light {
    color: #1c1c1e;
}

a.dark_button:hover {
    border-radius: 3px;
    background: #fff;
    color: #1c1c1e;
}

a.white_button {
    display: inline-block;
    width: 20%;
    margin: 2px;
    border: 1px solid #000;
    border-radius: 3px;
    background: #fff;
    color: #1c1c1e;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.black-light {
    color: #fff;
}

a.white_button:hover {
    border-radius: 3px;
    background: #fff;
    color: #fff;
}

上記のコードを追加CSSまたはstyle-user.cssにコピペする。モノクロのシンプルなデザインなので、お使いのテーマカラーに合わせて:hoverの部分を変えたり@keyframesするのもいいと思う。

以上で切り替えボタンを使ったダークモードの実装方法を終わる。OSに左右されない初めはライトモードから画面を表示したいという方はメディアクエリは使わずにこちらの方法のみでOK。


最後に、切り替えボタンを使った方法だと別のページを開いた際に設定がリセットされてしまう。それを防ぐためにはCookieの設定をする必要がある。しかし、最近なにかとCookieのプライバシーが問題になっている(EUのeプライバシー規則など)。たまにあるCookie利用を求めるポップアップもその対策である。正直なところ、そこまでしてCookieを保存する必要もない(今のところ)と思っているので今回は採用しなかった。ウェブサイトによってニーズは異なるが、ダークモードをユーザビリティ向上の一環として検討してみるのもありだと思う。

To comment

@TOC
閉じる