はじめに
この記事では、ユーザーがウェブサイトの視覚体験を自分好みにカスタマイズできるように、WordPressでダークモードを実装する方法について詳しく説明します。ダークモードは特に夜間や暗い環境での視認性を向上させるために便利な機能であり、ユーザー体験を大幅に改善することができます。
症状・背景
このテーマが必要になる主な場面:
- <場面1>: 夜間の閲覧中に目への負担を軽減したい。
- <場面2>: サイトが長時間利用される可能性が高いので、視覚的な疲労を抑える方法を探している。
- <場面3>: ユーザーからのダークモードの要求が増えたため、サイトに追加したい。
- <場面4>: 設計上、ウェブサイトが明るい背景と文字色で表示される場合でも、暗いテーマを提供することでアクセシビリティを向上させたい。
手順・設定方法
ステップ1: テーマにCSSとJavaScriptファイルを追加する
# WordPressのカスタムテーマのディレクトリに移動します。
cd wp-content/themes/yourtheme/
# 新しいスタイルシートファイル dark.css を作成します。
touch style/dark.css
# JavaScriptファイル dark.js を作成します。
touch js/dark.jsステップ2: CSSとJavaScriptの基本的な設定を行う
# テーマのfunctions.phpに以下のコードを追加して、CSSとJSファイルを読み込みます。
add_action('wp_enqueue_scripts', 'enqueue_dark_mode_assets');
function enqueue_dark_mode_assets() {
wp_enqueue_style( 'dark-mode-style', get_template_directory_uri() . '/style/dark.css' );
wp_enqueue_script( 'dark-mode-script', get_template_directory_uri() . '/js/dark.js', array(), null, true );
}ステップ3: CSSとJavaScriptをカスタマイズしてダークモード機能を実装
# dark.css に以下のCSSスタイルを追加します。
body.dark-mode {
background-color: #212529;
color: #ffffff;
}
/* 更なるCSSのカスタムは必要に応じて */# dark.js には以下のようなJavaScriptスクリプトを記述して、ダークモードの切り替え機能を実装します。
document.addEventListener('DOMContentLoaded', function() {
var toggleButton = document.createElement('button');
toggleButton.id = 'dark-mode-toggle';
toggleButton.textContent = 'ダークモード';
// ボタンがクリックされた時の処理
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', true);
} else {
localStorage.removeItem('darkMode');
}
});
// ローカルストレージから保存された設定を読み込み
var darkModeEnabled = localStorage.getItem('darkMode') === 'true';
if (darkModeEnabled) {
document.body.classList.add('dark-mode');
}
document.body.appendChild(toggleButton);
});ステップ4: ダークモード機能をブラウザでテストする
# 作成したファイルのエラーがないことを確認するためにローカル環境でサイトを起動します。
php -S localhost:8000注意事項
- <実践的な注意点1>: ダークモードの切り替えボタンは、ユーザーインターフェース全体に統一感を持たせるために適切な位置に配置することが重要です。
- <実践的な注意点2>: すべてのCSSクラスとJavaScript変数が正しく定義されていることを確認してください。間違った設定では機能しない場合があります。
- <セキュリティ上の注意>: ユーザーがダークモードをオン/オフできるようにしている場合、その機能が悪用されないよう適切な権限制限を行うことが重要です。
- <パフォーマンス/運用上の注意>: サイトのパフォーマンスに影響を与えないよう、不要なCSSとJavaScriptは削除するか最小化してください。
まとめ
1. <キー1>: WordPressテーマ内のstyle.cssまたは新規ファイルを作成し、ダークモード用CSSを追加します。
2. <キー2>: JavaScriptを使用してユーザーのダークモード設定を保存および読み込みます。
3. <キー3>: ダークモード切り替えボタンを作成し、それをウェブページに追加します。
4. <キー4>: サイトが正しく動作するようにブラウザでテストを行います。
5. <キー5>: 実装後はパフォーマンスとセキュリティを確認して、必要に応じて調整を行ってください。
関連記事: