CSS変数を追加してWordPressの子テーマをカスタマイズする方法
公開: 2018-09-05CSSカスタムプロパティとも呼ばれるCSS変数を使用すると、CSSスタイルシートで簡単に再利用できます。 WordPressの子テーマを使用したことがある場合は、色やパディングなどのスタイル設定やオーバーライドをたくさん行っていることに気付くでしょう。Webデザインを初めて使用する場合は、プレーンを使用しても問題はありません。 CSS。 CSS変数はオプションであり、高度になるにつれて、変数がどのように役立つかがわかります。
これらはCSSプリプロセッサを置き換えることを意図したものではなく、最も人気のあるのはSASSです。 私は特に大規模なプロジェクトにSASSを使用しており、CSS変数をコアピースとして使用して、高度なオプションを提供しています。 ただし、以前にプリプロセッサを使用したことがある場合は、CSSを出力するためにプリプロセッサをコンパイルする必要があることをご存知でしょう。 そのため、このチュートリアルではCSS変数に焦点を当て、プリプロセッサの詳細については説明しません。
CSS変数は幸せな媒体です。 幸いなことに、強力なブラウザサポートがあります。 本番環境での使用を確約する前に、「使用できますか」をチェックして、必要なサポートが提供されていることを確認してください。 プレーンCSSを使用するよりも効率的ですが、SASSのような高度なセットアップは必要ありません。 ブラウザは「コンパイル」を行い、コンパイルされたCSSを出力する設定や環境に依存しません。
このアプローチは、単純なWordPressの子テーマのスタイリングなどに適したプロジェクトです。 このようなプロジェクトでは、ブランド化されたテーマを作成するためにスタイルを更新する必要がある傾向があります。 私はスタイリングオーバーライドの管理可能なリストを持っているという事実が好きで、SASSをCSSにコンパイルする環境をセットアップする必要性を感じていません。
Genesis FrameworkとStudioPressのテーマを無料で入手してください！
Flywheelでサイトをホストすると、楽しいダッシュボードから30を超えるプレミアムWordPressテーマ（Genesisを含む！）にアクセスできます。 それはあなたがたった15ドル/月で始めることができる価値で2,000ドル以上です！ 詳細については、こちらをご覧ください。
CSS変数の使用方法
ブランドを維持するために特定の色を使用する場合、一般的な要件の1つは、何度も使用できるブランドカラーパレットを用意することです。 毎回同じ色の値を入力するのは冗長になります。 さらに、セット内の色の値の1つに変更を加えたい場合はどうなりますか？ たとえば、青を少し暗くする必要があるかもしれません。 これは常に起こります。 はい、もちろん、信頼できる検索と置換があります。 ただし、このグローバルな変更を行う場合、および変数が再利用されるため、値を1か所で調整する方が効率的です。
CSS変数は次のようになります。
:root {
--text-black: #232525;
}
header {
color: var(--text-black);
}
WordPressの子テーマのスタイルを設定するワークフローを合理化しているので、 styles.cssファイルに変数を追加しました。 これは単なる「ショートリスト」であり、さらに追加されるにつれて、各変数に効率的に名前を付けることが重要になります。
:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}
var（）関数
変数は実際にどのように使用されますか？ とても簡単です。 最初に変数が宣言され、次に必要なCSSルールセットで使用されます。 スコープは知っておくべき重要なことです。 変数は、意図したスコープ内にあるCSSセレクター内で宣言する必要があります。 多くの場合、変数をグローバルスコープで使用できるようにする必要があります。そうすれば、すべての変数にアクセスできます。 グローバルスコープには、 :rootまたはbodyセレクターのいずれかを使用できます。 ただし、スコープを制限する必要があり、ローカルスコープの変数を操作したい場合があります。
変数を見つけるのは簡単です。 それらの前に2つのダッシュがあります。 2つのダッシュ（–）を含める必要があります。
var()の構文は非常に単純です。
var(variable-name, value)
:root {
--light-gray: #eeeeee
--text-black: #434344
}
.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}
複数の場所で色を調整する代わりに、変数値は1つの場所で調整されます。
Webインスペクター（この場合はChrome）を使用すると、使用されている変数を検査および確認できます。
次の例では、最初に--light-grayおよび--text-blackという名前のグローバルカスタムプロパティを定義します。 var()関数が呼び出され、カスタムプロパティの値がスタイルシートの後半に挿入されます。
:root {
--light-gray: #eeeeee;
--text-black: #434344;
}
.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}
変数はCSSブレークポイントを操作するときに非常に役立つ可能性があることを言及する価値があります。 さまざまなブレークポイントでグローバルスコープの変数を使用することにより、パディングやその他の便利なスタイル設定などをさまざまなサイズにカスタマイズできます。
:root {
--gutter: 5px;
}
section {
padding: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}
ローカルスコープにある変数の例を次に示します。 これまではグローバルスコープについてのみ触れてきたので、物事がルートにないことに気付くでしょう。 これらは警告メッセージのスタイルです。 ここで宣言されている警告テキストの色は、このクラスでのみ役立ちます。 また、 calcも利用できることは注目に値します。
.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}
上記の例は、CSS変数の基本をカバーしています。 これらの概念は、カスタムWordPressテーマまたは作成するその他のカスタムCSSに適用できます。 変数には、単なるCSSに比べて利点があり、サイト全体の変更を行うときに効率的に作業するのに役立ちます。 プリプロセッサを必要とせずに、より適切に編成されたスタイルシートが可能になります。
次のステップ：プラグイン
開発者に最も推奨されるプラグインのリストについては、この電子ブックをダウンロードしてください。 これらのプラグインはすべて、使いやすく、サイトのパフォーマンスがそれほど高くなく、まったく信頼できることがわかりました。
この記事が好きですか？ 次のいずれかを試してください。
- CSSグリッドレイアウトを使用してカードレイアウトを作成する方法
- FlexboxグリッドとCSSグリッドを組み合わせて効率的なレイアウトを実現する方法
- Genesisの子テーマの簡単なカスタマイズ