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

WordPress子テーマの作り方 WordPressの始め方

今回はWordPressの子テーマについて解説していきます。

子テーマはなぜ、何のために必要なのか?また、どのように作成したら良いのか?を図解で解説していきます。

エックスサーバーでのやり方を紹介しますが、他のレンタルサーバーでも同じ手順で作成が可能です。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

WordPressで子テーマはなぜ必要なの?

WordPressのテーマには親テーマと子テーマがあります。

子テーマは親テーマのコピーと思っておいても良いです。

なぜ2つ同じテーマが必要なのか?というと、WordPressは更新するたびにファイルが初期化されるからです。

WordPressでCSSやHTMLを編集してカスタマイズしてもテーマが更新する度にカスタマイズしたファイル達は全部初期化されてしまいます。

そのため、親テーマをコピーした子テーマを作成しておけば親テーマが更新されても子テーマは残ります。

しかも子テーマが優先的に読み込まれるので、カスタマイズした内容をそのまま残すことが可能というわけです。

なので、WordPressファイルの編集やカスタマイズなどをする場合に子テーマは必須になります。

子テーマがすでにあるならWordPressの管理画面から「テーマ」と進み、子テーマ(child)を有効化しておけばOKです。

子テーマが用意されてるテーマと自分で作成が必要なテーマがある

このサイトでおすすめしている「無料テーマのCocoon」、「有料テーマのSWELL」などは公式サイトから親テーマ、子テーマをダウンロードできますので、自分で1つ1つコピーして子テーマを作成する必要はありません。

逆にWordPressの公式テーマ(Twentyシリーズ)などは1つ1つ親テーマをコピーする必要があるので面倒です。

そのため、最初から「Cocoon」もしくは「SWELL」を利用することをおすすめします。

WordPressで初心者におすすめのテーマはどれ?無料のCocoon、有料のSWELLがおすすめ
WordPressをインストールしたら最初に行うのがテーマ(テンプレート)選びで...

CocoonやSWELLで子テーマ作成方法

WordPressのテーマは無料のCocoonもしくは有料のSWELL推奨です(子テーマの適用も簡単)。

どちらも公式サイトからテーマをダウンロードしてWordPressの管理画面でアップロードできます(やり方は同じ)。

テーマの公式サイトから親テーマと子テーマが用意されているのでダウンロードしておきます。

WordPressの管理画面から「外観」⇒「テーマ」⇒「新規追加」をクリック。

swellテーマのアップロード1

「テーマのアップロード」⇒「ファイルを選択」をクリックしてダウンロードした「SWELL 本体最新版」を選択し「今すぐインストール」をクリック。

swellテーマのアップロード2

同じ手順で公式サイトからダウンロードした「子テーマ(swell_child.zip)」を選択し「今すぐインストール」をクリック。

swellテーマのアップロード4

インストールできたらこの「子テーマ」を有効化します。

swellテーマのアップロード5

とても簡単です。

【図解】Cocoonが見つからない?Cocoonのダウンロードとインストールの手順
今回はWordPress(ワードプレス)の無料テーマ「Cocoon(コクーン)」...

公式テーマ(Twentyシリーズ)などで子テーマを作成する手順

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

手順としては以下のような流れになります。

  1. 親テーマのテーマ名を確認する
  2. ファイルマネージャーから子テーマを追加
  3. 子テーマを有効化してみる
  4. スタイルシート(CSS)以外のphpファイルを子テーマに追加する

今回はエックスサーバーでのやり方を紹介します。

1.親テーマのテーマ名を確認する

WordPressの管理画面から「外観」⇒「テーマ」と進み、「新規追加」。

子テーマの作成方法1

検索窓があるので利用したいテーマ(今回はTwenty Twelve)と入力して検索してインストールしておきます。

子テーマの作成方法2

インストールできたらWordPressの「外観」⇒「テーマファイルエディタ」と進み、親テーマを選んで「選択」をクリック。

子テーマの作成方法3

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

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

子テーマの作成方法4

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

2.ファイルマネージャーから子テーマを追加

WordPressを構成するフォルダに子テーマを追加していきます。

エックスサーバーの場合はログインして「ファイル管理」へ(ロリポップならロリポップFTP)。

子テーマの作成方法5

子テーマを追加するドメイン名を選択⇒「public_html」⇒「wp-content」⇒「themes」とクリックして行きます。

子テーマの作成方法6

これでWordPressのテーマが入っているフォルダ「themes」までやってきました。テーマフォルダの中に「子テーマのフォルダ」を作成すればいいという訳です。「themes」のフォルダで任意のフォルダ名(私の場合はchild)をつけて作成します。

「新規フォルダ」をクリックして子テーマ名(child)というフォルダを作成します。文字コードはUTF-8で「作成」。

子テーマの作成方法7

するとファイル一覧のところに今作成した子テーマのフォルダ(child)が表示されますのでそれをクリック。

子テーマの作成方法8

この子テーマの「フォルダ」の中にスタイルシート「style.cssファイル」を作成します。ファイルですのでフォルダと間違わないように。ファイル名は「style.css」と入力してファイル作成をクリック。文字コードはUTF-8で「作成」。

子テーマの作成方法9

これで子テーマ(child)のフォルダの中にスタイルシート「style.css」というファイルが追加されましたので、「style.css」を選択して「編集」をクリック。

子テーマの作成方法10

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」にして更新。

子テーマの作成方法19

これで子テーマにスタイルシートが作成できたのでこの子テーマを有効化していきましょう。

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

新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。

WordPressの管理画面から「外観」⇒「テーマ」と進むと、先ほど作った「Child」というテーマがありますので、「有効化」をクリック。

子テーマの作成方法12

するとこの子テーマが有効化されます。以上でテーマの有効化は完了です。

一度サイトの表示を確認するとそのまま親テーマと同じように表示されるはずです。これで子テーマにスタイルシートが追加できました。

子テーマに追加したスタイルシートに関しては親テーマの記述がインポートされてますので、スタイルシートをカスタマイズする場合には変更したいコードだけをどんどん下に追加していけばOKです(CSSは後に書いた物が優先的に反映されるため)。

※スタイルシートの場合です。

4.スタイルシート(CSS)以外のphpファイルを子テーマに追加する

上記の手順でスタイルシートを子テーマに追加しましたが、他のphpファイル「header.php」とか「single.php」とかを子テーマに追加する場合もほとんど同じです。

ただ、スタイルシートのように「インポート」は使わずに親テーマの内容まるごとコピーして子テーマに追加します。

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

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

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

それでコピーした子テーマの「comments.php」をカスタマイズする訳です。

子テーマに「single.php」も追加してみよう

練習も兼ねて子テーマに「single.php」も追加してみましょう。

まずは先ほど同様にファイル管理で、「public_html」⇒「wp-content」⇒「themes」⇒「Child(先ほど作った子テーマ)」とクリックして行きます。

この子テーマ「Child」フォルダの中に新規ファイルを追加。

子テーマの作成方法13

「single.phpファイル」を作成します。ファイルですのでフォルダと間違わないように。ファイル名は「single.php」と入力して「ファイルを作成」をクリック。

子テーマの作成方法14

これで子テーマ(child)のフォルダの中に「single.php」というファイルが追加されましたので、「single.php」を選択して「編集」をクリック。

子テーマの作成方法15

ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加する必要がありますので、一度このまま放置します。

別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマファイルエディタ」と進み、右上の「編集するテーマを選択」という部分から親テーマ(twenty twelve)を選び、「選択」をクリック。

子テーマの作成方法16

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

子テーマの作成方法17

コピーしたら先ほどの放置いていたエックスサーバーのsingle.phpのファイルの中身に貼り付けして「更新」。文字コードは「UTF-8」。

