WordPressのデフォルトテーマTwentyTwelveでは、プラグインのcssファイルだけではなくテーマそのもののcssファイルも、header.phpの<?php wp_head(); ?>で読み込むように設定されています。しかし、これをやめて、cssファイルへのリンクをheader.phpに直に書くことにしました。

いろんなものがwp_head();で読み込まれています。

TwentyTwelveでは、header.phpの<?php wp_head(); ?>が実に様々なものが読み込んでいます。

このときは、CSSファイルへのリンクを「除去すると表示が崩れます。」と言いましたが、今回は表示に不具合が出ないよう、除去します。

CSSファイルを読み込む設定

この投稿で説明しましたように、function.phpの以下の部分が、TwentyTwelveテーマそのもののcssファイルを<?php wp_head(); ?>で読み込む設定をしている部分です。

function twentytwelve_scripts_styles() {
    ………………………………………………………………………………
    …………………………（中略）…………………………………………
    ………………………………………………………………………………
    /*
     * Loads our main stylesheet.
     */
    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

    /*
     * Loads the Internet Explorer specific stylesheet.
     */
    wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
    &wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

関数wp enqueue style()が、2枚のスタイルシートを<?php wp_head(); ?>で読み込むための設定をしています。

2枚のスタイルシートとは以下の2枚です。

• ～/themes/twentytwelve/style.css
• ～/themes/twentytwelve/css/ie.css

wp_dequeue_styleでcssの読み込み設定を取り消し

この2枚のスタイルシートを<?php wp_head(); ?>で読み込むための設定を止めるには、wp enqueue styleを打ち消すための関数wp_dequeue_styleを使います。

function twentytwelve_scripts_styles() {
………………………………………………………………………………
…………………………（中略）…………………………………………
………………………………………………………………………………
/*
 * Loads our main stylesheet.
 */
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

/*
 * Loads the Internet Explorer specific stylesheet.
 */
wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
&wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );

/*****「消す」ここから***/
wp_dequeue_style('twentytwelve-style');
wp_dequeue_style('twentytwelve-ie');
/***「消す」ここまで****/

}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

これで、<?php wp_head(); ?>はTwentytwelve本体のCSSファイルを読み込まなくなります。

あとは、header.phpの<?php wp_head(); ?>の直前または直後に以下のようなcssファイルへのリンクを直に書きましょう。

<link rel='stylesheet' id='twentytwelve-style-css'  href='<?php echo get_stylesheet_uri(); ?>' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='<?php echo get_template_directory_uri() . '/css/ie.css'; ?>' type='text/css' media='all' />
<![endif]-->

何の為

こんな面倒くさいことをやったのは、とある依頼でカテゴリーごとに細かくスタイルシートを出し分ける必要が出てきたためです。

WordPressは年々進化していくのですが、その分面倒な作業も増えてきたような気がします。

ついていくのが大変です‥というかすでに落伍気味です。

3.6も一生懸命勉強するぞ。オー。