以前の記事で子テーマ作成する方法を書いたのですが、ロリポップでのやり方だったので今回はエックスサーバーでの子テーマの作成方法を紹介していきたいと思います（コメントでリクエストも頂いたので）。
まず子テーマについておさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化されるので、親テーマをコピーした子テーマを作成して更新しても初期化されないようにしておくという感じです。
ただ、テーマを構成する全てのファイルをコピーする必要はなく、修正するファイルだけコピーしておけばOK。それ以外は親テーマのファイルを読み込むのでカスタマイズしたり、修正したりするファイルだけをコピーして子テーマに追加していきます。
今回は実際にどのように子テーマを作るのかという部分を解説していきます。
WordPressをカスタマイズする時に色々なphpファイルをコピーしていきますので、この手順はしっかりと覚えてしまいましょう。それから最後に重要な注意事項もありますので、必ず最後まで記事を読んで下さいね。
親テーマのテーマ名を確認しておく
まずは今回利用するテーマ「Twenty Twelve」をインストールします。別のテーマでも構いません。
例えばStinger5を利用するのであればダウンロードサイトからStinger5をインストールという感じです。
※すでにインストール済みならそのまま次に進んで下さい。
WordPressの管理画面から「外観」⇒「テーマ」と進み、「新しいテーマを追加」という部分をクリックします。
検索窓があるので「Twenty Twelve」と入力して検索してインストールしておきます。
インストールできたら一度「有効化」しておきます。
これでテーマ（親テーマ）が有効化されますので、有効化できたらWordPressの外観⇒「テーマの編集」と進みます。
テーマの編集をクリックすると「スタイルシート」が表示されますので、最初の方に書かれている「テーマ名（Theme Name）」を確認しておいて下さい。
Twenty Twelveの場合のテンプレート名は「Twenty Twelve」になってますね。
スティンガー5（今現在のバージョン）の場合はこのようになってます。
このテーマ名（Theme Name）は後で使うのでメモ帳などに貼り付けておきましょう。
エックスサーバのファイルマネージャーから子テーマを追加
WordPressを構成するフォルダに子テーマを追加する必要があるのですが、WordPressを構成するフォルダへ行く場合には「ファイルマネージャー」にログインする必要があります。
エックスサーバーの「インフォパネル」にログインすると「ファイルマネージャー」にログインする項目があります（直接ファイルマネージャーにログインしてもOK）。
子テーマを追加するドメイン名を選択。
次に「public_html」をクリックします。この「public_html」の中にWordPressのファイル達があります。
ここからは「wp-content」⇒「themes」とクリックして行きます。
これでWordPressのテーマが入っているフォルダ「themes」までやってきました。テーマフォルダの中に「子テーマのフォルダ」を作成すればいいという訳です。「themes」のフォルダで任意のフォルダ名（私の場合はchild）をつけて作成します。
画面右下にフォルダを作成するコーナーがありますので、ここで子テーマフォルダ名を入力して「フォルダの作成」をクリック。
するとファイル一覧のところに今作成した子テーマのフォルダが表示されますのでそれをクリック。
この子テーマの「フォルダ」の中にスタイルシート「style.cssファイル」を作成します。ファイルですのでフォルダと間違わないように。ファイル名は「style.css」と入力してファイルを作成をクリック。
これで子テーマ（child）のフォルダの中にスタイルシート「style.css」というファイルが追加されましたので、「style.css」の左のチェックボックスにチェックを入れて右の「編集」をクリック。
「style.css」の編集画面になります。この内容の部分に普通は親テーマのファイル（今回は「style.css」）をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。次の記述をします。
テーマTwentyTwelveの場合の記述です。
/*
Theme Name: Child
Template: twentytwelve
*/
@import url('../twentytwelve/style.css');これは作成するテーマ名と親テーマの名前（template）、それから＠の部分がtwentytwelveの「style.css」をインポートして下さいという意味です。
「Theme Name」には子テーマの名前（私の場合はChildにしてます）。それから「Template:」の部分に最初に調べておいた親テーマのテーマ名を入れます。
また、「@import url(‘../●●●●/style.css’);」の●●の部分にも親テーマのテーマ名を入れます。
※テーマ名の部分などスペースなどを入れないで全部小文字（半角英数字）。
上記コードを便宜変更し、子テーマのスタイルシートの内容の部分に貼り付けます。貼り付けたら下の「保存文字コード」を「UTF-8」にしておき、「編集」をクリックすると保存されます。
これで子テーマにスタイルシートが作成できたのでこの子テーマを有効化していきましょう。
子テーマを有効化してみる
ここまでで新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。今度はWordPressの管理画面から「外観」⇒「テーマ」と進んで下さい。
すると先ほど作った「Child」というテーマがありますので、「有効化」をクリック。
するとこの子テーマが有効化されます。以上でテーマの有効化は完了です。
一度サイトの表示を確認するとそのまま親テーマと同じように表示されるはずです。これで子テーマにスタイルシートが追加できました。
子テーマに追加したスタイルシートに関しては親テーマの記述がインポートされてますので、スタイルシートをカスタマイズする場合には変更したいコードだけをどんどん下に追加していけばOKです（CSSは後に書いた物が優先的に反映されるため）。
※スタイルシートの場合です。
スタイルシート（CSS）以外のphpファイルを子テーマに追加するには
上記の手順でスタイルシートを子テーマに追加しましたが、他のphpファイル「header.php」とか「single.php」とかを子テーマに追加する場合もほとんど同じです。
ただ、スタイルシートのように「インポート」は使わずに親テーマの内容まるごとコピーして子テーマに追加します。
前回の記事で書いたようにWordPressのテーマは沢山のphpファイルでできています。
カスタマイズしたいファイルだけ子テーマに追加しておき、コピーしたファイルの方をカスタマイズします。
例えばコメント欄のカスタマイズをしたい場合は「comments.php」というファイルを子テーマにも作成し、親テーマから「comments.php」のファイルの中身をコピペして子テーマの「comments.php」に追加して保存。
それでコピーした子テーマの「comments.php」をカスタマイズする訳です。
ついでに子テーマに「single.php」も追加してみよう
練習も兼ねて子テーマに「single.php」も追加してみましょう。
まずは先ほど同様にエックスサーバーのFTPからログインし、最初に画面右下の「ファイル名の文字コード」が「UTF-8」になっているか確認。
「ファイル名の文字コード」を「UTF-8」に切り替えたら子テーマを追加するドメイン名を選択。
次に「public_html」⇒「wp-content」⇒「themes」⇒「Child（先ほど作った子テーマ）」とクリックして行きます。
この子テーマ「Child」の中に「single.phpファイル」を作成します。
ファイルですのでフォルダと間違わないように。ファイル名は「single.php」と入力して「ファイルを作成」をクリック。
これで子テーマ（child）のフォルダの中に「single.php」というファイルが追加されましたので、「single.php」の左にチェックを入れて「編集」をクリック。
ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加する必要がありますので、一度このまま放置します。
別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。
そして右上の「編集するテーマを選択」という部分から親テーマ（twenty twelve）を選び、「選択」をクリック。
右側にずらりと沢山のphpファイルが並んでいると思いますので、その中から「単一記事の投稿 (single.php)」というのクリック。
すると親テーマ「twenty twelve」の（single.php)というファイルの中身が表示されていると思います。この中身をすべてそのままコピーします。
コピーしたら先ほどの放置いていたエックスサーバーのsingle.phpのファイルの中身にペースト。
それで後は「保存文字コード」を「UTF-8」にして「編集」をクリックで完了。
最後に子テーマに反映されているか確かめてみます。WordPressの管理画面から「外観」⇒「テーマの編集」と進みます。
画面の右側の「編集するテーマを選択」で「Child」を選び「選択」をクリックすると最初に作った「style.css」と今作った「single.php」が表示されていればＯＫです。このコピーして追加する方法が子テーマの基本になります。
このような手順で作成して行きます（functions.phpだけは例外です）。注意点はCSSの時にも書いたように「保存文字コード」を「UTF-8」にしておく事です。
※親テーマの全部のファイルを子テーマに追加する必要はありません。子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更する予定のファイルだけを子テーマにコピーしていけばOKです。
それと子テーマに「functions.php」を追加する場合には注意が必要です。このファイルはそのまま親テーマの記述をコピーしてしまうとエラーが発生してブログが表示されない状態になります。「functions.php」を子テーマに追加したい場合には先に次の記事を読んでおいて下さい。
⇒子テーマにfunctions.phpを追加する時の注意点
コメント
そら様
コメントありがとうございます。「public_html」の先に何もない状態であれば多分WordPressがインストールされてない状態だと思いますので、再度確認してみて下さい。
しげぞう様
突然のコメント失礼いたします。
こちらのブログを拝見させていただきながら作成させていただいております。
しかし、現在エックスサーバーにて子テーマを作成中なのですが、作業工程の「public_html」をクリックまですると選択肢が一つも出てこない状態でしたので、自分で「wp-content」と「themes」のフォルダを作成し最後まで進みましたが、ワードプレスに戻って有効化しようとしてもテーマの中に出てきません、、、
どのようにしたらいいのでしょうか、、？
CSS内の空白部分？にはコピペさせていただいて貼り付けていますし、1文字ずつ何度も確認したので誤字等はありません。
しげぞう様
早速の返信ありがとうございます。
こんなに早くお返事をいただけると思っていなかったので、本当に感謝しています。
早速子テーマについてなのですが、やはり提案いただいたことを試してはみたのですが、
前回と同じようにリンク先が真っ白な感じになってしまいます。
使っているブラウザもオペラから変更してみたのですが、やはり改善できず…。
「今後アフィリエイトをするのであればカスタマイズよりも先にどんどん記事を書いて経験を積む事を優先するべきかなと思います。」とおっしゃっていただいたように、確かにサイトのデザインなどの変更は後からでもできますし、サイトの主役はやはり記事なのだと思います。
自分自身、どうしても見た目を気にしてしまうタイプなので、デザインにばかり意識を取られてしまい、大事なことを見落としていました。
そこで私の場合は、twentytwelveでの作成はいったん諦めて、
ご提案いただいたSimplicity2でサイトを作っていこうと思います。
こちらだと子テーマの作成も一瞬で終わってしまいました（笑）
（もちろんtwentytwelveでも子テーマは一瞬で作れてしまうのでしょうが…）
今回は質問にお答えいただき、さらに新しい提案までしていただき
本当にありがとうございました！
いつかしげぞう様と肩を並べられることを夢見て日々精進したいと思います。
またお世話になることもあるかもしれませんが、お時間があればよろしくお願いいたします。
２年前にしげぞう様とお会いしたときは、WEBライターとしての自信がつき「こんなクライアント様と出会えてよかった。」と感じ、今回は「あのときしげぞう様と出会えてよかった」と心の底から感じております。
長くなってしまい、申し訳ありません。
今回は本当にありがとうございました！
それでは失礼します。
ノブ様
コメントありがとうございます。今日はなんだか懐かしい方々がコメントくれてホント嬉しいです(^^)こちらこそおホントに世話になりました！
パーマリンクの設定とか記事の投稿はそのままでOKです。
これは子テーマの作成とは関係や影響のない部分ですので、それはそれで進めておいて大丈夫ですし、なんなら親テーマのままでとりあえず記事を投稿していき、子テーマが作成できた時点で切り替えでもOKです。
えっと子テーマなんですが、考えられる原因ってかなり多いのです。ほとんどはコピペの問題だと思います。なぜかコピペしているのにちょっと違ってしまう部分があるようで、原因がよく分かりません。使っているブラウザとか？
とりあえず以下チェック。
・エックスサーバー子テーマのスタイルシートのファイルの保存文字コードをUTF-8にして保存。
・「”」が全角になっていないか確認し、「”」半角に。
・スタイルシート（CSS）の最初の部分テーマ名や子テーマ名が半角になっているか確認。
・スタイルシート（CSS）の最初の部分テーマ名や子テーマ名が間違っていないか確認。
・半角のスペースを一度削除して再度半角のスペースを入れて試す。
・@import urlの前の空白の1行を削除して詰める。
・@import urlの前の空白の1行を削除してもダメなら再度1行あける
他のサイトでも子テーマ作成のコードはありますので、他のサイトのコードをコピペして試しても良いと思います。「Twenty Twelve子テーマ」などで調べるとでてきます。
それで上手く行かない場合には再度コメント頂けると助かります。
■もう１つの提案
ちょっと私から１つ提案なんです。
Twenty Twelveの場合はシンプルで使いやすいですが、必要な機能を実装するのにあちこちカスタマイズと知識が必要になります（少し時間がかかります）。
ノブ様は2年前に「サイトに関してはほとんど知識がない」って言われていたと記憶してますし、今後アフィリエイトをするのであればカスタマイズよりも先にどんどん記事を書いて経験を積む事を優先するべきかなと思います。なのでカスタマイズとかに時間を使いたくない場合は他のテーマを使うのもありだと思います。
もうほとんどカスタマイズしなくてもそのまま使えるようなテーマもありますし、全体的な色とかヘッダー画像とかの設定、簡単なカスタマイズがWordPressの外観⇒カスタマイズのページである程度できたりするので楽です。
なので記事投稿だけに集中したいって場合には「Simplicity（Simplicity2）」とかも1度見てみる事をおすすめします。
Simplicityｍの場合は子テーマも既に作成されているので親テーマと子テーマ両方をサイトからダウンロードしてWordPressにインストールだけで完了します。
⇒https://wp-simplicity.com/
もちろん１つ１つカスタマイズをしていきたいって場合にはTwenty TwelveでもOKです。あくまで上記は提案なので。
格闘しても分からない部分があればコメントで聞いてもらえば返信もしていきますのでぜひまた上手く行かない場合にはコメント下さい(^^)
しげぞう様
突然のコメント失礼いたします。
ノブと申します。
今から2年ほど前に某サイトでしげぞう様に大変お世話になりました。現在も当時の仕事は続けているのですが、当時しげぞう様とお会いし、始めてアフィリエイトで報酬を得ている人と触れ合い、アフィリエイトの可能性を感じました。
そこで紆余曲折ありましたが、自分が書いた記事を誰かに使ってもらうのではなく、私も自分で書いた記事を自分のサイトに投稿したいと考え、最近実行に移しました。
その際にしげぞう様のサイトを参考にしていたのですが、子テーマの作成でつまづいてしまいました。
私はエックスサーバーを使っており、こちらの記事の指示通りに子テーマを作成したのですが、子テーマを有効化すると記事のタイトルなどをクリックすると真っ白なページに飛ぶようになってしまいます。
子テーマを有効化した状態の私のサイトのURLを添付いたします。
例えば右のサイドバーにある最近の投稿の「てすと２」「ついに届いた！！ソルースジェルのキットの中身は？」をクリックすると真っ白なページに飛んでしまいます。
子テーマではなく、twentytwelveの親テーマを有効化した場合は上のような症状はなく、タイトルをクリックするとしっかりと記事が表示されます。
この症状の原因の見当はつくでしょうか？
ちなみにテーマを有効化する際に、子テーマを選ぶと次のように表示されています。
twentytwelve-Child
バージョン:
作成者: 匿名
これは Twenty Twelve の子テーマです。
またこちらのコメント欄を参考にして、スタイルシートの半角スペースや改行なども変えてみたのですが、変化はありません。
しげぞう様のサイトを参考にサイトを作っていき、てっきり子テーマは無事作れたものだと思ってパーマリンクの設定や記事の投稿なども実際にしてみました。しかし、ある程度作業が進んだ時点で今回の症状に気づき、改善を試みています。
しかし、すでに子テーマよりも先の部分にも着手してしまったため、自分にもどこに原因があるのか見当がつかない状態になってしまい、今日は本職の記事作成はできずに１日中この問題と格闘していました。
もしこの症状の原因が分かれば、ご教授いただければ幸いです。
お忙しいとは思いますが、よろしくお願いいたします。
ノブ
naminami様
わざわざ報告ありがとうございます!解決して良かった(^^)自分の事のように嬉しいです（笑）
また何かあればコメント下さい。
しげぞうさん☆
やった～！できました！
「’」が原因でした！ずっと英数字半角で作業していたから、
何故この部分だけ違ったのか納得いかず、疑問は残りますが、
とりあえずできたことに感動です！
きれいに反映できています！
先生、ありがとうございました。笑
またイッーってなったらコメントします！