WordPressで子テーマを作成する方法とカスタマイズのコツ

「WordPressテーマをカスタマイズしたいけど、何か良い方法はないかな…」と思っているなら、子テーマを活用するのがおすすめです。

本記事では、WordPress子テーマとは何か、どのように機能するのかをわかりやすく解説し、WordPress子テーマの作り方やカスタマイズ方法、よくあるエラーの対処法まで、ステップごとに詳しくご紹介します。

WordPress子テーマの仕組み

子テーマは独立したフォルダを作成し、その中にstyle.cssとfunctions.phpを配置することで成り立ちます。この2つのファイルが、デザインや機能を上書き・追加するためのコア要素です。

Webサイトにアクセスがあると、WordPressはまず子テーマのファイルを読み込み、子テーマに存在しない要素は、自動的に親テーマから読み込まれる仕組みです。

たとえば、色の変更や独自のページテンプレート作成、オリジナルの機能追加など、親テーマを直接編集せずに実現できます。

このような構成により、親テーマのアップデートによってカスタマイズ内容が消える心配がなく、安全に変更を加えることが可能になるのです。もし問題が発生した場合は、子テーマを無効化すれば親テーマに切り替わるのでサイトの稼働が中断する心配はありません。

子テーマはどんなときに必要？

子テーマは、すべてのケースで必須というわけではありませんが、以下のような場合には子テーマの利用が推奨されます。

• 親テーマのコードを変更せずに、デザインや機能を安全にカスタマイズしたい
• 親テーマをベースにして新しいテーマを素早く作りたい
• CSSの調整やテンプレートの追加といった軽微な変更を手軽に行いたい
• 親テーマのアップデートによってカスタマイズ内容が上書きされるのを防ぎたい
• デザインはそのままに、一部の機能や表示だけをブランドに合わせて調整したい
• 新しい機能をテストしたいが、本番サイトに影響を与えたくない

WordPress子テーマの作成方法

子テーマは、手動でもプラグインを使っても作成できます。ここでは、サイトを軽量に保ちながら細部まで自分で管理できる手動作成の方法をご紹介します。

※プラグインで作成したい方は、この次のセクションをご覧ください。

前提条件

子テーマを作成する前に、以下の要素を準備しておきましょう。

• 親テーマ：カスタマイズしたい親テーマがWordPress Webサイトにインストールされ、有効になっていることを確認します。今回は例として「Twenty Twenty-Three」テーマを使用します。WordPressテーマのインストール方法については、解説記事をご覧ください。
• WordPressファイルへアクセス：レンタルサーバーのファイルマネージャーや、FileZillaなどのFTPクライアントが必要です。HostingerのファイルマネージャーはhPanelからアクセスできます。
• Webサイトのバックアップ：予期せぬエラーによるデータ消失を防ぐため、事前にWebサイトのバックアップを取っておきましょう。
• ステージング環境：本番サイトに影響を与えずにテストを行えるのがステージング環境。Hostingerの場合、WordPress Businessプラン以上ならhPanel上で簡単にステージング機能が利用可能です。

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

まずは子テーマのすべてのファイルを格納するためのフォルダを作成します。このチュートリアルではHostingerのファイルマネージャーを使います。

WordPressのルートディレクトリ（通常は public_html）にアクセスし、wp-content → themesへと進みます。そこで、使用中のテーマ名にちなんだ新しいフォルダを作りましょう。たとえば、親テーマが「twentytwentythree」であれば、twentytwentythree-child のような名前にします。

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

style.cssは、テーマのデザインやレイアウトをコントロールするCSSファイルであり、この中で親テーマとの関連付けも定義します。

子テーマフォルダ内に新規でstyle.cssを作成し、以下のコードを記述します。

/*
Theme Name: Twenty Twenty-Three Child
Theme URI: http://example.com/twenty-twenty-three-child/
Description: Twenty Twenty-Three Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentytwentythree
Version: 1.0.0
*/
/* Add your custom styles here */

テーマの名前やテンプレートなどは、ご自身の環境に合わせて修正してください。

3.functions.phpを作成してスタイルシートを読み込む

functions.phpは、WordPressテーマに機能を追加するためのファイルです。親テーマにカスタム機能を追加したり、既存の機能を変更したりすることができ、この中で、親テーマのスタイルシートを読み込む処理も行います。

子テーマのフォルダに新規でfunctions.phpを作成し、以下のコードを追加してください。

<?php
// Your code to enqueue parent theme styles
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
?>

これにより、親テーマのスタイルが正しく反映されるようになります。保存するのも忘れないようにしましょう。

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

style.cssとfunctions.phpを正しく設定すれば、子テーマはWordPressの管理画面から有効化できるようになります。

外観 → テーマに移動し、一覧の中から子テーマを探して「有効化」をクリックしてください。

これで、WordPressのWebサイトは子テーマ上で動作するようになります。

プラグインで子テーマを作る方法（代替手段）

ファイルを手動で編集するのが不安な方や、もっと簡単に済ませたい方は、WordPressのプラグインを使うのも一つの手です。やり方としては、利用するテーマが「クラシックテーマ」か「ブロックテーマ」かによって適したプラグインが異なります。

※どちらのタイプか確認するには、テーマフォルダ内にtheme.jsonファイルがあるかをチェックしましょう。このファイルが存在するならブロックテーマだと判断できます。ご覧のとおり、「Twenty Twenty-Three」はブロックテーマとなります。

クラシックテーマの子テーマをプラグインで作成する方法

親テーマがクラシックテーマの場合は、以下の手順でWP Child Theme Generatorプラグインを使って子テーマを作成できます。

● WP Child Theme Generatorプラグインをインストール・有効化します。※インストール方法が不明な場合は、「WordPress プラグインのインストール方法」を参考にしてください。

● 管理画面から外観 → Child Theme Genに移動し、プラグインの操作画面へアクセスします。

● 親テーマを選択し、子テーマの情報を入力し、ドロップダウンメニューから親テーマを選び、テーマ名や説明などの情報を入力します。「作成して有効化」にチェックを入れておくと、作成後すぐに切り替わります。

● 子テーマの作成をクリックして完了すると、テーマ一覧ページにリダイレクトされ、有効化された子テーマが表示されます。

このプラグインはブロックテーマにも対応していますが、最適な動作は保証されていません。親テーマがブロックテーマの場合は、次の方法をお試しください。

ブロックテーマの子テーマをプラグインで作成する方法

ブロックテーマには、Create Block Themeという無料プラグインの使用がおすすめです。 このプラグインはtheme.jsonをサポートしており、ブロックベースのテーマの子テーマ作成に最適です。 使い方は以下のとおりです。

● Create Block Themeプラグインをインストール・有効化します。

● 外観 → ブロックテーマを作成にアクセスします。

● アクティブなテーマの子テーマを作成するオプションを選択し、「Create a Child of “[テーマ名]”」をクリックします。

● テーマ名・説明・作成者名を入力し、「子テーマを作成」をクリックします。

● 成功メッセージが表示され、サイトエディターに移動します。外観 → テーマ に戻って、子テーマが有効になっていることを確認しましょう。

子テーマをカスタマイズする方法

子テーマの作成が完了したら、いよいよカスタマイズに進みましょう。ここからは、CSSの編集や functions.php へのコード追加、テンプレートファイルの上書きなど、具体的な方法を紹介します。

CSSやPHPの知識があるとより自由にカスタマイズできますが、コードに不慣れな方でも使えるおすすめのプラグインについても触れていきます。またWordPress Gutenbergブロックエディターを使って、コーディングなしでカスタムブロックや再利用可能なテンプレートを作成することも可能です。

CSSでデザインをカスタマイズする

WordPress子テーマのスタイルを大きく変更したい場合は、子テーマのstyle.cssファイルを直接編集するのが基本です。このファイルにすべての CSS をまとめておくと、管理やエクスポートがしやすくなり、シンタックスハイライトやバージョン管理などの機能を備えたコードエディターを活用することで、編集作業がさらに快適になります。

一方で、ちょっとした変更であればWordPress のテーマファイルエディターを使う方法も便利。ダッシュボードから直接テーマのファイルを編集できるため、FTPやファイルマネージャーにアクセスできない方でも利用しやすいのが特徴です。

管理画面の「外観 → テーマファイルエディター」からテーマファイルエディターを選び、右側のサイドバーに表示されるスタイルシート（style.css）を選択して編集します。変更が完了したら「ファイルを更新」をクリックしてください。

編集内容をすぐにプレビューしたい場合は、クラシックテーマでは「テーマカスタマイザー」、ブロックベースのフルサイト編集（FSE）対応テーマでは「サイトエディター」を利用しましょう。どちらも外観メニュー内にあるカスタマイズまたはエディターからアクセスできます。

また、カスタムCSSを追加するもう一つの方法として、WPCodeのようなコード管理プラグインを使う方法もあります。コードの再利用やコピペの手間を減らせるので、頻繁にカスタマイズする方におすすめです。

各方法の詳細は、WordPressのカスタムCSS解説ガイドにてご紹介していますので、ぜひご覧ください。

WordPress子テーマの見た目を調整する際は、CSSのルールを活用して柔軟にデザインをカスタマイズできます。以下に、よく使われるCSSコードの例をいくつか紹介します。必要に応じて、自由に組み合わせたり調整したりしてみてください。

背景色を変更：

body {
background-color: #f3f3f3; /* Replace #f3f3f3 with your chosen color code */
}

サイドバーの色をカスタマイズ：

.sidebar {
background-color: #dddddd; /* Replace #dddddd with your desired color */
}

Webサイト全体のフォントを調整

body {
   font-family: 'Arial', sans-serif; /* Update to your chosen font */
   font-size: 16px; /* Set your desired size */
   color: #333333; /* Choose the color */
}

よく使われるCSSプロパティや値については、当社の でも一覧で確認できます。ぜひダウンロードしてご活用ください。

CSS早見表をダウンロードする

functions.phpにカスタムコードスニペットを追加する方法

この方法は、クラシックテーマ、またはクラシックとブロック要素を組み合わせたハイブリッドテーマをご利用の場合にのみ対応しています。

Webサイトの機能をカスタマイズしたい場合、子テーマのfunctions.phpファイルにPHP関数を追加したり、既存の関数を編集したりすることで対応できます。style.cssを編集する場合と同様に、ファイルマネージャーやFTPクライアント、テーマファイルエディター、コード管理プラグインなどを使って編集が可能です。

PHP関数を使ったカスタマイズには、さまざまな種類があります。

以下のコードスニペットでは、add_action()関数とenqueue_custom_styles()関数を組み合わせて、カスタムスタイルシートを読み込んでいます。

function enqueue_custom_styles() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

また、custom_dashboard_greeting()関数を使えば、WordPress管理画面にカスタムの挨拶メッセージを表示することも可能です。

function custom_dashboard_greeting() {
   echo "Welcome to your site! Have a great day.";
}
add_action('admin_notices', 'custom_dashboard_greeting');

このように、無数の関数を組み合わせて自由にカスタマイズできます。作業をスムーズに進めるためには、以下のような工夫が効果的です。

• コメントでコードの内容を記録します： 複数行のコメントには/* */、1行のみの場合は//を使い、カスタムコードの目的を明示しておきましょう。
• カスタマイズをグループ化・ラベリング：コメントを使って関数をセクションごとに整理しておくと、今後の修正やデバッグがしやすくなります。
• ハードコーディングは避けましょう：テーマファイルに直接機能や設定を埋め込むのではなく、add_action()やadd_filter()を使ってWordPressのフック経由でカスタマイズを加えると、柔軟性が高まります。

テンプレートファイルを編集・追加する方法

サイトの特定部分のレイアウトや構造、コンテンツをカスタマイズしたい場合には、テンプレートファイルを編集する方法が適しています。この手法なら、テーマのアップデートによって変更内容が上書きされるのを防ぐことができます。

まずは、ファイルマネージャーやFTPクライアントを使って親テーマのフォルダにアクセスし、templatesフォルダを開きます。変更したい機能やデザインに該当するファイルを見つけ、子テーマにコピーしましょう。

WordPressには「テンプレート階層」と呼ばれる仕組みがあり、ファイルの場所や名前に応じて読み込むテンプレートが決まります。変更を反映させるためには、必ずディレクトリ構造を親テーマと同じにしてください。

たとえば、page.htmlというファイルが親テーマのtemplatesフォルダにある場合、子テーマ内にもtemplatesフォルダを作成し、その中にコピーする必要があります。

コピーが完了したら、そのファイルを自由に編集できます。

新しいページテンプレートファイルを作成したい場合は、親テーマのtemplatesフォルダからpage.htmlをコピーし、子テーマ内のtemplatesフォルダに配置してリネームします。 その上で、テンプレート名を以下のようにファイル冒頭に記述してください。

<!-- 
Template Name: Custom Page Template 
-->

クラシックテーマを使用している場合、テンプレートはPHP形式で記述されます。その場合も同様に.phpファイルを作成し、冒頭に以下のコードを追加します。

<?php
/* Template Name: Custom Page Template */

