アップデートしても安心!WordPressに子テーマをインストールする方法

WordPressのテーマ(テンプレート)をインストールしたら、今度は「子テーマ」をインストールしましょう。

子テーマは、サイトをカスタマイズしていく際に非常に便利で、WordPress codexでも、既存テーマの変更方法として推奨されています。

さて、子テーマ子テーマと言われても、正直「何ソレ?」って感じですよね。
僕もはじめは、「何言ってるか全然わかんない(サンドウィッチマン風)」状態でした。笑

今回は、子テーマについてとその作成方法、インストールまでを解説していきたいと思います。
 
 

スポンサーリンク

子テーマとは

子テーマとは、既存の(すでにインストールしている)WordPressテーマのカスタマイズ専用テーマのことを指します。

一般的に、既存のWordPressテーマが「親テーマ」、親テーマの機能とスタイルを引き継いだ編集専用のテーマを「子テーマ」と呼びます。
 
 

どうして子テーマが必要なの?

ここまでの解説だと、いまいち子テーマの必要性にピンと来ないと思います。

WordPressを始めたばかりの人にとっては少しややこしいですし、
いちいち編集専用のテーマなんて作らなくたって、親テーマを直接編集すればいいじゃん。
って思われている方も多いと思います。

もちろん、それでも全然構わないのですが、親テーマを直接編集すると少し面倒くさいことが起きてしまうんです。

WordPressの親テーマは、新しい機能が追加されたりするとアップデートを行います。
(中には自動でアップデートするテーマもあります。)

親テーマは、アップデートが行われると、お構い無しに全てのファイルを上書きし、今までのカスタマイズを無かったことにしてしまいます。

せっかくコツコツとカスタマイズを重ね、自分好みのサイトになってきたところだったのに、
テーマがアップデートしたことでサイトが初期状態に戻ってしまった、ということも簡単に起きてしまうのです。

この時はあれです。
ドラクエのセーブデータが消えたときの、悪魔のBGMが脳裏をよぎります。

親テーマのアップデートの度に、こんなことになってたら、たまったもんじゃないですよね。

そこで活躍するのが、「子テーマ」というわけです。

なんと、子テーマで行われたカスタマイズは、何度テーマがアップデートされても、維持され続けます。

さらに、子テーマは親テーマを引用しつつ、カスタマイズしたいものだけを新しく定義することができます。
この仕組みを簡単に説明すると、例えば、WordPressには必ず「style.css」というスタイルシートが存在しますが、これを以下のように定義します。
 
 
親テーマのstyle.css

 
 
子テーマのstyle.css

 
 
既存のテーマである親テーマでは「color」が#000「font-size」が15pxと定義されており、
子テーマでは「color」は定義なし「font-size」は10pxと定義されています。
この場合、サイトへはこのように反映されます。

子テーマでは「font-size」しか定義していないので、「color」は親テーマの内容をそのままに、
「font-size」は子テーマの内容で上書きされ、サイトへと反映されます。
 
 

スポンサーリンク

子テーマを作成・インストールする

それでは、実際に子テーマの作成とインストールに移っていこうと思います。

今回は例として、WordPressのデフォルトテーマ「Twenty Fifteen」を使って、
作成方法を解説していきます。
 
 

手順.1 子テーマ用のフォルダを作成

まず、子テーマ用のフォルダを作成します。フォルダ名は何でもOKです。
今回は、「Twenty Fifteen」の子テーマなので、「Twenty Fifteen-Child」というフォルダ名で作成しました。
 
子テーマ用のフォルダを作成
 
 

手順.2 子テーマに必要なファイルを作成

手順.1で作成したフォルダの中に、以下の空ファイルを作成します。

・style.css
・functions.php

 
フォルダの中に空ファイルを作成
 
 

手順.3 子テーマ用のコードを書く

手順.2で作成した「style.css」に以下のコードを記入します。

 
 
記入した項目を説明すると、

  • Theme Name
    子テーマの名前(この場合は「Twenty Fifteen-Child」)
  •  

  • Theme URl
    子テーマのURl(ある場合は設定)
  •  

  • Description
    子テーマの説明
  •  

  • Author
    子テーマの作者(あなたの名前)
  •  

  • Template
    親テーマのフォルダ名(この場合は「twentyfifteen」)
  •  

  • Version
    子テーマのバージョン

 
 
という内容になっています。

このように記述すれば、このファイルをWordPressに子テーマとして認識させることができます。

他のテーマで利用する場合には、Template:の「twentyfifteen」部分を、他のテーマの親テーマフォルダ名に変更してください。

※1 必須項目は「Theme Name」と「Template」だけなので、他の項目は入力しなくてもかまいません。
※2 大文字・小文字を区別するので、間違わないようにしっかり記述しましょう。

 
 

手順.4 functions.phpの編集

手順.2で作成した「functions.php」に以下のコードをコピペしてください。

これを記述することにより、親テーマのスタイルが子テーマに引用されるようになります。
 
 

手順.5 子テーマ用のフォルダをアップロード

作成・編集した「style.css」、「functions.php」の入った子テーマ用のフォルダを、
FTPツールを使って、「ドメイン名/public_html/wp-content/themes」以下にアップロードします。
 
子テーマ用のフォルダをアップロード
 
 

手順.6 子テーマを有効化する

最後にWordPressの管理画面から『外観テーマ』という順に進み、
作成した子テーマを有効化します。
 
子テーマを有効化

これで子テーマのインストールは完了です。
 
 

スポンサーリンク

子テーマを用いてのカスタマイズ方法

子テーマを用いてファイルをカスタマイズする方法は非常に簡単です。

例えば、ヘッダーをカスタマイズしたい場合、手順.5でアップロードした子テーマフォルダの中に、「header.php」を作成、もしくは親テーマフォルダ内にあるオリジナルの「header.php」をコピペし、そのファイルを編集していけばOKです。

一般的には、親テーマの内容をすべてコピーして、子テーマフォルダ内に貼り付け、
カスタマイズしたいところだけ編集していくかたちになります。
 
 
作業は以上となります。
お疲れ様でした。
 
 

まとめ

今回は、子テーマについてとその作成方法、インストールまでを解説しました。
なかなか長ったらしい文章になってしまい、すみませんでした。

「親テーマ」やら「子テーマ」やら、はじめは「何言ってるか全然わかんない(サンドウィッチマン風)」状態に陥ると思いますが、WordPressの使い方に慣れていくうちに、その仕組みも自然と分かってきますので、無理して頭に詰め込もうとしなくても大丈夫です。

そのうち、「あっ、子テーマ入れてて良かったー。」と感じる日が来ると思うので、
子テーマをインストールした後は、魅力的なコンテンツを増やしていくことに注力していきましょう。
 
 

スポンサーリンク