【 更新 】おすすめ記事はこちら

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

「メディアクエリ」は「HTML(head部分)」もしくは「CSS」に記述する方法が一般的です。

WordPressで前者の方法を使うときは「header.php」もしくは「functions.php」のいずれかで設定します。例えば、記述が長くなるためデバイスごとにファイルを分けたいときなどに採用します。

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

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では下記のようになります。

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

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

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