WordPressテーマのSimplicityにナイトモードのようなものを実装してみた

少し前のiOSに画面を暗くして、ブルーライトを軽減するというNight Shift(ナイトシフト)という機能が実装されました。Night Shiftとはちょっと違いますが、当サイトでも夜間に色を変えるナイトモードのようなものを実装してみました。

sns-pages.php

ナイトモード用のsvgアイコンをSNSアイコングループ内に表示させるために、Simplicityテーマ下の「sns-pages.php」にあるul内に下記の記述をしました。

20時~6時の時間帯の時にナイトモード用のsvgアイコンが表示されます。

svgアイコンは「月のアイコン | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト」のアイコンを利用しています。svgやpathは、記述を省略したり、cssにスタイルを移したりしているのでオリジナルの記述とは異なっています。

解説1

タイムゾーンを日本に設定しています。

解説2

現在の時間を00から23の値で取得して、「$time」に代入しています。

解説3

現在の時刻が20時~6時の時間帯の時に処理が走ります。

解説4

SNSアイコンにグループにある「li」を追加してします。「class=”moon-page”>」は記事内に表示される、ナイトモード用のアイコンを非表示にするために記述しています。

解説5

ナイトモードに切り替えるsvgアイコンのコードです。

header-logo.php

モバイルにもナイトモード用のアイコンを表示させるために、Simplicityテーマ下の「header-logo.php」にある、サイトタイトルの上に下記の記述をしました。

20時~6時の時間帯の時にナイトモード用のsvgアイコンが、モバイルに表示されます。

解説1

タイムゾーンを日本に設定しています。

解説2

現在の時間を00から23の値で取得して、「$time」に代入しています。

解説3

現在の時刻が20時~6時の時間帯の時に処理を走らせます。

解説4

モバイル表示の時に処理を走らせます。

解説5

モバイル表示でのアイコンとサイトタイトルの位置調整に使用しています。

解説6

ナイトモードに切り替えるsvgアイコンのコードです。svgやpathは記述を省略したり、cssにスタイルを移したりしているのでオリジナルの記述とは異なっています。

night-mode.js

ファイル名を「night-mode.js」として、ナイトモードを表示するためのjsを作り、Simplicityの子テーマにアップロードしました。

上記はsvgアイコンがクリックされた時にアイコンのカラーが変わる「on」クラスを「path」に付与しています。また、サイト全体をナイトモ-ドにする「night-mode」クラスをbodyに付与しています。「jQuery.cookie」でそれらの状態の保持を行っています。

footer-insert.php

作成して子テーマにアップロードした「night-mode.js」を「footer-insert.php」で読み込みます。

上記を「footer-insert.php」の一番下に記述しました。

解説1

タイムゾーンを日本に設定しています。

解説2

現在の時間を00から23の値で取得して、「$time」に代入しています。

解説3

現在の時刻が20時~6時の時間帯の時に処理を走らせます。

解説4

「<?php echo get_stylesheet_directory_uri(); ?>」で子テーマにアップロードした「night-mode.js」のパスを取得して読み込んでいます。

night-mode.css

ファイル名を「night-mode.css」として、ナイトモードを表示するためのcssを作り、Simplicityの子テーマにアップロードしました。

cssはブログの状況によってだいぶ変わると思います。

解説1

モバイルでナイトモード用のアイコンとサイトタイトルを横並びにするために記述しています。mobile用のcssに記述しているわけではないので、PC用の表示にも適用されます。

解説2

svgアイコンの大きさ、カラーやカーソル表示、ホバーした状態、クリックされた後のスタイルを記述しています。「.sns-group li.moon-page」の「display: none;」で記事内に表示されるナイトモード用のアイコンを非表示にしています。

解説3

「カラー」はナイトモード用のサイトの背景色やフォントカラーを指定しています。

解説4

「.m-moon」でモバイル表示のナイトモード用のアイコン位置を調整しています。「AMP ローディング画面」では当サイトで独自に実装している、指定した画面サイズや向きで表示されるローディング画面の背景色をナイトモード用に変更しています。

header-insert.php

作成して子テーマにアップロードした「night-mode.css」を「header-insert.php」で読み込みます。

上記を「header-insert.php」の一番下に記述しました。

解説1

タイムゾーンを日本に設定しています。

解説2

現在の時間を00から23の値で取得して、「$time」に代入しています。

解説3

現在の時刻が20時~6時の時間帯の時に処理を走らせます。

解説4

「<?php echo get_stylesheet_directory_uri(); ?>」で子テーマにアップロードした「night-mode.css」のパスを取得して読み込んでいます。

ナイトモード

PC

アイコン表示

ヘッダーにあるSNSアイコングループの一番左に、ナイトモード用のアイコンが表示されています。

https://www.pc-weblog.com/wp-content/uploads/2016/09/pc-moon.png
ナイトモードのアイコン オフ
PC ナイトモードのアイコン オン
ナイトモードのアイコン オン

モード切替

画像を押下すると動画が表示されます。
PC ナイトモード オンオフ
ナイトモード オンオフ

アイコンをクリックすると「night-mode.js」の処理が走り、「night-mode.css」に記述したスタイルが適用されます。再度クリックすると通常の表示に戻ります。

モバイル

アイコン表示

サイトタイトルの左側に、ナイトモード用のアイコンが表示されています。

モバイル ナイトモードのアイコン オフ
ナイトモードのアイコン オフ
モバイル ナイトモードのアイコン オン
ナイトモードのアイコン オン

モード切替

モバイル ナイトモード オンオフ
ナイトモード オンオフ

アイコンをタップすると「night-mode.js」の処理が走り、「night-mode.css」に記述したスタイルが適用されます。再度タップすると通常の表示に戻ります。

まとめ

  • ナイトモード用のアイコンを指定した時間帯で表示する。
  • ナイトモード用のcssとjsを作り、子テーマにアップロードして指定した時間帯で読み込ませる。
  • 子テーマの「header-insert.php」にcssを、jsを同じく子テーマにある「footer-insert.php」に読み込ませている。
  • 変更した既存のテンプレートは「simplicity2」テーマ下にある「sns-pages.php」と「header-logo.php」。

初めは指定した時間帯になった時に、自動でナイトモードに切り替わるようにしようと思ったのですが、ナイトモードのカラーが好きになれない方がいた場合を考慮し、ボタンのトグル形式にしました。

cssやjsは指定した時間帯だけに表示させるようにしているので、ナイトモードで朝を迎えた場合でも、通常の表示に戻ります。また、ナイトモードのまま夜を迎えた場合、クッキーが状態を保存しているので、ナイトモードの表示に自動的に切り替わります。

半分お遊びで導入しているので、少し様子を見ていきたいと思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressテーマのSimplicityにナイトモードのようなものを実装してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!