Wordpress Redux Frameworkのメディアクエリ

Question

私は探していたがまだ答えが見つかりませんでした。私の質問は次のとおりです：

1. メディアクエリーの中でダイナミックCSSを出力するにはどうすればいいですか？私の考えでは、wordpress redux-frameworkのCSS出力は、グローバルに（コンパイラ/インラインスタイルの両方で）書かれており、すべての画面サイズに影響を与えます。

2. メディアクエリでredux-frameworkの動的CSSを出力する簡単な方法は何ですか？

Answer 1

これはテストしていませんが、大まかなスタートが必要です。 複数のフィールドを使用することもできます（例：480,768,991など）。wp_add_inline_styleでコードを出力するだけです。

function my_custom_css(){ 

//get the theme option 
$option = get_option('opt_name'); 

// get the fields holding the custom css for each media query 
$media_991_css = $option['css991']; 
$media_768_css = $option['css768']; 
$media_480_css = $option['css480']; 

// store the values in a variable 
$output = "@media screen and (max-width: 991px){" . $media_991_css . "}"; 
$output .= "@media screen and (max-width: 768px){" . $media_768_css . "}"; 
$output .= "@media screen and (max-width: 480px){" . $media_480_css . "}"; 

// output it with wp_add_inline_style 
if(!empty($output)){ 
     wp_add_inline_style('style',$output); 
    } 
} 

add_action('wp_enqueue_scripts','my_custom_css'); 

もちろん、適切なエスケープを確保する必要がありますが、これで必要なものが得られます。