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

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

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

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

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

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

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

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

このサイトでおすすめしている「無料テーマの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

とても簡単です。

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

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

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

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

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

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

ロリポップ利用している方はこちらの記事でやってみてください。

【図解】子テーマの作り方と有効化する方法【ロリポップ版】
前回までの記事でWordPressをカスタマイズするには子テーマを最初に作ってお...

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

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

新テーマ-1

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

新テーマ-2

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

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

テーマの編集-1

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

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

テーマの編集-2

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

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

WordPressを構成するフォルダに子テーマを追加する必要があるのですが、WordPressを構成するフォルダへ行く場合には「ファイルマネージャー」にログインする必要があります。

エックスサーバーの「インフォパネル」にログインすると「ファイルマネージャー」にログインする項目があります(直接ファイルマネージャーにログインしてもOK)。

エックスサーバーファイルマネージャー-2

子テーマを追加するドメイン名を選択。

エックスサーバー子テーマ-11

次に「public_html」をクリックします。この「public_html」の中にWordPressのファイル達があります。

エックスサーバー子テーマ-8

ここからは「wp-content」⇒「themes」とクリックして行きます。

エックスサーバー子テーマ-9

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

画面右下にフォルダを作成するコーナーがありますので、ここで子テーマフォルダ名を入力して「フォルダの作成」をクリック。

エックスサーバー子テーマ-13

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

エックスサーバー子テーマ-14

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

エックスサーバー子テーマ-15

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

エックスサーバー子テーマ-17

「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」にしておき、「編集」をクリックすると保存されます。

エックスサーバー子テーマ-18

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

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

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

テーマ構成-3

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

子テーマ-10

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

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

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

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

Stinger-10

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

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

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

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

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

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

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

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

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

まずは先ほど同様にエックスサーバーのFTPからログインし、最初に画面右下の「ファイル名の文字コード」が「UTF-8」になっているか確認。

エックスサーバー子テーマ-12

「ファイル名の文字コード」を「UTF-8」に切り替えたら子テーマを追加するドメイン名を選択。

エックスサーバー子テーマ-11

次に「public_html」⇒「wp-content」⇒「themes」⇒「Child(先ほど作った子テーマ)」とクリックして行きます。

子テーマ作成-1

この子テーマ「Child」の中に「single.phpファイル」を作成します。

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

子テーマ作成-2

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

子テーマ作成-3

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

別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。

テーマ構成-1

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

テーマ構成-2

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

子テーマ-11

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

子テーマ-13

コピーしたら先ほどの放置いていたエックスサーバーのsingle.phpのファイルの中身にペースト。

子テーマ作成-5

それで後は「保存文字コード」を「UTF-8」にして「編集」をクリックで完了。

子テーマ作成-4

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

テーマ構成-1

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

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

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

それと子テーマに「functions.php」を追加する場合には注意が必要です。このファイルはそのまま親テーマの記述をコピーしてしまうとエラーが発生してブログが表示されない状態になります。「functions.php」を子テーマに追加したい場合には先に次の記事を読んでおいて下さい。

子テーマに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. しげぞう より:

    カラス様

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

タイトルとURLをコピーしました