「メディアクエリ」は「①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を分割する方法に切り替えると、より実務に近づきますよ!