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

メディアクエリを書くときは、HTMLのheadもしくはCSSに記述する方法が一般的ですね。WordpressでHTMLの方法を使う場合は「header.php」もしくは「functions.php」のいずれかで設定する必要があります。

header.php

header.phpでは下記のようになります。

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

一方でfunctions.phpでは下記のようになります。

wp_enqueue_style('sp_style', get_template_directory_uri() . '/css/sp.css', array(), false, 'all and (max-width: 768px)');

header.phpからfunctions.phpへの記述に変えたとき、参考サイトがあまり見つからなかったのでまとめました。

CSSの「@import」や「@media screen and (〇〇-width: 〇〇px)」を使うときは意識していませんでしたが、ファイルを分けたときにはこの方法がよさそうです。