[WordPress] STINGER FANSで子テーマを作成する方法

前回の記事で、WordPressのテーマをSTINGER for FANSに変えましたが、子テーマを作っていなかったばっかりにGoogleアナリティクスのトラッキングコードがなくなってしまうという事態に陥りました。今日は今後のためにも子テーマを作っておこうと思います。

今日はそんなお話です。

子テーマってなんぞや？

まず子テーマって何？ということですが。子がいるので親は誰ってことです。
親は当然、通常のWordPressのテーマのことですね。そこに親と同じような子供のテーマを作っておくことで親子関係ができます。子テーマでは必要なファイルだけを上書きして、残りは親のテーマを引き継ぐという形にすることできます。

特にカスタマイズをするようになると、子テーマを作成し、そこでカスタマイズをしないと、親テーマをアップデートしたときにカスタマイズが全部なくなっちゃうってことだと思います。

では、子テーマ作成の手順を説明します。

事前に用意しておくものは下記の2つです。

・子テーマを入れておくフォルダ
・子テーマのstyle.cssファイル

ここでは、「STINGER for FANS」というテーマで子テーマを作ってみたいと思います。

まず、子テーマを入れておくフォルダを作ります。フォルダの名前は何でも良いのですが、無難に私は「stinger-child」としました。
普通にデスクトップでフォルダを作って、名前をつけます。

続いて、style.cssファイルを作ります。

テキストエディタで、名前を「style.css」にして保存。とりあえずは中身はまだ空っぽです。

私はテキストエディタは、TeraPadを使っています。Windowsに入っているメモ帳は文字化けとかしちゃうのでやめときましょう。

作成したstyle.cssファイルを開いて、以下のコードをコピペします。

/*
Theme Name: stinger-child
Template: stinger3forFANS
*/

Theme Name: には、子テーマのフォルダ名をいれます。
Template: には、親テーマのファイル名を入れます。

コードをコピペしたら保存。
先ほどの「stinger-child」フォルダにいれましょう。

続いて、「stinger-child」フォルダをFTPでアップロードします。

アップロードする場所は、テーマファイルが入っている場所の「wp-content」の「themes」の中に入れます。

アップロードできたら、WordPressの管理画面に戻りまして、左メニューの「外観」→「テーマ」をクリックします。

するとさっき作成した子テーマが新しく追加されていますので、「有効化」します。

今の状態だとホームページが左によって崩れていますので、style.cssに追記します。
ここで方法は2つあるようですが、私は親テーマのstyle.cssを全部コピペしちゃいました。

親テーマのstyle.cssをあらかじめ全部コピーしておき、「外観」→「テーマ編集」で子テーマのstyle.cssにコピペ。

ここではじめて気付きましたが、Googleアナリティクスのトラッキングコードは＜headタグ＞に入れなきゃいけないので、header.phpも子テーマに入れておかなきゃいけないんですね。

ですから、さっきのstyle.cssと同じ要領でファイルを作ります。違う点は以下の2つ。

・ファイル名は「header.php」で保存。
・中身は、親テーマのheader.phpを全部コピペ。

このファイルをFTPソフトでアップロードします。
style.cssと同じところでOK。

はい。もう少しです。
header.phpにGoogleアナリティクスのトラッキングコードを書き込みます。

これでOK！

Googleアナリティクスのリアルタイムで無事にトラッキングできていることを確認しました。

今後、カスタマイズをする時は今回作成した子テーマに直接していけばいいですね。せっかくなんで少しずつカスタマイズにも挑戦しようと思います。

最後に気付きましたが、親テーマを変更した時は子テーマとか意味ないと思うので、トラッキングコードは改めて書き込まないといけないのかな？いや、やっぱりそうだろう。子テーマは、あくまで親テーマのアップデート時にカスタマイズ内容が引き継がれるという認識です。

今日はここまでです。

チャオ！