wordpressでcssを追加するときは、＠importではなくて関数を使う

wordpressのstyle.cssってはじめからたくさん書かれていて、自分で追加変更するスタイルは、別ファイルにしたいなと思った。

んで、検索すると、@importを使ってcssを読込むといいよ。なんて記事がすぐにみつかる。

はじめからあるstyle.cssに

@import url('xxx.css');

て書いて読込むやつね。

だけど、@importを使うと、パフォーマンスが悪くなったり、挙動がおかしくなるらしい。[css] @importを使うべきでない理由 | Screw-Axisというのを昔見た事を覚えていたので、他に方法があるだろうと調べていたら見つけた。

その方法は、wordpressに用意されている関数を使う方法。
使う関数は

wp_enqueue_style

wp_enqueue_styleってのは、cssスタイルファイルを追加する関数
関数リファレンス/wp enqueue style - WordPress Codex 日本語版

使い方はこんな感じ

wp_enqueue_style( $handle, $src);

自分的にわかるように書くと

wp_enqueue_style(任意のハンドル名、cssのurl)

例えば、twentytwelveテーマを利用してて、追加するcssファイルをmycss.cssとした場合。twentytwelveのテーマディレクトリにmycss.cssファイルを置いて、

/* css追加 */
function add_mycss() {
       $cssurl =WP_CONTENT_URL.'/themes/twentytwelve/mycss.css';
        wp_enqueue_style('mycss',$cssurl);
    }
}
add_action('wp_print_styles','add_mycss');

ってのをfunctions.phpに書いてあげればOK。

すると、 <link rel='stylesheet' … って感じでcssが追加される。

伊藤園 1日分の野菜 200ml×24本