WordPressテーマ「Stinger3」に子テーマを導入する方法

2014.02.17
WORDPRESS

「子テーマ」とは？
- Stingerの子テーマ
最新版Stinger3のインストール
子テーマの「CANDY CRAZY」をダウンロード
ここで注意！
smart.cssも同じように変更します
子テーマの「CANDY CRAZY」をインストール
完成と思いきや…
完成！

WordPress初心者に向けた、「Stinger5」の子テーマ導入編を書きました。「Stinger5」をお使いの方はそちらをどうぞ！

WordPressテーマ「Stinger5」に子テーマを導入する方法 | dmgadget(ディーエムガジェット)

「子テーマ」とは？

親テーマ、子テーマとあり、Stinger3などのテーマを普通にインストールして使う場合、そのテーマが親テーマです。もちろんそのまま使用することも出来るのですが、使用しているテーマのアップデートなどをインストールした場合、自分が今までカスタマイズしてきたstyle.cssや他のファイルも上書きされてしまいます。

「バックアップをしておいて、アップデート後またファイルを移動すればいいじゃん！」

確かにその方法もありますがとても手間がかかる上、ファイルの移動も多くなるのでちょっとしたトラブルも増えます。子テーマを利用した運営はそんなトラブルもある程度回避します。

例えば、「Stinger３」のフォルダと同じ階層に「Stinger_Child」と云う名前のフォルダを作り、その中に新しくスタイルシート（style.css)の作って、子テーマが親テーマに反映される設定さえしておけば、子テーマでカスタマイズをした情報を親テーマより優先して反映すると云う方法が可能になります。（実際にはもう少しやることはあります。）テーマをアップデートした場合でも、アップデートされるのは親テーマなので、カスタマイズした子テーマの内容は上書きされないで済むと云う仕組みです。子テーマを構成しているデータもカスタマイズに必要な情報だけなので、シンプルで分かりやすくなります。

注意：functions.phpに関しては子テーマ内でコードの追加は可能ですが、内容を変更するには親テーマを変更する必要があるみたいです。これはstyle.cssと違って子テーマのfunctions.phpは親のfunctions.phpの直前に読み込まれるのが理由で、同じ内容が記述されていると親のfunctions.phpが優先される為です。親テーマのfunctions.phpを子テーマそのままコピーしてきても正しく動作しないとのこと。functions.phpについて「The Present Note」さんの投稿で詳しく説明しています。

【注意】子テーマをつくってのカスタマイズ方法 -functoins.php篇-｜ThePresentNote

WordPressの人気テーマ「Principle」を無料配布している「Nobuo_CREATE」さんが「テーマを自作するなら知っておきたいWordPressの基本的な仕組みをまとめてみた」と云う記事を投稿しています。

テーマを自作するなら知っておきたいWordPressの基本的な仕組みをまとめてみた | 初心者にもおすすめ！無料 WordPress テーマ『Principle』

こちらの記事、WordPressの基本的な仕組みをかなり分かりやすく書いているので、是非ご覧ください。自分も子テーマ作ってみようかなと思っています。配布している「Principle」もオススメです！

Stingerの子テーマ

dmgadget(ディーエムガジェット）でも使わせて頂いてるテーマ「Stinger3」ですが、Stinger用の子テーマがいくつか無料で配布されています。そんな中でも特にカスタマイズ性が高い「room9」さんで配布している「CANDY CRAZY」を、今回インストールして使用する備忘録を残したいと思います。今回も、

OSXローカル環境にwordpressをインストールする方法 | dmgadget(ディーエムガジェット)

で、構築した環境にインストールして行きたいと思います。

子テーマの「CANDY CRAZY」をダウンロード

room9さんのページから

【第3弾】10分でSTINGERを自分色に！！カスタマイズ用子テーマ「CANDY CRAZY」を作成しました！！ | room9

「CANDY CRAZY」をダウンロードしてください。
２０１４年２月１６日現在の最新バージョンは「stinger3child_r9_003_for1216」となります。

ここで注意！

子テーマ（CRAZY CANDY)が制作された時の想定していたStingerのバージョンと現在の最新版のバージョンが異なっている為、そのままでは使用出来ません。スタイルシートを変更して使えるように内容を変更します。ダウンロードした「stinger3child_r9_003_for1216」の中のスタイルシートをテキストエディタなどで開きます。（自分はtrasmit4を使っています。）

