CSS 変数を追加して WordPress の子テーマをカスタマイズする方法

CSS カスタム プロパティとも呼ばれる CSS 変数を使用すると、CSS スタイルシートで簡単に再利用できます。

WordPress の子テーマを使用したことがある場合は、色やパディングなどの多くのスタイリングやオーバーライドを行っていることに気付くでしょう。 CSS。 CSS 変数はオプションであり、より高度になるにつれて、変数がどのように役立つかがわかるようになります。

これらは CSS プリプロセッサを置き換えることを意図したものではなく、最も一般的なのは SASS です。 多くのビルダーは特に大規模なプロジェクトに SASS を使用し、コア部分としての CSS 変数と共に、多くの高度なオプションを提供します。

ただし、以前にプリプロセッサを使用したことがある場合は、CSS を出力するためにコンパイルする必要があることをご存知でしょう。 そのため、このチュートリアルでは CSS 変数に焦点を当て、プリプロセッサの詳細については掘り下げません。

CSS 変数は満足のいく媒体であり、幸いなことに強力なブラウザー サポートがあります。 本番環境で CSS 変数を使用する前に、Can I Use をチェックして、必要なサポートがあることを確認してください。

CSS 変数は、プレーンな CSS を使用するよりも効率的ですが、SASS のような高度な設定は必要ありません。 ブラウザが「コンパイル」を行い、コンパイルされた CSS を出力する設定や環境に依存しません。

このアプローチは、単純な WordPress 子テーマのスタイリングなどに適したプロジェクトです。 このようなプロジェクトでは、ブランド化されたテーマを作成するためにスタイリングを更新する必要がある傾向があります。 CSS 変数は、スタイリング オーバーライドの管理可能なリストを提供し、SASS を CSS にコンパイルするための特別な環境を必要としないため、役立ちます。

Genesis Framework と StudioPress テーマを無料で入手！

WP Engine のお客様は、すべてのプランに標準で付属する一連のプレミアム WordPress テーマにアクセスできます! 月額わずか 20 ドルで次のサイトの構築を開始できます。 詳しくはこちら。

CSS 変数の使用方法

特定の色を使用してブランドを維持する場合、共通の要件の 1 つは、繰り返し使用できるブランド カラー パレットを用意することです。 毎回同じ色の値を入力するのは冗長です。 さらに、セット内のカラー値の 1 つを変更したい場合はどうすればよいでしょうか?

たとえば、青は少し暗くする必要があるかもしれません。 これは常に起こります。 はい、もちろん、信頼できる検索と置換があります。 ただし、このグローバルな変更を行い、変数を再利用する場合は、値を 1 か所で調整する方が効率的です。

CSS変数は次のようになります。

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

WordPress 子テーマのスタイルを設定するワークフローを効率化するため、変数をstyles.cssファイルに追加しました。 これは単なる「短いリスト」であり、さらに追加されると、各変数に効率的に名前を付けることが重要になります。

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

var() 関数

変数は実際にどのように使用されますか? とてもシンプルです。 最初に変数が宣言され、次に必要な CSS ルールセットで使用されます。

スコープは、知っておくべき重要なことです。 変数は、意図したスコープ内にある CSS セレクター内で宣言する必要があります。 多くの場合、グローバル スコープで変数を使用できるようにする必要があります。これにより、すべての変数にアクセスできるようになります。 グローバル スコープには、 :rootまたはbodyセレクターのいずれかを使用できます。 ただし、スコープを制限する必要があり、ローカルスコープの変数を操作したい場合があります。

変数を見つけるのは簡単です。 それらの前に 2 つのダッシュがあります。 2 つのダッシュ (–) を含める必要があります。

var()の構文は非常に単純です。

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

複数の場所で色を調整する代わりに、変数値は 1 か所で調整されます。

Web インスペクター (この場合は Chrome) を使用すると、使用されている変数を調べて確認できます。

次の例では、最初に--light-grayおよび--text-blackという名前のグローバル カスタム プロパティを定義します。 var()関数が呼び出され、カスタム プロパティの値がスタイルシートの後半に挿入されます。

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

CSS ブレークポイントを操作する場合、変数は非常に便利です。 さまざまなブレークポイントでグローバル スコープの変数を使用することで、パディングやその他の便利なスタイル設定などをさまざまなサイズにカスタマイズできます。

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

ローカル スコープで見つけることができる変数の例を次に示します。 これまではグローバル スコープについてのみ触れてきたので、ルートにないことがわかります。 これらは警告メッセージのスタイルです。 ここで宣言されている警告テキストの色は、このクラスでのみ有効です。 また、 calc利用できることに注意してください。

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

上記の例は、CSS 変数の基本をカバーしています。 これらの概念は、WordPress のカスタム テーマや、作成したその他のカスタム CSS に適用できます。 変数には単なる CSS よりも利点があり、サイト全体の変更を行う際により効率的に作業するのに役立ちます。 プリプロセッサを必要とせずに、より適切に編成されたスタイルシートを可能にします。

WP Engine で作成する自由を促進

WP Engine は、WordPress で作成する自由を強化します。 同社の製品は、すべての WordPress プロバイダーの中で最速であり、150 万のデジタル エクスペリエンスを支えています。 世界の上位 200,000 サイトの多くが、WordPress の他の誰よりもデジタル エクスペリエンスを強化するために WP Engine を使用しています。 wpengine.com で詳細を確認するか、今すぐ担当者にお問い合わせください。