wordpress-theme の style-colors を theme-options で設定したいと思います。私の問題は、テーマオプションの色の値をCSSに取得するにはどうすればよいですか? theme-options の値が保存されている場所はわかっていますが、これを CSS に接続するにはどうすればよいですか?
3 に答える
PHP を使用して、テーマ オプションが変更されるたびに CSS ファイルを作成します (CSS キャッシュ)。
CSS をコンパイルするLessや Sassなどの CSS プリプロセッサを利用することもできます。
WP オプション API を使用していると仮定した場合のサンプル コード:
$theme_options = get_option('my_theme_options'); // previous hash $oldHash = get_transient('my_theme_options_hash'); // hash representation of your current theme options $currentHash = md5(var_export($theme_options, true)); // compare hashes and regenerate if necessary if($oldHash !== $currentHash){ // compile/write your CSS to a file here // update hash and make it expire after 14 days set_transient('my_theme_options_hash', $currentHash, 60 * 60 * 24 * 14); }
テーマ ヘッダーにインライン CSS コードを挿入します。
<style> <![CDATA[]]> body{ background-color: <?= get_option('my_theme_color'); ?>; } ]]> </style>
(最悪の選択肢)スタイルシートを、出力する PHP スクリプトに変換します
text/css
。ユーザーページのリクエストごとに、サーバーに WordPress を 2 回実行させることになるため、これは良くありません。基本的な WP コンポーネントのみをロードするスクリプトを呼び出すこともできますが、それでも静的 CSS を使用するよりも遅くなります。
これは素晴らしい質問です。
NetTuts には、ブラウザーをだまして CSS ファイルを PHP として解釈させる方法を説明するチュートリアルがあります。したがって、たとえば、CSS 内で PHP を使用して色変数を読み込むことができます。
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/
そして、次のようなものを使用できるようになります。
$font: arial, sans-serif;
$main-color: #3D7169; $secondary-color: #000;
h1 {
font: 200% $font;
color: $main-color;
}
p {
background: $secondary-color;
color: $main-color;
font-family: $font;
padding: 10px;
}
Style.css を Style.php に変更すると、動的な CSS を使用できます。
あなたが質問している場合、それは可能ですか?
はい、そうです。ここに、それを使用する方法とその他の利点と使用方法を示す良いリファレンスがあります.