WordPress にナイトモード機能を入れる

WordPress にナイトモード

JavaScript

if((new Date()).getHours() >= 20 || (new Date()).getHours() < 6 ) {
    document.body.className += " night-mode";
}

JavaScript を直接テーマに入れる場合は上のコードをbody の下の方、body 閉じタグの直前に script タグを使って追加します。コードの中身は簡単で「現在の時刻が20時以降、6時以前の場合、body に『night-mode』というクラス名を付ける」です。

(new Date).getHours() に現在の時刻の hour 値が入るので、「>= 20」 で20時以降、「< 6」で6時以前となります。時刻を変更したい場合は、「20」と「6」を変更します。

テーマに直接入れるのではなく、functions.php を使って JavaScript を追加する場合は以下のコードを加えます。

functions.php

<?php
function night_mode_function() {
echo <<< EOM
<script>

if((new Date()).getHours() >= 20 || (new Date()).getHours() < 6 ) {
    document.body.className += " night-mode";
}

</script>
EOM;
}
add_action( 'wp_footer', 'night_mode_function' );
?>

ナイトモードになる時刻を変更したい場合は、同様に「20」と「6」を変更します。上記のどちらかの方法で JavaScript を加えます。

また、以下の CSS を style.css に加えます。

style.css

.night-mode {
    animation: night 2s ease 0s 1 normal;
    animation-fill-mode: forwards;
}

@keyframes night {
    0% {color: #333; background-color: #fff} /*通常時、文字色が黒、背景色が白の場合*/
    100% {color: #fff; background-color: #333}
}

CSS に関してはアニメーションを使っています。ナイトモードではない通常時の色からじわりと変化させた方が感じが出ると思ったためアニメーションさせてみました。最初から暗いブログでないと知らせるのが一応の狙いです。2s はアニメーションにかかる時間です。

0% が初期値になり文字色の #333、背景色の #fff を変化させています。ブログによって通常時どのような色かは変わってしまうので、文字色、背景色ともに各々通常時の色を入れてください。100% は変化後、ナイトモード時の色です。暗めの色に設定しましょう。

ただし、これだけでは body のみにしか影響がありませんので以下のような感じで、各セレクタの色等を変えていきます。あくまでも例ですのでご注意ください。

CSS 例

.night-mode {
    animation: night 2s ease 0s 1 normal;
    animation-fill-mode: forwards;
}

.night-mode a {
    animation: night-a 2s ease 0s 1 normal;
    animation-fill-mode: forwards;
}

.night-mode code {
    animation: night-code 2s ease 0s 1 normal;
    animation-fill-mode: forwards;
}

@keyframes night {
    0% {color: #333; background-color: #fff}
    100% {color: #fff; background-color: #333}
}

@keyframes night-a {
    0% {color: #333}
    100% {color: #fff}
}

@keyframes night-code {
    0% {background-color: #eee}
    100% {background-color: #555}
}

body に「night-mode」といクラス名が付いているので

.night-mode (セレクタ) {
    (プロパティ)
}

としてあげれば、ナイトモード時のスタイルを細かく設定できます。

まとめ

最初に書いた通りお遊びですが、もしかしたらこの先、「夜は暗いブログ」がスタンダードになるかもしれません。

現在当記事でも20時以降、6時以前はナイトモードになっています。ナイトモードでない記事になっている場合は夜にもう一回来てみてください。真っ黒です。