はじめに
ここでは、ユーザーが選択できるダークモードスイッチをWordPressテーマに追加する方法を紹介します。ダークモードは特に夜間の閲覧や長時間の読書に便利で、視覚的なアクセシビリティとユーザーフレンドリーさを向上させます。
症状・背景
このテーマが必要になる主な場面:
- ユーザーがダークモードを好み、その選択肢を与えたい場合
- サイトのデザインに視覚的なアクセシビリティを追加したいとき
- 夜間や暗い環境での読書体験を改善したい時
手順・設定方法
ステップ1: テーマにダークモード用CSSファイルを追加
# functions.phpかカスタムプラグイン内に次のコードを追加します。
function add_dark_mode_css() {
wp_enqueue_style('dark-mode', get_template_directory_uri() . '/css/dark.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'add_dark_mode_css');
# テーマのCSSディレクトリに新しいファイルを追加します。
touch /path/to/your-theme/css/dark.cssステップ2: ダークモード切り替えスイッチを作成
# functions.phpかカスタムプラグイン内に次のコードを追加します。
function add_dark_mode_toggle() {
echo '<button id="dark-mode-toggle" onclick="toggleDarkMode()">ダークモード切り替え</button>';
}
add_action('wp_footer', 'add_dark_mode_toggle');
# テーマのJavaScriptファイルに次のスクリプトを追加します。
echo "<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
</script>";ステップ3: カスタムCSSでダークモードを適用
# dark.cssファイルに次のコードを追加します。
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
/* テーマの他の要素も順次変更 */ステップ4: ダークモード状態を保存するオプションを有効にする
# functions.phpに次のコードを追加します。
function save_dark_mode_preference() {
if (isset($_POST['dark-mode-preference'])) {
update_user_meta(get_current_user_id(), 'dark_mode', $_POST['dark-mode-preference']);
}
}
add_action('wp_ajax_save_dark_mode_preference', 'save_dark_mode_preference');注意事項
- ダークモードを有効にする前に、テーマの全体的な見た目と機能が壊れないことを確認してください。
- カスタムCSSは特定のテーマに依存する可能性があるため、他のテーマで動作するかどうかテストすることをお勧めします。
- 安全性のためにユーザー設定データを適切に保存し、不要な情報を削除しないようにしましょう。
まとめ
1. ダークモードCSS: ダークモード用のカスタムCSSファイルを作成して追加
2. スイッチボタン: サイトフッターにダークモード切り替えボタンを追加
3. JavaScript: ボタンクリックでダークモードクラスを付与するためのJavaScriptを実装
4. ユーザーメタデータ保存: ユーザーが選択したダークモード状態を永続的に保持
5. テストと改善: 完了後、サイト全体をテストして必要に応じて調整
関連記事: