WordPress 各種スタイルシート（CSS）出力一覧[まとめ]テーマ カスタマイズ プラグインなどの出力順 style.cssなど
本稿では、テーマや管理者用画面でのカスタマイズ、プラグインなどによって出力されるスタイルの種類と出力順について説明する。
前提
W3C標準のHTML 5.2ではbody内にstyleタグを書くことが認められることになったが、WordPressではシステム上、ヘッダ（headタグ）に統一されている。
ヘッダ（<head>）での出力
WordPress APIの関数「wp_head()」によって、各スタイルはテーマもプラグインもひとまとめに混在して出力される。
どの順番で出力されるか把握するのは困難で、それらを制御するのはもっと困難。
WordPress本体のスタイル
本来、ブログ全体のスタイルはテーマが決めるべきだが、WordPress本体のスタイルが出力されることがある。
特にWordPressバージョン5.2.x以降では、新規エディタ「Gutenberg」（ブロックエディタ）用のCSSファイル「style.min.css」と「theme.min.css」が自動的に＝勝手に挿入されてしまう。
さすがに、テーマのCSSより先に読み込まれるのでテーマ側のスタイルが上書きされてしまうことはないが、テーマの「functions.php」に自分でコードを書かないと削除できない。
add_action('wp_enqueue_scripts', 'dequeue_style');
function dequeue_style() {
wp_dequeue_style('wp-block-library');
wp_dequeue_style('wp-block-library-theme');
}
テーマのスタイル
いわゆる「style.css」の出力。
子テーマは親テーマの次につづけて出力されるようだが、各種プラグインのスタイルと混在している。
かならずしもテーマのスタイルが最初や最後とは限らないので、注意が必要。
管理画面の「追加 CSS」
現在のWordPressでは子テーマをつくらなくても、管理者用画面で現在のテーマにユーザー独自のスタイルを簡単に設定できる。
（左側メニュー） 外観 ＞カスタマイズ ＞追加 CSS
これは、さすがにテーマの出力のあとにstyleタグで直接書き出される。
idは「wp-custom-css」。
基本的には、headタグ内の最後になるらしい。
「カスタマイズ」のスタイル
テーマによっては、管理画面の「カスタマイズ」で手軽にデザインの一部を変更できるようになっている。
（左側メニュー） 外観 ＞カスタマイズ ＞色/背景画像など
これらは、テーマファイルの「functions.php」内の処理で、カスタマイズされたかを検知して出力される。
基本的には親・子テーマファイルのあと、追加CSSの前になるらしい。
投稿・ページ・ウィジェットでの書き込み
HTML 5.2からはbody内にstyleタグを書くことが正式に許可されたので、今後はこうした書き方が増える可能性もある。
プラグインのスタイル
ほとんどの場合、ユーザーが使わない場合でも自動で出力されてしまう。
しかも、ひとつのプラグインで1回の出力、1個のCSSファイルとは限らない.
どのタイミングでどのプラグインの出力があるか把握しづらいため、それをつくる側もいろいろな配慮が必要になる
削除方法
プラグインの.phpファイルを直接改変しなくても、WordPress公式APIの「wp_dequeue_style()」関数を使えば簡単に出力しないようにできる。
add_action('wp_enqueue_scripts', 'dequeue_style');
function dequeue_style() {
wp_dequeue_style($plugin_id);
}
出力されるCSSファイルのlinkタグやstyleタグのid属性には、プラグインのIDが書かれているので、そこから末尾の「-css」を取り除いたものを上記の$plugin_idに指定する。
<link rel='stylesheet' id='sample-css' href='http://site.oukasei.com/wp-content/plugins/sample-plugin/style/sample.css?ver=5.2.3' type='text/css' media='all' />
たとえば「sample-css」となっていた場合、「sample」を指定する。
なお、プラグインによっては「sample-css-css」となっている場合もあるが、あくまで最後の部分のみ取り除く。
まとめ
テーマやプラグインの側で安易に「!important」が使われていると非常に厄介なことになるが、WordPressではさまざまなスタイル出力が入り乱れている状態なので、自分がそれを使わざるをえない場面もある。
本来ならサイトのスタイルはひとつのCSSファイルにまとめるべきではあるものの、WordPressはその性質上、いくつものCSSファイルやstyleタグが出力される形になっている。
安易にあちらこちらに手を出すと収拾がつかなくなるため、基本的にスタイルは子テーマのstyle.cssか追加CSSにまとめるべきだろう。
一方で、使われないのに無駄に出力されるものも多く、それがまた混乱の元になる。
WordPress本体、特に管理画面で一括管理ができるようになるのが理想だが、それは難しそうなので、ふだんから不要なスタイルを個別に「functions.php」でのdequeueなどで削除するように心がけよう。