変更前のスタイルシート（styel.css）

/*---------------------------------------------------------
Theme Name: stinger3 child theme -room9 custum 003 &amp;amp;amp;quot;CANDY CRAZY&amp;amp;amp;quot;-
Template: stinger3ver20131216
Description: Customize css for stinger3
Auther: Qtaro
Author URI: //room9.jp
License:
License URI:
Version: 20131216 (for stinger3ver20131216)
---------------------------------------------------------*/
@charset &amp;amp;amp;quot;UTF-8&amp;amp;amp;quot;;
@import url(&amp;amp;amp;quot;../stinger3ver20131023/style.css&amp;amp;amp;quot;);

下記のコードをコピペして情報を入れ替えてください。

変更後のスタイルシート（style.css)

/*---------------------------------------------------------
Theme Name: stinger3 child theme -room9 custum 003 &amp;amp;amp;quot;CANDY CRAZY&amp;amp;amp;quot;-
Template: stinger3ver20140124
Description: Customize css for stinger3
Auther: Qtaro
Author URI: //room9.jp
License:
License URI:
Version: 20131216 (for stinger3ver20140124)
---------------------------------------------------------*/
@charset &amp;amp;amp;quot;UTF-8&amp;amp;amp;quot;;
@import url(&amp;amp;amp;quot;../stinger3ver20140124/style.css&amp;amp;amp;quot;);

Stingerのバージョンが異なる方[style.css]

次の3カ所を変更すれば問題なく使用出来ると思います。

wordpress-stinger3-child-theme

smart.cssも同じように変更します

変更前のsmart.css

/*---------------------------------------------------------
[SP CSS]
for stinger3 child theme -room9 custum 003 &amp;amp;amp;quot;CRAZY GIRL's HOUSE&amp;amp;amp;quot;-
Version: 20131216 (for stinger3ver20131023)

※このCSSは上記verのオリジナルのsmart.cssから
変更が必要な部分を修正し、作成しています。

オリジナルのsmart.cssがアップデートされた場合は
合わせて修正する必要がある場合がありますので、予めご留意ください。

//Qtaro　(●´,_ゝ｀)
---------------------------------------------------------*/

変更後のsmart.css

/*---------------------------------------------------------
[SP CSS]
for stinger3 child theme -room9 custum 003 &amp;amp;amp;quot;CRAZY GIRL's HOUSE&amp;amp;amp;quot;-
Version: 20131216 (for stinger3ver20140124)

※このCSSは上記verのオリジナルのsmart.cssから
変更が必要な部分を修正し、作成しています。

オリジナルのsmart.cssがアップデートされた場合は
合わせて修正する必要がある場合がありますので、予めご留意ください。

//Qtaro　(●´,_ゝ｀)
---------------------------------------------------------*/

に変更してください。

Stingerのバージョンが異なる方[smart.css]

下記の部分をお使いのStingerのバージョンに合わせて変更してください。

wordpress-stinger3-child-theme

子テーマの「CANDY CRAZY」をインストール

変更を加えた「stinger3child_r9_003_for1216」のフォルダを何かしらのFTPのアプリ（自分はTransmit4を使用しています。）でStingerのテーマが入ってるフォルダ（~/wp-content/themes/）と同じ階層に入れてください。
「stinger3child_r9_003_for1216」のフォルダを再度Zip化して、管理ページ　→　外観　→　新規追加　→　アップロード　でアップして頂いても問題ありません。インストール後、外観のページに下記の様に子テーマが表示されるはずです。表示されない場合コピペなどが上手く行っていない可能性が高いのでもう一度チェックしてみてください。

WordPressテーマ「Stinger3」に子テーマを導入する方法