About

本サイトについて

趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。

プロフィール

kght6123

佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。

kght6123.page

時間帯でダークカラーに切り替え #Wordpress #PHP #子テーマ

2022-06-07T14:16:40.546Z

移行前のブログはWorkpressのデフォルトテーマを親テーマとし、

子テーマでレイアウトをカスタマイズして、全体的にダークカラーに変更しています。

単純に目に優しいのと、黒ベースの方が写真が映えると思い採用しました。汗

かなり、ダークな雰囲気で、個人的にはすごく気に入っていますが、

日中はライトカラーの方が文字が見やすくて、朝ならそんなに目は疲れてないし

ダークカラーじゃないパターンがあっても良いなーと思って、

時間帯で、ダークカラーとライトカラーが切り替わるようにしました。

下記はそのPHP側のコードです。

CSSはGistに貼り付けているので、よろしければ参考にしてください。

<?php
function kght_theme_enqueue_styles() {
    // 親CSSの読み込み
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
  
    // 親CSSを継承して、子CSSの読み込み
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
  
  // タームゾーンを指定
    date_default_timezone_set('Asia/Tokyo');
  
  // リクエストパラメータの値を取得
    $kght_style_mode = get_query_var('kght_style_mode', 'none');
    // 現在時刻を数値で取得
  $time_hour = idate('H');
  
    if (strcmp($kght_style_mode, 'light') == 0) {
        // ライトカラーが指定されていたとき
        kght_light_enqueue_styles();
    } elseif (strcmp($kght_style_mode, 'dark') == 0) {
        // ダークカラーが指定されていたとき
        kght_dark_enqueue_styles();
    } elseif (5 <= $time_hour && $time_hour <= 17) {
        // ライトカラー(4時~17時)のとき
        kght_light_enqueue_styles();
    } elseif (17 <= $time_hour && $time_hour <= 24) {
        // ダークカラー(17時~24時)のとき
        kght_dark_enqueue_styles();
    } else {
        // デフォルトはダークカラー
        kght_dark_enqueue_styles();
    }
}
function kght_dark_enqueue_styles(){
    // ダークカラー用のCSSの読み込み
    wp_enqueue_style('dark-style', get_stylesheet_directory_uri() . '/dark.css', array('child-style'));
}
function kght_light_enqueue_styles(){
    // ライトカラー用のCSSの読み込み
    wp_enqueue_style('light-style', get_stylesheet_directory_uri() . '/light.css', array('child-style'));
}
function kght_add_query_vars_filter( $vars ){
  // 強制的にダーク・ライトカラーを切り替えるリクエストパラメータを追加
    $vars[] = "kght_style_mode";
    return $vars;
}

// テーマスタイル読み込みアクションをスクリプトキューに追加
add_action('wp_enqueue_scripts', 'kght_theme_enqueue_styles');

// カスタムクエリ変数を追加
add_filter('query_vars', 'kght_add_query_vars_filter');

?>

適用すると、時間帯でカラーが変わりますが、

下記の様にリクエストパラメーターで、強制的にカラーを切り替えることもできます。

ダークカラーへ https://Wordpressのアドレス/?kght_style_mode=dark

ライトカラーへ https://Wordpressのアドレス/?kght_style_mode=light