WordPressの子テーマ作成方法：初心者でも簡単にできるカスタマイズガイド

WordPressサイトをカスタマイズしたいけれど、アップデートで変更が消えるのが心配…そんな悩みを解決するのが「子テーマ」です。本記事では、プログラミング初心者でも安心して始められる子テーマの作り方から、CSSやPHPによる効果的なカスタマイズ方法まで、解説していきます。ローカル環境がなくても今すぐ実践できるガイドです。

WordPressの子テーマとは

子テーマとは何か

子テーマとは、シンプルに言えば既存のテーマ（親テーマ）の機能や外観を継承しながら、独自のカスタマイズを加えることができる仕組みです。

技術的には、WordPressはまず子テーマのファイルを探し、それが見つからない場合に親テーマのファイルを使用するという「フォールバック」の仕組みで動作しています。つまり、カスタマイズしたいファイルだけを子テーマ側に用意すれば、残りは親テーマのものが使われます。

子テーマを作成するメリット

子テーマファイルの基本構造を作る

基本構造の作成

子テーマは親テーマに比べてはるかにシンプルな構造で、最低限以下2つのファイルさえあれば機能します。

• style.css
• functions.php

これらのファイルを正しく設定することで、WordPressは子テーマとして認識し、親テーマの機能を継承しながら動作するようになります。
まずはこの2ファイルを作成し、必要に応じて徐々に拡張していくことをお勧めします。

それでは作成していきましょう。

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/

<?php
function mytheme_child_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );

style.cssの役割

「style.css」ファイルは子テーマにとって最も重要なファイルで、この中のヘッダーコメントからテーマ情報を読み取ります。
子テーマとして認識させるためにはTheme NameとTemplateを設定すればOKです。
その他に、説明、作者情報などの基本情報を含めることが可能です。

以下は典型的なstyle.cssのヘッダー例です：

/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/twentytwentyfour-child/
Author: UserName
Author URI: https://example.com
Description: Twenty Twenty-Four の子テーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour-child
Template: twentytwentyfour
*/

• Theme Name：テーマの名前
• Theme URI：テーマの詳細情報を公開しているWebページのURL
• Author：テーマを開発した個人または組織の名前
• Author URI：テーマを開発した個人または組織のURL
• Description：テーマの簡単な説明
• Version：テーマのバージョンをX.XもしくはX.X.X形式で表記
• License：テーマのライセンス
• License URI：テーマのライセンスのURL
• Text Domain：多言語対応する場合に、翻訳ファイルと連携するのに使用されるドメイン名
• Template：親テーマのフォルダ名

このヘッダーの後に、カスタムCSSを追加していきます。

functions.phpの役割

「functions.php」ファイルは、子テーマに機能を追加するための中心的なファイルです。
最小限の実装では親テーマのスタイルシートと子テーマのスタイルシートを読み込む処理のみ記述すればOKです。
その他、追加のスクリプトやスタイルの読み込み、カスタムブロックの登録など、様々な機能の拡張を行うことができます。

一般的なフォルダ構成

拡張していくとファイルが増えてメンテナンス性が悪くなるため、フォルダ構成を検討しましょう。
基本的な構成としては以下のようになります：

child-theme/
├── style.css               # メインスタイルシート
├── functions.php           # テーマの機能を定義
├── screenshot.png          # テーマのサムネイル画像（1200×900px推奨）
├── assets/                 # 静的ファイル用ディレクトリ
│   ├── css/               # CSSファイル
│   ├── js/                # JavaScriptファイル
│   └── images/            # 画像ファイル
└── inc/                    # PHPの関数や処理を分割したファイル

CSSをカスタマイズする

ローカル環境なしでデザインを確認する方法

今回はローカル環境を使用しないため、CSSをカスタマイズする際はブラウザの開発者ツールを活用することをお勧めします。Chrome、Firefox、Safariなどの主要ブラウザには、ページ上の要素を検査し、そのCSSを確認・編集できる機能が備わっています。この機能を使って、変更したい要素のセレクタを特定し、どのようなスタイル変更が必要かを試すことができます。開発者ツールで変更を確認できたら、それを子テーマのstyle.cssに追加します。

スタイル設定のコツ

親テーマのデザインをベースに設定を行っていくため、一部のスタイルが競合することがあります。その際、親テーマのセレクタよりも詳細度（スペシフィシティ）の高いセレクタを使用するか、「!important」宣言を使うことで、確実にスタイルを上書きできます。ただし、「!important」の使用は最小限にとどめ、代わりにより具体的なセレクタを使用する方が推奨されます。

<div id="content">
    <span class="entry-title">テキスト</span>
</div>

PHPで機能を拡張する

フックの活用法

WordPressの「フック」システムを利用することで、柔軟に機能を拡張できます。

WordPressのフックには、「アクション」と「フィルター」の2種類があります。アクションフックは特定のイベントが発生したときに追加処理を実行し、フィルターフックはデータが画面に表示される前に変更を加えます。

アクションフックとフィルターフックの例は以下の通りです：

function mytheme_child_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );

function mytheme_child_modify_excerpt_length( $length ) {
    return 30;
}
add_filter( 'excerpt_length', 'mytheme_child_modify_excerpt_length' );

コードを追加する際は、子テーマ特有の接頭辞を使うことをお勧めします。
例えば、テーマ名が「mytheme_child」であれば関数名に「mytheme_child_」のような接頭辞を付けます。これにより、他のプラグインや親テーマとの関数名の衝突を防ぐことができます。

フックは一覧でも49ページも種類があるため、どんなフックがあるのか見るだけでも構想に役立ちます。

参考

Hooks | Developer.WordPress.orgWordPress Developer Resources

PHPコードの整理

functions.phpには、すべてのコードを直接書き込むのではなく、機能ごとにファイルを分けて管理する方法もあります。コードがより整理され、メンテナンスしやすくなるメリットがあります。

機能ごとにPHPファイルを分けてincフォルダ下に配置し、以下のようにfunctions.phpで読み込みます。

<?php
// 親テーマのスタイルシートを読み込む
function mytheme_child_enqueue_styles() {
    // 前述のコード
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );

// 機能別のPHPファイルを読み込む
require_once( get_stylesheet_directory() . '/inc/custom-widgets.php' );
require_once( get_stylesheet_directory() . '/inc/shortcodes.php' );
require_once( get_stylesheet_directory() . '/inc/customizer.php' );

次のステップ

ここまでで、WordPressの子テーマの基本と作成方法について学びました。これらの知識を活かして、実際にあなた自身のサイトをカスタマイズしていきましょう。初めはシンプルな変更から始めて、徐々に自信をつけていくことをおすすめします。

子テーマの学習で最も大切なのは、実際に手を動かして試してみることです。まずは小さな変更から始めましょう。例えば、背景色やリンクの色を変えたり、フォントサイズを調整したりするような簡単なCSSの変更からチャレンジしてみてください。うまくいったら、次は少し複雑なスタイル変更や、シンプルなPHP機能の追加に挑戦してみましょう。

分からないことがあれば、WordPressの公式ドキュメントや日本語のWordPressコミュニティのフォーラム、ブログ記事などを参考にしてください。同じ悩みを持つ人は必ずいますし、多くの場合、解決策が既に共有されています。

子テーマ作成の技術を身につけると、WordPressサイトの可能性が大きく広がります。親テーマの更新を気にせず、自分だけのオリジナルサイトを作れるようになるのは、大きな喜びです。少しずつ進めながら、あなただけの素敵なサイトを作り上げていきましょう。