子テーマを作ってWordPressの既存テーマをカスタマイズしてみよう

WordPressでウェブサイトを運営する際、既存のテーマを使ってデザインや機能をカスタマイズしたい場面が多くありますよね。テーマファイル内のコードを直接編集すればカスタマイズは可能ですが、実はこの方法は**非推奨**です。

なぜなら、テーマの作者が機能改善やセキュリティ対策のためにテーマをアップデートすると、あなたが直接編集した内容は全て上書きされて消えてしまうからです。せっかく時間をかけてカスタマイズした内容が、テーマのアップデート一つで失われてしまうのは避けたいですよね。

そこで登場するのが「子テーマ」です。子テーマを使えば、親テーマのアップデートの影響を受けずに、安全に、そして持続的にテーマをカスタマイズすることができます。WordPressでサイトを運用するなら、子テーマの使い方はぜひマスターしておきたい必須スキルと言えるでしょう。

この記事では、子テーマの基本的な仕組みから、その作り方、そして具体的なカスタマイズ方法までを、初心者の方にも分かりやすいように解説します。

子テーマとは？基本的な仕組み

子テーマは、その名の通り「親テーマ」と呼ばれる別のテーマの機能やデザインを継承するテーマです。子テーマ自体には最低限のファイルしか含まれていませんが、足りない部分は全て親テーマから自動的に補われます。

例えるなら、親テーマが「家」の設計図全体、子テーマは「カスタマイズ箇所のメモと変更指示」のようなイメージです。WordPressはまず子テーマの指示を確認し、そこに記載がない部分は親テーマの設計図通りに表示します。子テーマに同じ名前のファイルや設定があれば、そちらが優先されます。

子テーマを構成する上で最低限必要なファイルは以下の2つです。

style.css: 子テーマの名前や親テーマを指定するヘッダー情報を記述し、主にデザイン（CSS）のカスタマイズを行います。
functions.php: 親テーマの機能に関数を追加したり変更したり、子テーマのスタイルシートを正しく読み込んだりするために使用します。

これらのファイルを用意し、WordPressのルールに従って記述することで、あなた独自の子テーマが完成します。

子テーマの作り方（実践手順）

ここでは、具体的な子テーマの作成手順をステップ形式で解説します。

1. 子テーマフォルダを作成する

WordPressがインストールされているディレクトリの中にある wp-content/themes/ フォルダを開きます。この中に、現在利用している親テーマのフォルダがあるはずです。

その themes フォルダ内に、新しく子テーマ用のフォルダを作成します。フォルダ名は、親テーマのフォルダ名に -child を付けたものなど、親テーマの子テーマであることが分かりやすい名前にするのが一般的です（例: 親テーマフォルダ名が mytheme なら、子テーマフォルダ名は mytheme-child）。フォルダ名には**半角英数字とハイフンのみ**を使用してください。

2. style.css ファイルを作成する

作成した子テーマフォルダの中に、style.css という名前の新しいファイルを作成します。このファイルの先頭に、子テーマであることをWordPressに認識させるための特別な情報を記述します。

/*
 Theme Name:   あなたのテーマ名 Child
 Theme URI:    あなたのサイトURL (任意)
 Description:  親テーマ名 の子テーマ
 Author:       あなたの名前
 Author URI:   あなたのサイトURL (任意)
 Template:     親テーマのフォルダ名 ←ここが最も重要！
 Version:      1.0.0
 Text Domain:  あなたのテーマ名-child
*/

/* ここから下にあなたのカスタマイズCSSを記述 */

上記の各項目をあなたの情報に合わせて編集してください。特に重要なのは Template: 親テーマのフォルダ名 の行です。ここに**必ず**子テーマ化したい親テーマのフォルダ名を正確に記述してください（大文字・小文字も区別されます）。この行がないと子テーマとして認識されません。

/* ここから下にあなたのカスタマイズCSSを記述 */ の部分には、後で実際にカスタマイズするCSSコードを書いていきます。

3. functions.php ファイルを作成する

次に、子テーマフォルダの中に functions.php という名前の新しいファイルを作成します。このファイルには、子テーマで追加・変更したいPHPコードを記述します。

特に重要なのは、親テーマと子テーマのスタイルシート（CSS）を**正しく読み込む**ためのコードです。以前は子テーマの style.css の中で @import ルールを使って親テーマのスタイルを読み込む方法が一般的でしたが、これはサイトの読み込み速度を低下させるため、**現在は非推奨**とされています。

代わりに、WordPressの関数 wp_enqueue_style() を使って、親テーマと子テーマのスタイルシートをキューに追加して読み込む方法が推奨されています。子テーマの functions.php に以下のコードを追加してください。

上記のコードは、my_child_theme_enqueue_styles という関数内で wp_enqueue_style() を使って親テーマと子テーマのスタイルシートを読み込み、その関数を wp_enqueue_scripts アクションフックに登録しています。これにより、テーマが読み込まれる適切なタイミングでスタイルシートが読み込まれます。

注意: 親テーマがスタイルシートを独自のハンドル名で登録している場合、上記の 'parent-style' の部分を親テーマが使用しているハンドル名に合わせる必要があります。多くのテーマはデフォルトの 'parent-style' やテーマ名を使用していますが、親テーマの functions.php を確認すると確実です。

