ワードプレスをカスタマイズする時は子テーマが便利

ワードプレスをカスタマイズする時は子テーマが便利

 ワードプレスのテーマを自分好みにカスタマイズする時にはテーマ中のcss部分やhtml部分を修正することがあると思いますが、テーマのアップデートが来た時にうっかりバックアップなしで更新してしまうと綺麗にバージョンアップされてせっかく編集した自分のオリジナルコードがなくなっちゃったなんていう悲しい経験をしたことがある人はいますかね?
私は以前やってしまった経験がありますw 最初は対策としてテーマのバックアップを取ってアップデートしてオリジナル部分だけを丁寧にまた書き直すというすごく面倒なことをしていましたが、とにかく面倒でもっと楽な方法ないかーと思っていましたが子テーマを作ってしまうという素晴らしい対応策があったのでメモっておきます。

目次

子テーマを用意する

 子テーマというのはメインで使用している親テーマをカスタマイズする際、修正専用のファイルを別に用意して紐付けすることで親テーマのアップデートをしてもカスタマイズしたファイルがそのまま残ります。その手順をメモっておきます。 twentysixteenというテーマを使用していたので twentysixteen-childという子テーマを作成しました。

1.子テーマ用のフォルダを作る

 親テーマと同じディレクトリwp-content/themesに子テーマ専用のフォルダを作成する。
 フォルダの名前は twentysixteen-child

2.twentysixteen-childの中にファイルを用意する

子テーマに必要なファイルを作ります。

  • style.css
  • functions.php

【style.css】

/*
 Theme Name:    twentysixteen-child
 Template:     twentysixteen
*/

style.cssに必要な情報は子テーマの名前と、親テーマの名前の定義です。これさえ記入すれば動きます。
functions.phpには以下のコードをコピペ
【functions.php】

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
?>

3.子テーマを適用する

 先ほど作成したstyle.cssとfunctions.phpの入った twentysixteen-childフォルダをアップロードするとダッシュボードでテーマを見ると新しく作成した子テーマが追加されています。これで準備は整ったのであとは好きに子テーマのstyle.cssファイルをいじってデザインをカスタマイズしちゃいましょう!

4.テンプレファイルも変更できる

 ここまではstyle.cssのファイルだけ修正をするというものでしたが、スタイルシートだけでなく、親テーマのテンプレートファイルもカスタマイズしたい!という場合にはカスタマイズしたいファイルと同じ名前のものを子テーマディレクトリの中に作ってカスタマイズすればそのファイルが適用されます。header.phpとはfooter.phpのコードをカスタマイズして使いたいなんてこともできますね。
皆さんも是非子テーマを作ってみてはいかがでしょうか〜

Pocket
このエントリーをはてなブックマークに追加