CSSを条件分岐して整頓

正しいCSSの読み方

今までhead内に記述していたが、記述が方法は本来functionsで読み込むことが推奨されていると知る。

そして、PageSpeed Insightsで、CSSファイルが読み込みに時間がかかっていると分かり、修正に取り掛かる。

クリティカルなCSS

始めに表示されるCSSだけ読み込むものだけ、抽出するツールがあるらしい。

この情報を知り、そもそも自分のCSSについて見直す。

今まで、style.cssとsmall.css（モバイル表示）の二つで全てのCSSをまとめていたので、全てを読み込む必要のないページにまで負担をかけていた。いつの間にか大きくなったCSSを今回見直すことにした。経過を備忘録として残す。

ページごとにCSSを分割

common.cssのように必要なものだけとなるよう、style.cssを整頓。
各CSSにモバイルとPC表示を記述。
functions.phpに条件分岐を記述。

という順序で進む。

style.cssを整頓

こういう時に思うのは、きちんと記述・整頓しておくべき。分かりやすい名前でないと、どこのCSSか分からないので作業が滞りやすい。不明なCSSがいくつか出てきた。反省。

各CSSにモバイルとPC表示

style.cssとsmall.cssの2つだけ分けてきたが、ページ別CSSとなるので、ページ別に表示を分けた。

functions.php

一番時間がかかったところ。記述ミスだったり、重複したりと振り返ればなんてことない作業が、大変。

説明が一番わかりやすかったサイト。

ただ、実際の記述はresisterなどは不要で、シンプルになった。

入力していくうちにようやく分かった。要は、wp_enqueue_styleを使ってCSSを指定して、最後関数で呼び出す、とぼんやりと理解した。初心者なので、詳細まで理解しきれず、余計に時間がかかる。

さらにページごとで条件分岐をするために、

ifとelseifでつないでいく感じで。

ページ指定は全てIDでないと指定できなかった。また、複数の固定ページを指定する場合は、arrayを用いるとも学ぶ。

結果

function add_stylesheet(){
	wp_enqueue_style( 'stylecss', get_template_directory_uri() . '/css/style.css');
	
	if ( is_page( array( '3487','3490' ) )  ){
		wp_enqueue_style( 'portfoliocss', get_template_directory_uri() . '/css/portfolio.css' );
		
	}elseif ( is_single() || is_category() ){
		wp_enqueue_style( 'singlecss', get_template_directory_uri() . '/css/single.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );