子テーマの作り方と有効化する方法【図解】

前回までの記事でWordPressをカスタマイズするには子テーマを最初に作っておく事が重要という記事を書いてきました。

おさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化されるので、親テーマをコピーした子テーマを作成して更新しても初期化されないようにしておくという感じです。

ただ、テーマを構成する全てのファイルをコピーする必要はなく、修正するファイルだけコピーしておけばOK。それ以外は親テーマのファイルを読み込むのでカスタマイズしたり、修正したりするファイルだけをコピーして子テーマに追加していきます。

今回は実際にどのように子テーマを作るのかという部分を解説していきます。

WordPressをカスタマイズする時に色々なphpファイルをコピーしていきますので、この手順はしっかりと覚えてしまいましょう。それから最後に重要な注意事項もありますので、必ず最後まで記事を読んで下さいね。

また、今回はロリポップ版での解説ですが、ロリポップではなくエックスサーバーを利用している場合にはこちらの記事を参考に子テーマを作成して下さい。
エックスサーバーで子テーマを作成する方法

子テーマを作り方と手順

先に子テーマを作る流れを大まかに説明しておきますね。このブログを読んでくれている方のほとんどがロリポップサーバーを使っていると思いますので、ロリポップの場合の手順になります。

  1. ロリポップ側で新しいフォルダを作成。
  2. 親テーマ(今回はtwenty twelve)のファイルをコピー。
  3. ロリポップで作成したフォルダにコピーしたファイルを貼り付け。

という流れが大まかな流れになります。

基本的にはWordPressの中に「themes(テーマ)」というフォルダがあり、インストールされているテーマがそのフォルダの中に入っています。その中に新しくテーマを作成していく流れになります。実際にやってみるとすぐに理解できますよ。

今回は2つのファイルをコピーしてみましょう。なぜ2つかというときちんと理由がありますのでそれも説明していきます。

親テーマのインストール

まずは今回サンプルとして利用する親テーマ「Twenty Twelve」をインストールします。別のテーマでも構いません。

例えばStinger5を利用するのであればダウンロードサイトからStinger5をインストールという感じです。

※すでにインストール済みならそのまま次に進んで下さい。

WordPressの管理画面から「外観」⇒「テーマ」と進み、「新しいテーマを追加」という部分をクリックします。

新テーマ-1

検索窓があるので「Twenty Twelve」と入力して検索してインストールしておきます。

新テーマ-2

インストールできたら一度「有効化」しておきます。

これでテーマ(親テーマ)が有効化されますので、有効化できたらWordPressの外観⇒「テーマの編集」と進みます。

テーマの編集-1

テーマの編集をクリックすると「スタイルシート」が表示されますので、最初の方に書かれている「テーマ名(Theme Name)」を確認しておいて下さい。

Twenty Twelveの場合のテンプレート名は「Twenty Twelve」になってますね。

テーマの編集-2

スティンガー5(今現在のバージョン)の場合はこのようになってます。

子テーマ-1

このテーマ名(Theme Name)は後で使うのでメモ帳などに貼り付けておきましょう。

実際に子テーマを作ってみよう

最初にコピーするのは「style.css」というファイルです。これから子テーマを作り有効化する訳ですが最初に必要なのがこの「style.css」になります。スタイルシートというやつです。

スタイルシートはテキスト文字の大きさやフォント、各部分の装飾をするためのファイルです。それではまずロリポップへ移動しログインしてユーザー専用ページへ移動しておいて下さい。

ロリポップユーザー専用ページに移動できたら「webツール」⇒「ロリポップFTP」と進んで下さい。

子テーマ-1

ここに最初独自ドメインを設定した時に作った自分のサイトのフォルダがありますのでこれをクリック。

ワードプレス構造-3

そのフォルダの中身一覧が表示されますので、「wp-content」というのをフォルダをクリックします。これはWordPressの中身という意味です。

ワードプレス構造-4

「wp-content」のフォルダの中かから「themes(テーマ)」というフォルダをクリックします。

子テーマ-2

「themes(テーマ)」というフォルダの中に今現在WordPressにインストールされている「テーマ」の一覧が表示されていると思います。

この「themes(テーマ)」の中にここに新しく「子テーマ」のフォルダを作って行きます。この「themes(テーマ)」というフォルダの画面で「新規フォルダ作成」というボタンをクリック。

子テーマ-3

新規フォルダ名は何でもいいですが、子テーマなので、「Child」と名づけています。フォルダ名を決めたら「保存」をクリックします。

子テーマ-4

すると「themes(テーマ)」というフォルダの中に今作成した「Child」というフォルダが表示されているはずですので、これをクリックします。

子テーマ-5

当然今作ったフォルダにはまだ中身はありません。ここの中に今度は「ファイル」を作成して行きます。フォルダ名が「Child(私の場合)」になっている事を確認して今度は「新規ファイルを作成」をクリック。「フォルダ」ではなくて、「ファイル」を作成です

