WordPressで子テーマを作ってカスタマイズをする方法

WordPressのカスタマイズをする際に、子テーマを作ってカスタマイズすればテーマのバージョンアップがあってもカスタマイズが吹き飛ばないということで、その設定方法を残しておきます。

設定手順

このサイトではデフォルトで入っているTwentyTwelve使っているのでその想定で記載します。他のテーマでも同じだと思いますので、その辺は読み替えてください。

親テーマを決める(今回の場合TwentyTwelve)
子テーマのディレクトリを用意する
スタイルシートを用意する
管理画面でテーマ変更をする

子テーマのディレクトリを用意する

FTPソフトなどで親テーマと同じ階層にテーマディレクトリを作成します。
ルートから見ると「/wp-content/themes」というところですね。
子テーマの名前は適当に付けられますが、後に出てくるテーマ名と合わせるようにしましょう。

スタイルシートを用意する

子テーマというから親テーマからごっそりコピってくるイメージがありますが、そこまでしなくても大丈夫です。親テーマのスタイルシートである[style.css]をコピーして、↓の記載に変更してもいいですし、テキストエディタで新規作成してもOK。

/*
Theme Name:**** (作成した子テーマディレクトリ名)
Template: twentytwelve(親テーマのディレクトリ名)
*/
 
@import url("../twentytwelve/style.css");

色々記述しなくても、親テーマのcssを読み込んで動作します。修正したい部分だけ追記していけばOK。
ファイル名は「style.css」、文字コードはUTF-8にしてファイルを子テーマディレクトリに入れます。

ちなみに、他のファイルも同様に変更のあるファイルだけ子テーマディレクトリにコピーしてカスタマイズします。私の場合はcontent.phpとfunction.phpを変更しているのでそれをコピーしました。

ここで注意が必要なのがfunction.phpの動き。function.phpとstyle.cssは親テーマの差分で必要な部分だけを追記します。他のファイルはコピーですが、この2つはコピーせずに使ったほうが良いと思います。私は
function.phpを最初コピーしていてエラーが出て戸惑ったのでこれを見て設定する方がいたらご注意ください。

管理画面でテーマ変更をする

管理画面のメニューから「外観」→「テーマ」と入るとテーマ変更画面が出ます。ここでさっき作ったテーマが表示されるので有効化します。

ちなみにstyle.cssをコピって最初の記述だけ変更するという作業をした場合は「CSSが壊れています」という表示になったので、差分だけ記述するようにここも注意。

ここまでできたら以上です。

参考にしたのは下記のサイト。他にもいくつかありましたが、一番分かりやすかったです。
via:WordPressテンプレートのカスタマイズは子テーマで | SaaSes Staff Blog
 
 

コメントを残す