MENU

WordPressで子テーマを作る方法|カスタマイズを安全に行う完全手順

wordpress:子テーマの正しい作り方

WordPressのテーマをカスタマイズしたいとき、テーマファイルを直接編集してしまっていませんか?その方法では、テーマをアップデートするたびに変更内容がすべて上書きされてしまいます。この問題を解決するのが「子テーマ」です。子テーマを使えば、元のテーマ(親テーマ)に影響を与えることなく、安全にカスタマイズを続けることができます。この記事では、WordPress初心者でも迷わず実践できる子テーマの作成手順をわかりやすく解説します。

目次

子テーマとは?なぜ必要なのか

子テーマとは、既存のテーマ(親テーマ)の機能とデザインを継承しながら、独自のカスタマイズを加えるためのテーマです。子テーマで加えた変更は、親テーマのアップデートによって上書きされることがありません。

テーマファイルを直接編集することの問題点は以下のとおりです。

  • テーマのアップデートで変更内容がすべて消える
  • 元のファイルとの差分が把握しにくくなる
  • トラブルが起きたときに原因の特定が難しい

子テーマを使うことで、これらのリスクをすべて回避できます。カスタマイズを行うなら、子テーマの利用は必須と覚えておきましょう。

子テーマの作り方:必要なファイルはたった2つ

子テーマの作成に必要なファイルは最低2つです。

  • style.css(テーマ情報とスタイルの記述)
  • functions.php(親テーマのスタイルを読み込む処理)

手順1:子テーマ用フォルダを作成する

FTPソフトまたはサーバーのファイルマネージャーを使って、/wp-content/themes/ 以下に新しいフォルダを作成します。フォルダ名は親テーマのフォルダ名に -child を付けた名前にするのが一般的です。

例:親テーマのフォルダが swell の場合 → swell-child

手順2:style.css を作成する

作成したフォルダ内に style.css ファイルを作成し、以下の内容を記述します。

/*
Theme Name: SWELL Child
Template: swell
*/

Theme Name には子テーマの任意の名前を、Template には親テーマのフォルダ名を正確に記述してください。フォルダ名が間違っていると子テーマが正しく認識されないので注意が必要です。

手順3:functions.php を作成する

同じフォルダに functions.php を作成し、以下のコードを記述します。このコードによって、親テーマのスタイルシートが正しく読み込まれます。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_styles' );
function my_child_theme_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
?>

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

ファイルの準備ができたら、WordPressの管理画面から有効化します。

  1. 管理画面の「外観」→「テーマ」を開く
  2. 作成した子テーマがサムネイル一覧に表示されていることを確認する
  3. 子テーマにマウスを合わせて「有効化」をクリックする

有効化後もサイトの見た目が変わらなければ、正しく設定できている証拠です。

子テーマでできるカスタマイズの種類

子テーマを有効化したあとは、以下のようなカスタマイズが安全に行えます。

  • CSSの追記・上書きstyle.css にスタイルを追加するだけでデザインを変更できます
  • テンプレートファイルの上書き:親テーマと同名のPHPファイルを子テーマに配置すると、子テーマ側が優先されます
  • functions.phpへの機能追加add_actionadd_filter を使って機能を拡張できます

SWELLテーマで子テーマを使う場合の注意点

SWELLテーマを使っている場合は、SWELL公式サイトから専用の子テーマが無料で配布されています。自分でゼロから作るよりも、公式の子テーマをダウンロードして使うほうが確実で手間もかかりません。

また、SWELLはカスタマイザー(外観 → カスタマイズ)からGUIで設定できる項目が豊富です。コードを書かずに済む場面も多いため、まずはカスタマイザーで対応できないかを確認してから、子テーマのCSSを活用するという順番がおすすめです。

まとめ

WordPressで安全にカスタマイズを続けるためには、子テーマの活用が基本中の基本です。必要なファイルは style.cssfunctions.php の2つだけで、手順もそれほど難しくありません。テーマのアップデートを恐れず、自由にサイトをカスタマイズできる環境を整えるためにも、ぜひ今日から子テーマを使い始めてみてください。また最近のテーマ(例えばswellやcocoonなど)ではあらかじめ、作者が子テーマを準備してくれているので、最初から子テーマを使うようにしましょう。

この記事を書いた人

WEB制作会社勤務
フロントサイドプログラマー兼デザイナー
休みの日はネコと遊ぶか、家の近くのサウナでリフレッシュ
好きな言葉:小さなことからコツコツと

目次