WordPress 各種スタイルシート（CSS）出力一覧[まとめ]テーマカスタマイズプラグインなどの出力順 style.cssなど

2019 年 9 月 29 日2019 年 10 月 1 日

本稿では、テーマや管理者用画面でのカスタマイズ、プラグインなどによって出力されるスタイルの種類と出力順について説明する。

Contents

1. 前提
2. WordPress本体のスタイル
3. テーマのスタイル
4. 管理画面の「追加 CSS」
5. 「カスタマイズ」のスタイル
6. 投稿・ページ・ウィジェットでの書き込み
7. プラグインのスタイル
8. まとめ

前提

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に指定する。

&lt;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' /&gt;

たとえば「sample-css」となっていた場合、「sample」を指定する。

なお、プラグインによっては「sample-css-css」となっている場合もあるが、あくまで最後の部分のみ取り除く。