WordPressのデフォルトテーマTwentyTwelveでは、プラグインのcssファイルだけではなくテーマそのもののcssファイルも、header.phpの<?php wp_head(); ?>で読み込むように設定されています。しかし、これをやめて、cssファイルへのリンクをheader.phpに直に書くことにしました。
いろんなものがwp_head();で読み込まれています。
TwentyTwelveでは、header.phpの<?php wp_head(); ?>が実に様々なものが読み込んでいます。
[img-link url=”https://webshufu.com/what-wp_head-displays-in-head-element/” title=”【WordPress TwentyTwelve】wp_head();がhead要素内に吐き出すHTMLとその除去法｜Web Shufu”]
このときは、CSSファイルへのリンクを「除去すると表示が崩れます。」と言いましたが、今回は表示に不具合が出ないよう、除去します。
CSSファイルを読み込む設定
[img-link url=”https://webshufu.com/wordpress-twentytwelve-header-php-3/” title=”【WordPress TwentyTwelve】header.phpはcssをwp_head()で読み込んでいる｜Web Shufu”]
この投稿で説明しましたように、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も一生懸命勉強するぞ。オー。