WordPressをカスタマイズしていると、子テーマを編集するように指示されることがよくありますよね。
どうして親テーマじゃだめなのか？そもそも子テーマって？あなたはきちんと理解していますか？
また、外観→カスタマイズ内にある 追記CSS との違いはわかりますか？
今回は、CSSを追加できる3つの場所「親テーマ」「子テーマ」「追加CSS」それぞれの特徴とメリット・デメリットをまとめてみました。
親テーマ
親テーマとは、基本的なデザインや機能がはいっている土台となるテーマのことです。
テーマのアップデートがあるとこの親テーマが書き換えられます。
親テーマにCSSを追加するメリット
[aside type="boader"]
- 直接編集なので、楽
[/aside]
子テーマを導入する必要がなく、テーマをアップロードしたらそのまま編集すればよいので楽です。
特にもともとWordPressに入っているテーマや、子テーマが配布されていないテーマのときは大きなメリットですね。
親テーマにCSSを追加するデメリット
[aside type="boader"]
- テーマのアップデートがあると編集箇所が消えてしまう
- ミスしたときに、バックアップを取っていないと消えてしまう
[/aside]
自作のテーマでない限り、バグの修正や機能の追加があると最新版へのアップデートが必要になります。私の愛用しているWordPressテーマ「STORK（ストーク）」でも、先日約7か月ぶりにアップデートがありました。
このとき、親テーマを直接編集した状態でアップデートすると、今までのカスタマイズが消えてしまいます。
バックアップをとって、アップデート後にカスタマイズ箇所を元に戻す……といった対処法がありますが、非常にめんどくさいです。
また、デザインの土台となっているのが親テーマです。そのためミスがあると、普通に消えてしまいます。
子テーマ
子テーマは親テーマと紐づけられており、親テーマが読み込まれてから子テーマが読み込まれます（function.phpで記述が必要ですが、基本的に配布されている子テーマはこの処理がされています）。
CSSは最後に読み込まれたものが反映されます。
たとえばh2をカスタマイズしたい場合、子テーマのCSSにコードを追加すれば後に読み込まれて反映されるわけです。このように、主にカスタマイズするときに役に立ちます。
[aside type="normal"]余談
CSSとは別の話になりますが、子テーマにphpファイルをコピーして編集するとこちらが読み込まれるようになります。ただし、子テーマのfunction.phpは親テーマのものに追加されて読み込まれます。子テーマについてもっと詳しく知りたい人は「子テーマ - WordPress Codex 日本語版」を読んでみてください。[/aside]
子テーマにCSSを追加するメリット
[aside type="boader"]
- 親テーマのアップデートの影響を受けない
- 親テーマにデザインの土台があるので、ミスしても消せば元通りになる
[/aside]
親テーマのアップデートにあわせて、いちいち修正する必要はありません。一度子テーマを導入してしまえば、他に気にすることはないのです。
親テーマは基本的なデザインや機能がはいっている土台であると説明しましたが、その土台に紐づけられているためミスしたとしても消せばOK。
子テーマにCSSを追加するデメリット
[aside type="boader"]
- 親テーマから情報を引っ張ってくるため、表示速度が低下する。
[/aside]
私が考える、子テーマを使用する最大のデメリットは表示速度の低下です。
参考になる記事がありましたので、引用させていただきます。
親テーマからHTMLやCSS,PHPやjavaScriptの情報を取得しているため、その間は基本的にページを読み込むのが止まります。
そのためブログそのものの表示が遅れるので、しっかりと知識をもって対応できない場合は確実に表示速度が下がると言えます。これは親子関係のあるテーマでは推奨される使い方ではありませんが、子テーマではなく親テーマを直接使用したほうが表示速度は上がります。
なので「HTMLやCSSはわからないから一切さわらないよ！」という人は、子テーマなんぞ使わずに親テーマを使ったほうが100％表示速度が上がりブログが高速化します！
引用：WordPress高速化！ 表示速度90超になるための方法や導入プラグイン ｜ ぽよまる.com
追加CSS
WordPress バージョン 4.7からカスタム CSSという機能が追加されました。これが外観→カスタマイズの一番下にある「追加CSS」です。
ソースを見てみると、追加CSSはヘッダー内に直接書き込まれるようになっているようです。つまりインライン化しています。
親テーマ・子テーマはそのCSSファイルを呼び出して読み込んでいるので、ガラッと異なる特徴がありますね。
追加CSSにCSSを追加するメリット
[aside type="boader"]
- 直接編集なので、楽
- カスタマイズ画面から編集するので、リアルタイムプレビューできる
- 親テーマのアップデートの影響を受けない
- 親テーマにデザインの土台があるので、ミスしても消せば元通りになる
[/aside]
はい、追加CSSはいいとこどりなんです！！
子テーマを導入していないWordPressにもともと入っているテーマで試してみましたが、きちんと反映されました。テーマをアップデートしても設定はそのまま引き継がれたので、アップデートの影響を受けないことも確認済みです。
そして最大のメリットはリアルタイムプレビューができる点です。
親テーマや子テーマに追加すると、別でソフトを使用していない限りいちいち更新して確認する必要がありました。しかし、カスタマイズ画面でいじれるのでそのままデザインの確認が可能なんです。これすごいですよね……。
追加CSSにCSSを追加するデメリット
[aside type="boader"]
- テーマを変更すると反映されなくなる（親テーマから子テーマへの変更もしかり）
- 推奨されてるものではない
[/aside]
追加CSSはテーマに対しての記述なので、テーマが変わると消えてしまいます。親テーマの追加CSSにコードを書いたあとで、その子テーマを有効化した場合も同様。ただし、また親テーマを有効化すればコードは残っているので、それをコピペすれば反映されます。
少し手間がかかるくらいなので、ほとんどデメリットではないですよね。
ただ、ヘッダーにスタイルを書くことは実は推奨されていません。HTML・CSS・Scriptは分離させるべきだとGoogle HTML/CSS Style Guideでも言われています。
参照：Google HTML/CSS Style Guideを全部日本語に訳してみた【HTML編】 | ぶちねこどっとうぇぶ
おわりに：追加CSS最強説を唱えたいが、めんどくさい親テーマ直接編集が実は一番良いかもしれない
今まで「親テーマに直接編集は危険！子テーマ一択だ！」と思っていましたが、ブログ高速化をすすめていくうちに子テーマに対して疑問を感じていました。
そこでWordPressの機能「追加CSS」について詳しく調べてみると、メリットしかなかった……というお話です。
ただ推奨されているやり方ではない……。
一番めんどくさいですが、こまめにバックアップをとりながら親テーマを編集することが良いのかなと思いました。
[aside type="boader"]
- ルールに従いたいし高速化もしたい→親テーマ（めんどくさい）
- 高速化を捨てる→子テーマ（簡単）
- ルールを捨てる→追加CSS（簡単）
[/aside]
という認識で良いと思います。
今までなんとなく子テーマを使っていた人や、逆になんとなく追加CSSを使っていた人は、改めてそれぞれの特徴を知っておいてください。調べてみると、面白いですよ♪
というわけで、今までカスタマイズ記事では子テーマを推奨していましたが、追加CSSや親テーマ直接編集という選択肢もあることを追記していきたいと思います。