【WordPress】wp_enqueue_styleでメディアクエリを指定する

「メディアクエリ」は「①HTML（head部分）」もしくは「②CSS」に書き込む方法が一般的です。

例えば、①の方法でスタイルをデバイスごとに分けている場合は、特に役に立ちます。②で取り入れたいという人もOK。

どちらの場合も「HTML（head部分）」でメディアクエリを指定の上、出力したい！ということであれば、読み進めて問題ありません。

ご紹介するのは「header.php」と「functions.php」で指定する方法。

コード内にあるname_style、/css/rename.cssについては、ご自身の環境に合わせて変えてください。

より詳しいコードの書き方は、以下の記事をご覧ください。

2022.03.22

1 「header.php」で指定
2 「functions.php」で指定（推奨）
3 おわりに

「header.php」で指定

「header.php」では以下のようになります。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/rename.css" media="screen and (max-width: 768px)">

「functions.php」で指定（推奨）

コメントアウトで囲まれた部分がメディアクエリを適用したコードです。

「functions.php」では以下のようになります。

<?php
    function enqueue_name(){
        // ここから
        wp_enqueue_style('name_style', get_template_directory_uri() . '/css/rename.css', array(), '1.0.0', 'screen and (max-width: 768px)');
        //　ここまで
   }
    add_action('wp_enqueue_scripts','enqueue_name');
?>

第5引数でメディア属性を指定。指定しない場合は、初期値のall（すべて）が適用されます。

その他、screen（画面）、print（印刷）などが指定できます。

既に<?php ?>で囲まれていたり、wp_enqueue_scriptsで実行させているコードがあるときは、重複しないようご注意ください。