WordPress子テーマ、CSSを複数設定する簡単な方法

なんで簡単かというと、基本的にはコピーして貼り付けるからです。でもここにソースコードをそのまま書いてあるわけではありません。それだと特定のテーマにしか対応できないので。

あなたが今使っているテーマで利用できるよう、方法を書いているので参考にしてみてください。

この記事を書いたきっかけ

WorePressのテーマを子テーマ化する方法は検索すれば沢山でてきます。しかし、多くの情報はCSSファイル1つだけ(style.css)にしか対応していません。

WordPressは非常に多くのテーマがありますが、人気テーマや、今もちゃんと更新されているテーマに絞れば十数個になります。よく聞くものであれば、「Twenty系」「Stinger系」「Simplicity」「賢威」などでしょうか。

有名テーマの中にはstyle.css以外にもdesign.cssやlayout.cssなどCSSが複数あったり、別のフォルダに入っていることもあります。それらを子テーマとしてカスタマイズするには、子テーマ化する時に一手間必要です。この方法を知らないと、style.cssだけしか子テーマとしてカスタマイズできないので、良いテーマがあっても使えないという問題が起きてしまいます。

その問題にきっちりとハマってしまった私が、かなり楽な解決策を見つけたので載せておきます。

 

おさらい:子テーマについて

子テーマとは何か

子テーマとは親テーマの機能やデザインを引き継ぐためのものです。テーマに含まれるファイルを直接書き換えてカスタマイズしていると、テーマをアップデートした時にカスタム部分が全部リセットされてしまいます。

この場合、アップデートする回数だけ書き換え作業が発生してめちゃくちゃ面倒です。エラーの原因にもなります。

子テーマ化しておくと、親テーマをアップデートしても子テーマはリセットされません。だからアップデートしてもファイルを書き換える作業が不要になります。非常に便利です。

テーマをカスタマイズするなら最初に子テーマ化することオススメします。

 

一般的な子テーマ化の方法

テーマ「Simplicity」で説明すると、フォルダ「Simplicity」と同じ階層に「Simplicity_child」(別の名前でもいい)というフォルダを作ります。そのフォルダの中に機能やデザインを引き継ぐために必要なファイルを入れ、function.phpを作成して親テーマを引き継ぐようにソースコードを書けば子テーマ化できます。

必要なファイルは最低限をコピペすればいいし、function.phpのソースコードは数行です。子テーマ化したテーマをダッシュボードで選べば、子テーマでカスタマイズした内容が反映されます。

一般的な子テーマ化の方法はここでは本題じゃないので、詳しくは他をあたってください!すんません!

 

最小構成はたった2つのファイル

子テーマのフォルダには最低限2つのファイルがあれば機能します。style.cssとfunction.phpです。親テーマのフォルダを全てコピーする必要はありません。

style.cssは親テーマからコピペして、一番上の数行を変更して、必要な箇所(デザインをカスタマイズした箇所)を残して他は消す方法がシンプルでオススメです。

function.phpは上でも書きましたが数行のソースコードです。読み込むファイルの指定と読み込みを実行します。

 

@importantは古く、今はwp_enqueue_styleが主流

WordPressは日々進化しています。以前、子テーマの設定方法は@importantを使うものが主流でしたが、今はwp_enqueue_styleが推奨されています。子テーマを調べている時に@importantを使っている場合、情報が古いかもしれないので注意してください。

ただしテーマによってはwp_enqueue_styleに対応していないものもあるようです。有名どころは大抵使えるのでそんなに気にしなくてもいいと思います。

 

分からないなら子テーマ化しなくてもいいと思う

カスタマイズするなら子テーマ化するのがオススメだと上で書きましたが、必ずしなければならないというわけではありません。何だかんだ言っても人によっては難しいですからね。

子テーマ化すれば後になって困ることが少ないですが、ほとんどアップデートされないテーマなら、子テーマ化せずにカスタマイズするのも1つの手です。

ただし、子テーマ化をせずにカスタマイズしていると、アップデートした時に変更した箇所がリセットされるということは知っておいてください。テーマのアップデートが問題です。WordPressのバージョンアップやプラグインの更新は基本的に問題ないです。

 

