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