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

前回までの記事で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」と同じ記述があると機能しないので、追加したい内容だけ記述する事になります。まあ、このファイルだけはどうしてもという時意外は触らないのがいいでしょう。

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

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    kurina様

    コメントありがとうございます。これはおそらく「半角のスペース」かとおもいます。これなぜか上手く消せないので新たに追記を追加しておきました。わざわざありがとうございます!!ホントに助かります(^^)

  2. kurina

    すばらしい記事をありがとうございます。
    おかげ様で、何も知らないところからブログの試し書きが出来るところまでたどり着くことが出来ました。

    話しはかわりますが、お忙しいところ申し訳ないのですが一つお願いがあります。

    「子テーマの作り方と有効化する方法【図解】」の記事におきまして、
    例として、
    ****************************
    /*
    Theme Name: Child
    Template: twentytwelve
    */
     
    @import url(‘../twentytwelve/style.css’);
    ****************************
    と掲載していただいておりましたが、
    */ と @import  の間の一見「空白行」に見える所に何か一文字入っている様で、単純にコピーするだけでは親テーマのstyle.cssが読み込めていないようでした(削除することで読み込めるようになりました)。

    出来ましたら掲載していただいてる上記例文も同様の対応をしていただけますと私のような何も知らない(単純にコピーをしてしまう)人にとってはありがたいと思います。

    対応ご検討いただけませんでしょうか。
    よろしくお願いいたします。

  3. ホワイト

    しげぞう様

    はじめてコメントさせていただきます。ホワイトと申します。
    こちらの記事のおかげで問題が解決しました。
    ありがとうございます。

    子テーマを作って有効化したところ、デザインが崩れてしまい、あちらこちらのブログを参考に5時間以上格闘していましたが、全然元に戻りませんでしたが、こちらの記事の通りに、1つ1つ見直しながら修正しましたら一発で元通りです。

    初心者にも本当にすごーーーく分かりやすい、非常にすばらしい記事をありがとうございます!

  4. しげぞう 投稿作成者

    苺あめ様

    わざわざありがとうございます。私も最初は全く理解できなくて色々なサイトを見て回りました。私自身も1つの事を理解するのを非常に時間のかかるタイプなので、勉強した知識が還元できるのは非常に嬉しいですし、少しでも参考になれば嬉しいです。今後もどうぞよろしくお願い致します。

  5. 苺あめ

    子テーマについて色々調べてもまったく理解できなかったおバカな私ですが、こちらの記事に
    たどりつき10分足らずで子テーマ作成に成功致しました。

    本当に本当にありがとうございます。

  6. リヴァイアス

    しげぞう様

    お世話になっています。
    過去記事を読み返して このトゥエンティトゥエルブ?は多くの方が使っていらっしゃるとの事で 検索してみました所解決しました。

    ご親切に対応していただきありがとうございました。

  7. リヴァイアス

    ご回答ありがとうございます

    おっしゃられた点を改善した所、やはりテーマが壊れており表示されませんでした。
    一旦削除して再度読みながらやってみましたが結果は変わりません。

    テーマインストールもスタイルシートで確認出来ているので問題ないと思いますが、
    style.cssの記入がイマイチ自身がありません。こちらの記事の画像のまま記入しているのですが……以下の通りになります。

    /*
    Theme Name: Child
    Template:Twenty Twelve
    /*

    @import url(‘../Twenty Twelve/style.css’);

    スラッシュ部分で区切っている所に問題があるのでしょうか?

  8. しげぞう 投稿作成者

    リヴァイアス様

    コメントありがとうございます。子テーマは親テーマのファイルを引き継ぐので、親テーマ「Twenty Twelve」のテーマがインストールされているか確認してみて下さい。無ければテーマでTwenty Twelveを検索し、インストールしておく必要があります。その後子テーマは有効化できると思います。

    子テーマが上手く適応できない原因として考えられるのは2つです。

    1つは上記で書いたように親テーマがインストールされていない。そして2つ目は子テーマ作成時に最初のstyle.cssの記述にミスがあるかという部分です。

    なので、スタイルシートに記述ミスがないのであればおそらく親テーマのインストールが原因かと思います。