子テーマの作成方法18

これで子テーマのsingle.phpも完成です。

このような手順で作成して行きます(functions.phpだけは例外です)。注意点はCSSの時にも書いたように「保存文字コード」を「UTF-8」にしておく事です。

MEMO

親テーマの全部のファイルを子テーマに追加する必要はありません。

子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更やカスタマイズする予定のファイルだけを子テーマにコピーしていけばOKです。

それと子テーマに「functions.php」を追加する場合には注意が必要です。

このファイルはそのまま親テーマの記述をコピーしてしまうとエラーが発生してブログが表示されない状態になりますので、子テーマに追加する場合は注意が必要です。

以上子テーマの追加方法でした。

WordPressブログの始め方と必要なものや料金、収益化までのまとめ【超初心者向け】
独自ドメインの取得方法、WordPressを始めるためのおすすめのレンタルサーバ...

コメント

  1. しげぞう より:

    てつ様

    返信ありがとうございます。これは記事にも書いてますが、子テーマ名はchildにしてます。また、それとは別に親テーマのTheme Nameを確認してください。親テーマをインポートするための記述に親テーマ名を書く部分があります。

  2. てつ より:

    ご返信ありがとうございます。
    「親テーマのテーマ名を記述する部分があるので、そこだけTwenty Seventeen用に変更」との事ですが、これは自分で勝手にテーマ名を決めて変更したので良いのでしょうか?
    しげぞうさんなら、どのようなテーマ名にするか参考にお聞かせ願いますか?

  3. しげぞう より:

    てつ様

    コメントありがとうございます。そうですね、テーマは違っても手順は同じです。ただ、親テーマのテーマ名を記述する部分があるので、そこだけTwenty Seventeen用に変更してください。

  4. てつ より:

    お世話になります。
    自分のテーマは「Twenty Seventeen」なのですが、Twenty Seventeenで子テーマを作る場合も同じように作業したので良いのでしょうか?

  5. しげぞう より:

    カラス様

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

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

  6. カラス より:

    しげぞう様

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

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

  7. しげぞう より:

    カラス様

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

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

  8. カラス より:

    しげぞう様

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

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

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

  9. カラス より:

    しげぞう様

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

    (カラス)

  10. しげぞう より:

    カラス様

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

  11. カラス より:

    しげぞう様

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


    「壊れているテーマ

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

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

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

  12. しげぞう より:

    ボックル様

    返信ありがとうございます。ナビメニューのテキストやリンク先などは自分で作成する必要があります。最初は多分「ホーム」だけある感じではないかと思います(テーマによって違うかもしれませんが)。

    ホーム以外のナビテキストやリンクは自分で追加して設定していけます。
    ⇒https://affiliate150.com/navigation-menu

  13. ボックル より:

    いつもお世話になっています。
    しげぞうさんの記事を参考に子テーマを作成してみましたが、ナビゲーションメニューのところが、親メニューと違いうまく反映されません。上記に書かれていることを試してみましたがうまくいきませんでした。
    アドバイスをよろしくお願いします。

  14. マサト より:

    ページ制作がだいぶ進んでから子テーマというものに気づいて頭を抱えておりました。
    そんな中、こちらのページに出会い、おかげさまで悩みが一気に解消できました!
    ちょうどロリポップ使っていたので本当に助かりました。
    丁寧な記事を書いて頂いて、ありがとうございました。
    入院生活されていたようですが、どうぞご自愛下さいませ。

  15. りかこ より:

    しげぞう様、返信遅くなってしまって申しわけありません。
    ご教授ありがとうございます。
    かなり時間がかかってしまいましたが、無事パソコンにも反映できました。
    テーマをいじるのはまだまだ怖いところがありますが、これからもよろしくお願いします。
    ありがとうございました。

  16. しげぞう より:

    りかこ様

    コメントありがとうございます。超初心者の方という事なのでちょっと難しいと思うのですが、我慢して読んでみて下さい。

    えっと原因については実際にサイトを見てチェックしてみないとハッキリは分かりませんが、1つ考えられるのは条件分岐かなと思ったので少し書いてみます。

    WordPressの最近のテーマはレスポンシブデザインとなっていてPC版のカスタマイズもスマホ版のカスタマイズも「1つのCSS」でできます。それぞれPC用とかタブレット用とかスマホ用のCSSを1つにまとめているのでCSSの途中に条件分岐というのがあります。

    条件分岐はブラウザのサイズでPC、タブレット、スマホと分けている感じです。

    @media screen and (min-width: ●●px)みたいな記述があると思います。

    PCなら●●スマホなら●●って感じでそれぞれの端末別に色やフォントサイズなどを変更していく事ができます。これが条件分岐なんですが、スマホの条件分岐の部分にカスタマイズのコードを入れるとPCには反映されないという事があります。

    また、利用されているプラグインが影響している場合もありますので、一度全てのプラグインを一時的に停止してからブログを表示させ、リロード(再読込み)してから確認してみて下さい。

    冒頭でも書いたように原因は見てみないとハッキリしませんので、もし良かったらブログのURLと使っているテーマ、それからどの部分が反映されないのか?という部分を教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  17. りかこ より:

    初めまして。こんにちは。
    ワードプレスを使い始めて、数ヶ月の超初心です。
    やっと子テーマを作成して、カスタマイズ?をしてみたのですが、スマホで見ると反映されいるのに、パソコンで見ると反映されません。
    調べても全然対応策がわからないので、ご教授お願いします。

  18. しげぞう より:

    81jin様

    コメントありがとうございます。子テーマを作る場合は親テーマもインストールされている必要がありますので親テーマがインストールされているか?を確認する必要があります。確認するには外観⇒テーマと進みSTINGER7(親テーマ)が表示されているか?有効化できるか確認してみると良いと思います。

    また、STINGER7は親テーマだけでなく、子テーマもダウンロードできるのではないかと思いますので、これだと面倒な事なく、子テーマができるかと思います。こちらの記事にありました。

    http://web-ashibi.net/archives/419

  19. 81jin より:

    はじめまして。こんにちは。
    今、子テーマを作ってる最中なんですが、
    ロリポップからワードプレスに戻って、
    テーマを見ても
    【壊れているテーマ
    以下のテーマはインストールされていますが不完全です。テーマにはスタイルシートとテンプレートが一つずつ必要です。
    Child 親テーマが見つかりません。”STINGER7″ の親テーマをインストールしてください。】

    と表示されて先に進めないでおります。。。
    ご教授願いたいです。
    よろしくお願いします。

  20. ひさか より:

    ありがとうございます。ワードプレスのログイン画面で●をチェックしたら、150%になっていました。
    ありがとうございます。
    何でもご存知ですね!
    悩みが解決しました。本当にありがとうございました。

  21. ひさか より:

    しげぞう様

    おはようございます。いつもありがとうございます。
    いま●三つのところ(ズーム)を確認しましたら、100%となっていました。
    ちなみに■のところをクリックしたら更に大きくなったので、ズームにはなっていないのですね?無知ですみません。
    ありがとうございます。

  22. しげぞう より:

    ひさか様

    返信ありがとうございます。Chromeが特大バージョンという事であればもしかしたらズームしているだけかもしれませんので、ブラウザの右上のメニュー(3つの●が縦にならんでるやつ)をクリックして「ズーム」の部分をチェックしてみて下さい。

  23. ひさか より:

    しげぞうさま

    いつも、迅速にお返事くださってありがとうございます。
    chromeで開いた私のページが、特大バージョンで、IEなら、普通に表示されるので、
    カスタマイズするのにIEを使ってみようと思いました。
    プラグインとは何のことですか?またキャッシュの消し方などわからないので、息子にそのあたりは聞いてみます。
    色々とありがとうございました。

  24. しげぞう より:

    ひさか様

    Chromeでログインできるなら問題はないと思います。IEのバージョンが古いとか、ブラウザ自体のキャッシュとか何が原因かは分からないのですが、とりあえずChromeでログインできるならそちらを使うべきかなと思います。

    もしはっきりさせたい場合には原因の切り分けが必要になりますので、例えばChromeでログインしておいてプラグインを全部一時的に停止してIEで確認するとか、IEブラウザでの以前のデータ(キャシュ)をクリアしてみるとか1つ1つ試していく必要があるため、時間がかかるかもしれません。

    多分守備範囲以外なのでサーバーなどに問合せしても答えてもらえる可能性は高くないとは思うのですが、一応利用しているサーバーへの問合せをしてみても良いかなと思います。

  25. ひさか より:

    しげぞうさま

    早速のお返事ありがとうございます。
    chromeからはログインできるのですが、IEからのログインができません。
    宜しくお願い致します。

  26. しげぞう より:

    ひさか様

    返信ありがとうございます。Chromeの場合にWordPressにログインできないのでしょうか?それともどのブラウザでもログインできないのでしょうか?

    まずは「ログインページURL」、「ユーザー名」、「パスワード」の3つが間違っていないか確認してみて下さい。
    特にログインページは最初間違えやすいのでこちらの記事もどうぞ。
    ⇒https://affiliate150.com/wordpress-login

  27. ひさか より:

    しげぞう様

    ありがとうございます。度々、申し訳ありません。
    パソコンの動きが悪いので、普段はchromeを使っていますが、時々、IEを使います。
    先程も、IEで開いて、初めて自分のサイトを見たところ、大丈夫でした。
    どうも、chromeがダメみたいです。
    それで、ログインしようとしたら、全くできません。
    ユーザーネームもメルアドでもダメでした。どうぞ、お助けをお願いします。

  28. しげぞう より:

    ひさか様

    コメントありがとうございます。IEはインターネットエクスプローラーです。safariとかGoogleChromeとかFirefoxとか色々なブラウザがあってそのうちIEだけおかしいという事かなと思います。ひさか様が使っているブラウザが分からないのですが、もしかしたらIEかもしれません。

    それで、それぞれのブラウザにはズーム機能などもついてるので、ブラウザのズーム機能かもしれませんので、まずはちょっと調べてみて下さい。おかしいと確認された方のブラウザも分からないのですが、古いIEのバージョンだとCSSなども反映されない部分などもあります。

  29. ひさか より:

    しげぞう様

    お世話になります。あれから、時間がなく、子テーマはまだカスタマイズはしていません。
    ぼちぼち時間をとり、始めようと思いますが、その前に一つお聞きしてもいいですか?
    今もその状態なのですが。子テーマを作る前に、普通に親テーマをカスタマイズしていた時に、ページがおかしくなってしまったのです。
    styleシートを触っていた直後ではなかったと思いますが、ブログを書いたりいろいろしていて、管理画面で、カチャカチャとダブルクリックしたら、突然、管理画面の文字が、特大になってしまいました。
    恐る恐る、サイトを確認したら、そちらも特大になってしまってました。
    直し方が分からず、そのままで、更新でなおるかと思ったり期待しても無理でした。
    スマホでは大丈夫ですし、タブレットで見ても大丈夫なんです。
    先日、コメントをもらいまして、safariではいいけど、I.E.で見るとおかしいとの内容でした。
    I.Eが何かわかりません。私のパソコンの問題でしょうか?
    ご指導の程、宜しくお願い致します。

  30. ひさか より:

    しげぞう様

    こんにちは。お世話になりました。
    無事、子テーマを作る事が出来ました。
    今後、カスタマイズにチャレンジしていきます。
    また、躓いたら、お願い致します。
    ありがとうございました。