本題:子テーマで複数のCSSを設定する方法

準備:まずテーマごとの構造、ファイルを把握する

最初にするのは、使っているテーマの構造と各ファイルの役割を把握することです。

テーマフォルダの直下にカスタムしたいファイル(例えばstyle.css)があり、そのファイルだけでカスタマイズができるなら簡単です。そもそもこの記事を見てないですよね?

テーマによってはCSSファイルが複数あり(style.css、design.css、layout.css、mobile.cssなど)、それらがテーマフォルダの直下になかったりします。フォルダ「css」や「asset」の中にあったりね。

これらの構造を把握して、「どこの、どのファイルを引き継ぐか」を決めます。構造を100%把握するのは難しいので、ファイルの場所とファイル名が分かればOKです。

 

方法:親テーマのfunction.phpのソースコードをパクる

子テーマ化するためにはfunction.phpを正確に書く必要があります。CSSファイルが複数ある場合、その数だけきちんと記述しなければなりません。子テーマとして読み込みたいCSSファイルの数だけfunction.phpにソースコードを足していきます。

私はここでハマりました。function.phpのルールが細かくて、wp_enqueue_styleのパラメータの正確な指定ができませんでした。ハンドル名、ディレクトリやファイル名の指定、どことどこを同じ文字列にしないといけないのか…調べてもこれだ!という情報が見つからないし…

ここで私は閃きました。「動いているものをパクろう」と。

そうなんです。親テーマのfunction.phpでCSSファイルを読み込んでいる箇所が必ず存在しているんです。function.phpを「wp_enqueue_style」で検索すればいくつか出てくるはずです。そこに書いてあるソースコードをコピーして、子テーマのfunction.phpに貼りつけます。

ただし2点だけ注意するポイントがあります。

 

注意1:get_template_directory_uri()とget_stylesheet_directory_uri()の違い

get_template_directory_uri()は親テーマと子テーマで動作が変わります。

get_template_directory_uri()は、親テーマのfunction.phpでは自分のテーマディレクトリを取得しますが、子テーマのfunction.phpでは親テーマのテーマディレクトリを取得します。(親テーマは子テーマフォルダのstyle.cssで設定します)

get_stylesheet_directory_uri()は親テーマ、子テーマのどちらでも、自分のテーマディレクトリを取得します。

 

注意2:CSSファイルを読み込む順番

最初に親テーマを読み込むようにして、その下に子テーマを読み込むようにソースコードを書きましょう。後に読み込んだ設定が有効になるからです。

順番が逆だと、子テーマの設定を読み込んだのに、その後で読み込んだ親テーマの設定が有効になってしまいます。

 

確認:CSSファイルの設定や変更が反映されたかチェック

CSSをよくカスタマイズする人なら知っていると思いますが補足しときます。CSSを正しく設定・変更しても、表示に反映されないことがあります。その原因はキャッシュである可能性が高いです。

キャッシュをクリアして画面に反映させる方法はOSやブラウザによって違いますが「Shiftキー+F5」、「Ctrlキー+F5」であることが多いです(F5は普通の更新)。できなかったらこのページを参考にどうぞ。

正しくカスタマイズできているのに画面に反映されないのは最悪です。なぜなら正解しているのに間違いだと思ってしまうから。一度間違いだと思ったことをもう一度やって正解に気付くのはめちゃくちゃ難しく時間がかかります。CSSカスタマイズあるあるなので気をつけましょう。

 

まとめ:色んなテーマを子テーマ化できると便利

自分で1からサイトを作る場合はテーマの選択からできますが、すでにあるサイトを編集する場合はテーマを変更することができないケースが多いです。自分が経験したことのないテーマかもしれません。

もしそのテーマで複数のCSSファイルをカスタマイズする必要があった場合、style.cssしか子テーマ化できないというのは厳しいです。子テーマ化できるのと子テーマ化できないのでは後々の管理に大きな差が出てきます。

私も今回の件で勉強になりました。この情報があなたの役に立てれば嬉しいです。

 

Page Top