WordPressの子テーマを作成する

WordPressの子テーマとは

親テーマを直接修正せずに、「style.css」、「header.php」や「functions.php※」などを上書するのが子テーマです。

※「functions.php」は、上書きされないので注意が必要。
他のファイルは読み込み順序が『親テーマ→子テーマ(上書き)』。
functions.phpは読み込み順序が『子テーマ→親テーマ(追記)』。
よって、functions.phpを修正するには、

1. 親テーマの変更箇所を削除
2. 変更内容を追加

する処理が必要。

子テーマフォルダ準備

以下の場所に子テーマ用のフォルダを準備します。
*WordPressインストールフォルダ*/wp-content/themes/

フォルダの名前はなんでもOKです。ここでは多くの説明サイトをまねて「stinger-child」とします。
また、「stinger-child」フォルダ内に画像を保存するための「images」フォルダを作成します。

(以下のようなフォルダ構成になります。)
*WordPressインストールフォルダ*/wp-content/themes/stinger-child/
*WordPressインストールフォルダ*/wp-content/themes/stinger-child/images/

style.cssの修正・上書き

<サマリ>
1. 親テーマのstyle.cssをダウンロード
2. style.cssを修正(記載必須事項)
3. style.cssを修正(カスタマイズに合わせて)
4. 子テーマフォルダにアップロード

1. 親テーマのstyle.cssをダウンロード

まず、FTPソフト等で親テーマのstyle.cssをローカルフォルダにダウンロードします。
<親テーマのstyle.css置き場所>
*WordPressインストールフォルダ*/wp-content/themes/stinger3ver20140327/
※親テーマが『stinger3ver20140327』の場合。

2. style.cssを修正(記載必須事項)

style.cssを修正します。
まず、style.cssの冒頭に以下を記載します。

『Theme Name:』
子テーマの名称を記載します。
『Template:』
ベースとなる親テーマのディレクトリ名を記入します。
これ以降は親テーマの内容をコピー&ペーストします。
この内容を次項で任意に修正します。

尚、親テーマのcssをすべてコピーする方法のほかに、『@import url(‘アドレス’);』を用いて親テーマを呼び出すことも可能です。

上記に加えて以下の内容を記載することもできます。
/*
Theme Name: 子テーマの名前(必須)
Template: 親テーマのディレクトリ名(必須)
Theme URI: 子テーマのURI
Description: 子テーマの説明・概要
Author: 作者の名前
Author URI: 作者のURI
Version: バージョン情報
*/

3. style.cssを修正(カスタマイズに合わせて)

「@import」に続く行に修正したいcssの内容を記載します。

4. 子テーマフォルダにアップロード

修正したstyle.cssを上記で準備した子テーマフォルダにアップロードします。

header.phpの修正・上書き – Google Analyticsの設置

<サマリ>
1. 親テーマのheader.phpをダウンロード
2. header.phpを修正(google analyticsのコードを内に追記)
3. 修正後のheader.phpを子テーマフォルダにアップロード

1. 親テーマのheader.phpをダウンロード

FTPソフト等で親テーマのheader.phpをローカルフォルダにダウンロードします。
<親テーマのheader.php置き場所>
*WordPressインストールフォルダ*/wp-content/themes/stinger3ver20140327/

2. header.phpを修正(google analyticsのコードを内に追記)

google analyticsのコードを内に追記します。

3. 修正後のheader.phpを子テーマフォルダにアップロード

修正後のheader.phpを子テーマフォルダにアップロードします。

参考

Ceatant Official Blog – WordPress子テーマを作成し任意のphpをカスタマイズする方法

【WordPress】テンプレートSTINGER5カスタマイズ「子テーマ」の作り方 | 二毛メモランダム