子テーマ-6

新規ファイル名に「style.css」と入力します。これは深く考えずにこのまま記入。そして、その下の部分にファイルの内容を記入する部分があります。

子テーマ-9

この内容の部分に普通は親テーマのファイル(今回は「style.css」)をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。

例えばTwenty Twelveのテーマを利用する場合はこんな感じです。

/*
Theme Name: Child
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

最初に調べておいた親テーマのテーマ名をここの「Template:」の部分に記述し、「@import url(‘../●●●●/style.css’);」の●●の部分にも親テーマのテーマ名を入れます。合計2箇所確認して下さい。

Twenty Twelveの場合は上記のコードをこのままコピペして内容の部分に貼り付けて「保存」して下さい。これはテーマ名と親テーマの名前、それから@の部分がtwentytwelveの「style.css」をインポートして下さいという意味です。

子テーマ-7

これで保存をしてとりあえず1つ目のファイルは完了です。

MEMO

「@import url」の部分の上の空白の1行に「半角のスペース」が入っていてこれを削除しないと上手く行かなかった。というコメントも頂きました(kurina様ありがとうございます!)。

もし上手く反映されない場合にはその点もチェックしてみて下さい。

子テーマを有効化してみる

ここまでで新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。今度はWordPressの管理画面から「外観」⇒「テーマ」と進んで下さい。

テーマ構成-3

すると先ほど作った「Child」というテーマがありますので、「有効化」をクリック。

子テーマ-10

するとこの子テーマが有効化されます。これで子テーマの有効化は完了。有効化できたら自分のブログを表示させて確認します。自分のサイトの表示を確認するとそのまま「twenty twlve」のテーマと同じように表示されるはずです。

もし子テーマが反映されていない場合には2つの項目をチェックして下さい。

  1. 「Ctrl」と「F5」を一緒に押してリロードしてからブログの表示を確認する
  2. 子テーマに作成した「style.css」の親テーマのテーマ名の記述ミスがないか確認する
  3. ここまでで「子テーマ」つまり、親テーマのコピーを作った訳ですが、カスタマイズする時はこの子テーマの方に書き込んでいきます。

    また、子テーマには今「style.css」しか作っていませんが、他の部分は親テーマから読み込んでますので心配はいりませんし、前回説明したように子テーマに色々書き込んでいくと子テーマの方が優先されますので、親テーマの更新で初期状態になるという事もありません。

    また、スタイルシートに関しては下に書いた(後から書いた)ものが優先的に反映されます。なので、変更したい部分だけを子テーマのスタイルシートにどんどん追加していくだけで変更が反映されます(スタイルシートの場合だけ)。

    さて、今親テーマをインポートするコードを書いて「style.css」を作ったのですが、このインポートは「style.css」の場合ですので、別のファイルをコピーする時には内容をそのままコピペします。練習の意味でもう一つコピーしてみましょう。

    補足しておくと、前回の記事で書いたようにWordPressのテーマは沢山のphpファイルでできています。

    カスタマイズしたいファイルだけ子テーマに追加しておき、コピーしたファイルの方をカスタマイズします。

    例えばコメント欄のカスタマイズをしたい場合は「comments.php」というファイルを親テーマからコピペして子テーマに追加し、コピーした子テーマの「comments.php」をカスタマイズする訳です。

    別のファイルもコピーしてみる

    先にロリポップの準備をしておきます。先ほど同様に「ロリポップFTP」⇒「自分のフォルダ」⇒「wp-content」⇒「themes(テーマ)」⇒「Child」と進みます。この「Child」に「新規ファイルを追加」します。

    子テーマ-6

    これから新しく親テーマの「single.php」というファイルをコピーしますので、ファイル名にはこの「single.php」と入力しておきます。

    子テーマ-12

    ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加します。別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。

    テーマ構成-1

    そして右上の「編集するテーマを選択」という部分から親テーマ(twenty twelve)を選び、「選択」をクリック。

    テーマ構成-2

    右側にずらりと沢山のphpファイルが並んでいると思いますので、その中から「単一記事の投稿 (single.php)」というのクリック。

    子テーマ-11

    すると親テーマ「twenty twelve」の(single.php)というファイルの中身が表示されていると思います。この中身をすべてそのままコピーします。

    子テーマ-13

    後は先ほどのロリポップで準備しておいたsingle.phpのファイルの中身にペーストして「保存する」をクリックすれば完了です。

    子テーマ-14

    最後に子テーマに反映されているか確かめてみます。WordPressの管理画面から「外観」⇒「テーマの編集」と進みます。

    テーマ構成-1

    画面の右側の「編集するテーマを選択」で「Child」を選び「選択」をクリックすると最初に作った「style.css」と今作った「single.php」が表示されていればOKです。このコピーして追加する方法が子テーマの基本になります。

    子テーマでの注意点

    子テーマの作成の仕方も理解できたでしょうか?このようにカスタマイズしたい部分のファイルだけをコピーして子テーマに追加しながらカスタマイズしていく事になります。

    ※親テーマの全部のファイルを子テーマに追加する必要はありません。子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更する予定のファイルだけを子テーマにコピーしていけばOKです。

    全部の親テーマのファイルを先にコピーして子テーマに追加しておいてもいいですが、注意するべきは「テーマのための関数 (functions.php)」というファイルです。

    この「functions.php」だけはコピーしてはいけません。というのもこれと同じファイルを作ってしまうとサイトが表示されません。このファイルだけは同じ内容があると上手く機能しませんので、「functions.php」のファイルを子テーマに追加したい時には内容を白紙状態で作っておきます。

    つまり、親テーマの「functions.php」と同じ記述があると機能しないので、追加したい内容だけ記述する事になります。まあ、このファイルだけはどうしてもという時意外は触らないのがいいでしょう。

    それではいよいよカスタマイズ本編へ行きます。

子テーマの作り方と有効化する方法【図解】”に87件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    カラス様

    返信ありがとうございます。前回と同じ事になるのですが、原因はfunctions.phpかと思われますので、子テーマのfunctions.phpファイルを削除してもらえますか?(親テーマではなくて子テーマのfunctions.phpです)ログインしなくてもサーバーのFTPからfunctions.phpファイルの削除ができます。まずは試してみて下さい。

    それで試した過程を具体的に教えて下さい。例えばサーバーらからFTPでどのファイルをどのように削除してどのように確認されたのか?できるだけ具体的に書いてもらえると助かります。よろしくお願い致します。

  2. カラス

    しげぞう様

    ご返信いただきありがとうございます。
    またまた最悪です!(◎_◎;)
    エラー表示のページで公開しているとログインできなくなりました。さっきから何度も、ログインしているのですがワードプレスのログイン画面になりません。もう永久にログインできないのでしょうか?

    本当に何と言っていいやら……。

  3. しげぞう 投稿作成者

    カラス様

    返信ありがとうございます。子テーマにfunctions.phpを入れてますか?もし「子テーマ」にfunctions.phpがあるなら内容をコピーしてメモ帳などに貼り付けしておいて下さい(元に戻せるように)。
    貼り付けして保存したら一度functions.phpの内容を全部削除して白紙の状態で保存してみてもらえますか?それでエラーが解消するか確認して下さい。

    おそらくfunctions.phpが原因かと思われます。親テーマにfunctons.phpがあるのは問題ないですが、子テーマに親テーマの同じfunctions.phpと同じ記述があるとエラーになります。子テーマの他のファイルとは違ってfunctions.phpはちょっとルールが違いますので注意です。

  4. カラス

    しげぞう様

    御世話になりますカラスです。

    何とか?有料テーマを再ダウンロードしました。ですが、やはり子テーマ(child)にしてみるとサイトがエラー表示されてしまいます。親テーマだと以前と同じ様に、「通常のサイト表示」になっています。子テーマの設定に不具合があるのだと思います。
    もしお時間がございましたら、アドバイス下さると非常に助かります。今現在、子テーマにしています。自サイトURL  です。もちろん、エラー表示です。

    以上、大変恐縮ですがどうぞよろしくお願いします。

  5. カラス

    しげぞう様

    たびたびすみません。
    今回、子テーマを実装すべく、FTPをいじっていた最中に起こった出来事なので絶望的な気がします。まずプラグインを停止してみます。いつもご対応ありがとうございます。

    (カラス)

  6. しげぞう 投稿作成者

    カラス様

    コメントありがとうございます。このテーマはこれまで使えてたって事ですか?急にテーマが壊れた感じなんでしょうか?その部分を教えてもらえると助かります。
    もしこれまで普通に使えていたのであれば最近編集したファイルもしくは有効化しているプラグインに原因があるかな?と思います。
    一度全てのプラグインを一時的に停止して確認してみて下さい。

  7. カラス

    しげぞう様

    カラスです。とうとう有料テーマが壊れてしまいました。


    「壊れているテーマ

    以下のテーマはインストール済みですが、足りない部分があります。

    名前 説明
    スタイルシートが見つかりません。 削除
    親テーマが見つかりません。親テーマをインストールしてください。 削除」

    以上の項目がでてきてしまいました。「テーマ名」は削除していただけると助かります。
    もう修復の可能性はないでしょうか?
    すでに修復の可能性がなければ、しげぞう様と同じテーマでカスタマイズしてみようかなとも思っています。
    お忙しいところ誠に申し訳ありませんが、またアドバイスをいただけると助かります。
    かなり落ち込んでいますが……。