WordPressのエディターでこのテンプレートを使いたい場合は、「ページ属性」→「テンプレート」から選択できるようになります。

theme.jsonファイルを使ってグローバルスタイルを変更する方法

クラシックテーマではfunctions.phpを使って機能を追加したり設定を管理したりしますが、ブロックテーマでは代わりにtheme.jsonファイルを使って、タイポグラフィやカラーパレット、余白などのグローバルスタイルや設定を定義します。

子テーマのフォルダ内にtheme.jsonファイルが存在しない場合は、新しく作成しましょう。その中には変更したい項目のみを記述すればOKです。WordPressは自動的に親テーマのtheme.jsonと統合し、子テーマ側の設定が親テーマを上書きまたは補完してくれます。

たとえば、サイト全体で使うカスタムカラーパレットを定義したい場合は、以下のように記述します。

{
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#3498db" },
        { "name": "Accent", "slug": "accent", "color": "#e74c3c" },
        { "name": "Background", "slug": "background", "color": "#f4f4f4" }
      ]
    }
  }
}

同様に、フォントサイズを設定するには以下のように記述します。

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "12px" },
        { "name": "Medium", "slug": "medium", "size": "18px" },
        { "name": "Large", "slug": "large", "size": "24px" }
      ]
    }
  }
}

段落や画像などのコンテンツブロックに対して最大幅を指定することもできます。

{
  "settings": {
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  }
}

WordPress子テーマのエラーを解決する方法

子テーマは非常に便利な機能ですが、当然うまく動作しないこともあります。以下のセクションでは、よくあるエラーとその解決方法を紹介します。

子テーマがテーマ一覧に表示されない

子テーマのフォルダと必要なファイルを正しく用意すれば、管理画面の「外観」→「テーマ」に表示されるはずです。表示されない場合は、style.cssの設定に問題がある可能性があります。特に手動で子テーマを作成した場合に起こりやすいのが特徴です。

style.cssを開いて、Templateの値が親テーマのフォルダ名と一致しているか確認してください。正確なフォルダ名は、wp-content → themesディレクトリで確認できます。

子テーマの変更が反映されない

変更内容がサイトに反映されない場合、親テーマのスタイルシートを正しく読み込めていない可能性があります。

functions.phpにタイプミスがないか確認しましょう。また、style.cssのTemplateパラメータが親テーマの正しいフォルダ名を指しているか再確認しましょう。

また、ブラウザのキャッシュが原因の場合もあります。その場合、まずはキャッシュをクリアし、それでも解決しない場合は、LiteSpeed CacheやWP RocketなどのキャッシュプラグインでWebサイトのキャッシュを削除してみてください。

親テーマのCSSが子テーマのスタイルを上書きしていることもあるので、子テーマのCSS内で該当のセレクターを探し、!importantプロパティを追加して優先度を上げることで対応できます。 例は以下のとおり。

h1 {
  color: red !important;
}

!importantを使えば、競合するスタイルよりも優先的に適用されますが、デバッグや管理が難しくなるため、多用するのは避けましょう。

テンプレートファイルの上書きが反映されない

テンプレートファイルの変更がサイトに反映されない場合、WordPressが子テーマ内のテンプレートを認識していない可能性があります。

その場合は、まずファイル名が親テーマと完全に一致しているか確認してください。

次に、ファイルの配置場所が正しいかを確認します。テンプレートファイルは子テーマのルートディレクトリ（例：/wp-content/themes/your-child-theme/）に直接置く必要があります。サブディレクトリに入れてしまうと認識されません。

それでも反映されない場合は、ブラウザおよびサイトのキャッシュをクリアしてください。

まとめ

子テーマを使えば、既存のWordPressテーマを自分好みにカスタマイズしつつ、親テーマのアップデートにも対応できます。機能やデザインを自由に試しながら、安全かつ効率的にWebサイトを構築できる便利な仕組みです。

この記事では、子テーマの作成からカスタマイズ方法、そしてエラー発生時の対処法までをご紹介しました。ぜひこの便利な仕組みを活用して、より魅力的なWordPressサイトを作ってみてください！

何か質問がありましたら、ぜひコメントをお寄せください。

WordPress子テーマに関するよくある質問

親テーマと子テーマの違いは何ですか？

親テーマはWebサイトのデザインや機能のベースとなるテンプレートで、子テーマはその機能を引き継いだ上で独自のカスタマイズを加えられるテーマです。子テーマを使うことで、親テーマのアップデートによってカスタマイズが消えるリスクを避けられます。

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。