web-dev-qa-db-ja.com

 テーマに異なる配色を実装する方法

この質問はテーマ開発者向けです。

設定APIを使用して入力データを収集する方法はわかっていますが、スタイルを含めるのに最適な方法は何かと思いました。

それぞれ4〜5バージョンのデザインがあり、それぞれに独自のCSSルールと画像があります。オプション：

  1. あなたはすべてのCSSをstyle.cssに詰め込み、ボディクラスを通して色の変更を引き起こします。この場合、ブラウザに使用されていないCSSルールと画像をロードさせるようにします（選択されたオプション： "red"、そして "blue"、 "green"のルールもあります）。

  2. バリアントごとに別々のスタイルシートを作成し、選択したスタイルをページにエンキューします。 1つのCSSファイルを変更すると、他のすべてのファイルも修正する必要があるため、これによってテーマの維持が困難になる可能性があります。

  3. バリアントごとに別々のスタイルシートを作成しますが、追加のカラースタイルのみを使用してください。そこで、大きな "common.css"ファイルと選択した配色のCSS（小さいサイズ）をエンキューします。ここで追加のHTTPリクエストを行います。

  4. ？

cssstylesheetstyles
3
Alex

私はすべての一般的なCSSをテーマのstyle.cssに入れて、カラーオプションのために別々のスタイルシートを作成します。

私はまた、そのスタイルの画像と一緒に自分のフォルダに色のオプションを入れるでしょう。こうすることで、カラーオプション間でファイル名を同じにして、コードの保守を少し簡単にすることができます。

common.cssからstyle.cssを分離したい場合は、それを別々にキューに入れる代わりにcolorオプションのシートから@import common.cssを入力することができます。

3
Evan Mattson

あなたは _ less _ を使うことができます！グローバルスタイルシートと各色に1つずつ定義します。カラーシートにカラーコードの変数を設定してグローバルシートで使用してから、グローバルスタイルシートを各カラースタイルシートにインポートします。

例：

global.less

body{
    background: @bgColor;
}

赤

@bgColor: red;

@import "global.less";

それはあなたに1色につき1つの独立したスタイルシートを与えるので、あなたはオプション2に行くことができますがまだ1つのスタイルシートだけを維持します！すべてのオプションの利点のすべてを組み合わせることで、不利な点は一切ありません:)

0
kalarzo