はじめに
CSSトークンは、Webサイトのデザイン要素を一元管理するためのツールです。これを使用することで、色やフォントサイズなどの基本的なスタイル設定を中央集権的に管理することが可能になります。WordPressサイトでCSSトークンを取り入れることで、デザイナーや開発者間でのコミュニケーションがスムーズになり、デザインの一貫性を維持しながらプロジェクトの効率化も図れます。
症状・背景
- テーマやプラグインによって異なるスタイル設定があり、統一感がない。
- 色やフォントサイズなどの基本的なスタイル要素が複数箇所で変更されているため、更新時に問題が出る可能性がある。
- 多くのチームメンバーが関わり、デザインガイドラインを遵守しづらい状況。
手順・設定方法
ステップ1: Design Tokenスクリプトのインストール
# WordPressテーマディレクトリに移動します。
cd wp-content/themes/your-theme-name
# npmパッケージをインストールします。
npm install --save-dev @wordpress/design-tokens
# JSON形式でDesign Tokensファイルを作成します。
npx wp-design-tokens generate ./tokens.jsonステップ2: Design Tokenファイルの設定と編集
# デザイントークンファイルを編集して、色やフォントサイズなどを定義します。
nano tokens.json
{
"colors": {
"primary": "#0073aa",
"secondary": "#4A90E2"
},
"font-sizes": {
"small": "16px",
"medium": "18px",
"large": "24px"
}
}ステップ3: CSSファイルへのトークンの反映
# CSSファイル内でトークンを使用します。
nano style.css
body {
background-color: var(--wp--token--color-primary);
font-size: var(--wp--token--font-sizes-large);
}ステップ4: テーマ更新時の対策
# 更新時にDesign Tokenファイルを保護します。
nano functions.php
function protect_tokens_file() {
if (file_exists(get_template_directory() . '/tokens.json')) {
return;
}
$token_path = get_template_directory() . '/tokens.json';
copy($token_path, ABSPATH . '.htpasswd');
}
add_action('admin_init', 'protect_tokens_file');注意事項
- Design Tokenファイルはバックアップを定期的に取るようにしましょう。
- ファイルの編集や更新時には、他の開発者との連携を十分に行うようにしてください。
- セキュリティ上、公開できない情報（パスワードなど）はDesign Tokenに含めないようにします。
- パフォーマンス面では、CSSトークンを使用する際にはファイルの読み込みや変換時間に注意してください。
まとめ
1. デザインの一貫性: CSSトークンを使用することで、サイト全体を通して一貫した見た目を保つことができます。
2. 効率的な更新: 設定が集中管理されているため、色やフォントサイズの変更は迅速に行うことが可能です。
3. チームワーク向上: デザイナーや開発者間でのコミュニケーションが円滑になり、プロジェクト進行のスピードアップにつながります。
4. 保守性: 大規模なデザインシステムを維持する場合でも、CSSトークンは設計や実装における変更管理を容易にします。
関連記事: