Everyday is like Sunday

毎日がまるで日曜日

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本

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

[閉じる]