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

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

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

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

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

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

コード内にあるname_style/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」では以下のようになります。

<?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で実行させているコードがあるときは、重複しないようご注意ください。

おわりに

冒頭の例のようにスタイルをデバイスごとに分割して(sp.cssなど)読み込ませていた時期がありました。

記述も「header.php」にまとめていたので、正式且つ管理しやすい「functions.php」に変更。

その際、第5引数まで書かれた参考サイトが見つからなかったので、記事にしました。

メディアクエリはCSSで指定することが多い、というのも記事が少ない理由かもしれません。

今回の方法は、ひと目で適用中の画面サイズが分かるので「WordPressビギナー」や「ファイル管理が苦手な人」におすすめ。

操作に慣れてきたら@importでCSSを分割する方法に切り替えると、より実務に近づきますよ!