Stinger５の子テーマ作り方を解説！
こんにちは。たけちゃんです。
今回はワードプレスのテーマ『Stinger５』の
子テーマを作る方法について手順を解説します。
この記事を読むことであなたは
・Stinger５の子テーマを作る方法
について学ぶことができます。
子テーマとは何なのか？
初心者の人は子テーマと聞いてもピンとこないかもしれません。
私も最初聞いた時は何のことなのか全く理解できませんでした！
子テーマとは既存のテーマを『親テーマ』として指定した
カスタマイズ用のテーマのことを指します
なぜ子テーマが必要か？
必ずしも子テーマが必要というわけではありません。
しかし、子テーマを利用することで親テーマを直接編集することなく
子テーマを使ってスタイルシートや機能の編集を行うことが可能になります。
また、親テーマがアップデートされた場合など
せっかく編集したデータがアップデートしたことによって
書き換えられてしまい、消えてしまうという状況を事前に回避することが可能です。
ですので時間があれば子テーマは作っておいて損はないでしょう。
ワードプレスの理解もさらに深まりますので私と一緒に勉強していきましょう！
Stinger５子テーマの作り方～手順～
それでは実際にStinger５の子テーマを作る方法について、
細かい手順を解説していきますね。頑張って子テーマを完成させましょう。
１：子テーマのフォルダを作成する
まず最初に子テーマのフォルダを作成します。
デスクトップにフォルダを新規作成し、子テーマの名前をつけます。
ここではひとまず「Child」としておきましょう。
※手順[２]のCSSテキスト『Theme Name』と同名にする
＜フォルダ画像＞
２：CSSのファイルを作成する
次にCSSのファイルを作成します。
メモ帳などを開き、下記のテキストを入力します。
※私は「TeraPad（テラパッド）」 というものを使用しています。
（作業がしやすいため）
入力するテキスト
========================
/*
Theme Name: child
Template: stinger5ver20141227
*/========================
【注意】
※CSSテキストのTheme Nameは手順[１]で作成したフォルダと同名にします
※Tenplateは親テーマのテンプレート名を入力します
（2015年3月29日現在、最新のStinger5テンプレートは『20141227』）
メモ帳やテキストエディタで上記のコードを入力しましたら、
手順[１]で作ったフォルダに
『style.css』という名前で保存します。
これでCSSのファイルは準備完了です。
CSSとは？：
３：style.cssの入った子テーマフォルダをアップロードする
手順[２]で作った『style.css』のテキストファイルが入った
手順[１]の『child』フォルダをサーバーへアップロードします。
アップロードの方法はいくかありますが、
私は操作が用意なFile Zilla（ファイルジラ）というFTPソフトを使用しています。
ドラッグ＆ドロップで簡単にファイルをサーバーへアップすることができるからです。
もし、File Zillaのでファイルをアップロードする方法がわからない場合は
Zipファイルに圧縮してワードプレスからアップロードする方法を行ってください。
Zipファイルに圧縮してワードプレスにアップロードする方法
１：子テーマフォルダをzip形式に圧縮
手順[１]で作った子テーマファイル『child』を右クリックし
「送る」＞「圧縮（zip形式）フォルダー」をクリックし、
『child』フォルダをzipファイルに圧縮します。
※Macの場合フォルダを右クリックし「”フォルダ名”を圧縮」をクリックすると
zipの圧縮フォルダが作成できます
２：圧縮した子テーマフォルダをワードプレスにアップロード
zip形式に圧縮できた子テーマ『child』をワードプレスの管理画面にて
アップロードします。
ワードプレス管理画面を開き、
テーマを開いて下さい。
「管理画面＞外観＞テーマ」
＜画像＞
ここで先ほど作った
zip形式に圧縮された子テーマフォルダ『child』を
アップロードします。
＜画像＞
４：アップロードした子テーマ『child』を有効化
アップロードした子テーマフォルダを有効化し、
親テーマが認識されたのを確認します。
子テーマが正常に有効化できているかサイトを見て確認しましょう。
【注意】
※この段階ではデザインは崩れているので注意してください
＜送るの画像＞
５：子テーマのstyle.cssファイルに親テーマの情報をコピーする
このままの状態だとサイトのデザインが崩れていると思いますので、
ワードプレス管理画面の「外観＞テーマの編集」をクリックし、
子テーマのstyle.cssファイルの下に
親テーマ（この場合stinger5ver20141227）のstyle.cssテキストを
全てコピーし、子テーマのstyle.cssに貼り付けます。
========================
/*
Theme Name: child
Template: stinger5ver20141227
*/↓この下にペーストして貼り付けます↓
========================
これで親テーマのcss情報が反映され、
サイトの崩れが正常に戻り、親テーマと同じ環境になります。
６：Googleアナティリクスを導入するため『header.php』を挿入する
サイトのアクセス数などを解析するために、
Googleアナティリクスを導入するという場合は
手順[１]で作ったフォルダの中に『heder.php』という
ファイルを追加しておきましょう。
１：header.phpファイルを作成
メモ帳かテキストエディタを使い、header.phpファイルを作ります。
内容は空白のままでいいので、名前を付けて保存する際に
『header.php』という名前をつけて、手順[１]の子サイトフォルダ『child』
に保存します。（style.css）が入っているフォルダです。
２：作成したheader.phpファイルをアップロード
作成したheader.phpファイルをワードプレスにアップします。
手順[３]でstyle.cssのファイルをFTPソフトなどでアップロードしたのと
同じようにheader.phpのファイルをアップロードします。
３：アップロードしたheader.phpに親テーマの情報を丸コピー
アップロードできたheader.phpファイルを編集します。
現段階では子テーマのheader.phpは空白のはずです。
まずは「管理画面＞外観＞テーマの編集＞編集するテーマを選択：親テーマ」
の順で親テーマのheader.phpを開きます。
そこにあるテキストコードを全てコピーし、子テーマのheader.phpに丸写しします。
これで子テーマのheader.php編集は完了です。
４：子テーマheader.phpにGoogleアナティリクスコードを追加
子テーマのheader.phpにGoogleアナリティクスの
トラッキングコードを『header.php』の
<head>タグ内に貼り付けます。
これで子テーマにGoogleアナリティクスが導入できました。
子テーマ作成の完了
お疲れ様です。
以上がワードプレステーマ『Stinger５』に
子テーマを作る手順になります。
慣れないうちは理解が難しかったり、
作業に時間がかかってしまったりしますが
慣れれば簡単にできるので、挑戦してみてくださいね。
あれば便利なものツール
ツール：FileZilla（ファイルジラ）
ワードプレスを編集する際、サーバーにファイルやフォルダを
アップロードするのに大変便利なフリーソフトです。
ドラッグ＆ドロップでフォルダのアップロードが可能なFTPソフト。
ツール：TeraPad（テラパッド）
パソコンに元から入っているメモ帳よりも
使いやすく、文字の崩れなどを防ぐことができるので便利です。
フリーソフトなので無料で使用することができます。
書籍：WordPress Perfect GuideBook 4.x対応版
ワードプレスの基本知識を頭に入れるため、私も購入して一部を参考にしています。
初心者でもわかりやすくワードプレス基本について解説してありますので
最初の１冊としてもおすすめします。
⇒WordPress Perfect GuideBook 4.x対応版はこちら
この本で得られるもの
- ワードプレス基本知識
- レンタルサーバーの申し込みから導入までの手順がわかる
- ワードプレスのカスタム全般がわかる
- 無料ブログから独自ドメインへ移行する際に必要な知識
まとめ
今回はワードプレステーマである
『Stinger５』に子テーマを作成する方法について解説しました。
子テーマを作っておくことによって、テーマのアップデートが行われても
せっかく編集した部分が消えてしまう！という事態を回避することができます。
時間があればしっかり子テーマも作っておきましょう。