子テーマのCSSを読み込む
2018.05.16

子テーマのCSSを読み込む

WordPressテーマを検索して、このテーマいいな!と思い購入し、自分好みにテーマをカスタマイズしホッと一息。。。数日後にWordPressアップデートがあるな~プラグインだろうな~てな調子でテーマも含むと知らず更新をポチっ・・・カスタマイズ内容が上書きされるといった経験をした方がみえるかもしれません。そうならないように対処する方法としては、子テーマを作成し、それをカスタマイズすると問題を回避できます。

子テーマを使用するメリット

  • テーマアップデートによるカスタマイズ箇所の消失を防げる
  • 使用することで開発の時短

子テーマのCSSが読み込めない…

ただ、子テーマを作成しても、子テーマ内にあるCSSを読み込むことができません。子テーマのCSSを読み込むにはどうしたらいいか。。。

WordPressは子テーマの後に親テーマのCSSを読み込む処理をしています。この場合は子テーマのCSSが親テーマのCSSに上書きされ正確に反映されない場合があります。
以下のソースを子テーマ内のfunctions.phpに入力すると「親テーマのCSS」→「子テーマのCSS」の順番で読み込むことができます。

4行目のget_template_directory_uri()は子テーマを使用している場合、親テーマのルートディレクトリのURIを返します。

6行目のchild-styleはIDになりますので、重複しない名前を任意に指定してください。このIDが出力したとき以下のように-cssが付加されて表示されます。

7行目のget_stylesheet_directory_uri()は子テーマを使用している場合は子テーマのスタイルシートディレクトリの URI を取得します。

7行目の/style.cssの部分は子テーマのルートになりますので、ライブラリ内にあるCSSを指定する場合は以下のようになります。

REFERENCE