4. スクリーンショット画像 (任意)

WordPress管理画面の「外観」→「テーマ」一覧で子テーマが表示された際に、サムネイル画像を表示させたい場合は、子テーマフォルダの直下に screenshot.png という名前で画像を配置します。推奨サイズは幅880px、高さ660pxです。

5. 子テーマを有効化する

FTPソフトやファイルマネージャーを使って、作成した子テーマフォルダを wp-content/themes/ フォルダにアップロードします。

次に、WordPress管理画面にログインし、「外観」→「テーマ」を開きます。テーマ一覧の中に、作成した子テーマが表示されているはずです。サムネイル画像が表示されていれば成功です（手順4を行っていれば）。子テーマにマウスカーソルを合わせ、「有効化」ボタンをクリックしてください。

これで、子テーマを使ってテーマのカスタマイズを行う準備が整いました。サイトの外観が親テーマと変わっていないことを確認してください。

子テーマを使ったカスタマイズの基本

子テーマが有効化できたら、実際にカスタマイズを始めてみましょう。

CSSの追加・変更

最も簡単なカスタマイズはCSSの追加・変更です。子テーマフォルダにある style.css ファイルの、先頭のヘッダー情報のすぐ下に、カスタマイズしたいCSSコードを追記していきます。

/*
 Theme Name:   あなたのテーマ名 Child
 Theme URI:    ...略...
 Text Domain:  あなたのテーマ名-child
*/

/* ここから下にあなたのカスタマイズCSSを記述 */

/* 例: サイトのタイトル色を変更 */
.site-title a {
    color: #ff0000; /* 赤色にする */
}

/* 例: 記事タイトルのフォントサイズを大きくする */
.entry-title {
    font-size: 1.8em;
}

子テーマのスタイルシートは親テーマのスタイルシートより後に読み込まれるため、親テーマで同じセレクタにスタイルが指定されていても、子テーマのスタイルが優先されて適用されます（CSSの詳細度によります）。

テンプレートファイルの上書き

「記事ページの表示レイアウトを変えたい」「ヘッダーの一部を修正したい」など、HTML構造を変更したい場合は、親テーマのテンプレートファイルを子テーマで「上書き」します。

やり方は簡単です。親テーマフォルダの中から、カスタマイズしたい箇所の表示に使われているファイル（例: 記事詳細ページなら single.php、固定ページなら page.php、ヘッダーなら header.php など）を探し、そのファイルを子テーマフォルダの**同じ階層**にコピー＆ペーストします。

その後、コピーした子テーマ側のファイルを編集します。WordPressはテーマファイルを探す際、まず子テーマフォルダを確認し、ファイルが見つかればそちらを優先して使用します。子テーマにファイルが存在しない場合は、親テーマ側のファイルを使用します。

どの部分の表示にどのテンプレートファイルが使われているかは、「テンプレート階層」というWordPressの仕組みで決まっています。最初から全てを理解するのは難しいですが、よく使うファイル（index.php, home.php, single.php, page.php, archive.php, header.php, footer.php, sidebar.php など）から少しずつ把握していくと良いでしょう。

機能の追加・変更 (functions.php)

子テーマの functions.php ファイルには、PHPを使ってWordPressの機能を追加・変更するコードを記述します。先ほどスタイルシートの読み込みのために追記したコードの下に、新しい関数を追加していく形になります。

例えば、「全ての記事コンテンツの最後に定型文を追加したい」といった場合は、以下のようにWordPressの「フック」（アクションフックやフィルターフック）を利用して関数を追加します。

この記事はゲームぽんぷーがお届けしました。'; // 追加したいHTML
    }
    return $content; // 変更したコンテンツを返す
}
add_filter( 'the_content', 'my_child_theme_add_text_after_content' );
?>

このように、フックを使うことで親テーマのコード自体を編集せずに、処理の「途中」に関数を差し込むことができます。add_action() や add_filter() がフックに関数を登録するための関数です。

子テーマの functions.php に記述した関数名が、親テーマや他のプラグインの関数名と重複するとエラーになる可能性があります。これを避けるために、関数名には子テーマ独自の名前のプレフィックス（接頭辞）を付けるようにしましょう（例: my_child_theme_ など）。

子テーマを使う上での注意点

子テーマは便利な反面、いくつか注意すべき点があります。

**常に子テーマで作業する:** カスタマイズは必ず子テーマフォルダ内のファイルに対して行ってください。誤って親テーマのファイルを編集しないよう注意が必要です。
**親テーマのファイルを削除・移動しない:** 子テーマは親テーマに依存しています。親テーマフォルダの名前を変更したり削除したりすると、子テーマが機能しなくなります。
**テンプレートファイルの上書きは最小限に:** テンプレートファイルを子テーマにコピーして編集すると、そのファイルに関する親テーマのアップデート（バグ修正など）が反映されなくなります。必要な部分だけを上書きし、可能であればフックを使うなど、影響範囲を最小限にする工夫も考慮しましょう。
**functions.php に直接コードを書きすぎない:** functions.php に記述するコードが複雑になったり大量になったりする場合は、管理のために別ファイルに分割し、functions.php から読み込むなどの工夫を検討しましょう。