2024年1月12日 / 最終更新日時 : 2025年10月20日 エス・ティ・セブン カスタマイズ

WordPressテーマをカスタマイズするなら子テーマを作っておく

WordPressの子テーマとは

WordPressの子テーマとは、既存のテーマ（親テーマ）の機能やデザインを継承しつつ、独自のカスタマイズを加えるためのテーマのことです。

簡単に言うと、親テーマを「土台」として、その上に「子テーマ」で変更を加えていくイメージです。

なぜ子テーマを使うのか？

子テーマを使用する主な理由は以下の通りです。

  1. 親テーマのアップデートへの対応: 親テーマがアップデートされると、テーマファイルが上書きされます。もし親テーマのファイルを直接編集していた場合、アップデートによってそれらの変更は失われてしまいます。子テーマを使っていれば、親テーマのアップデートが行われても、子テーマでの変更はそのまま保持されます。これは子テーマを使う最も重要な理由の一つです。
  2. 安全なカスタマイズ: 子テーマでカスタマイズを行うため、もし誤ったコードを記述してしまっても、親テーマ自体には影響を与えません。問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻すことができます。
  3. 効率的な開発: 親テーマの機能をそのまま利用できるため、ゼロからテーマを作成するよりも効率的に開発を進めることができます。必要な部分だけを上書きしたり、機能を追加したりすることが可能です。
  4. コードの管理が容易: 親テーマと子テーマでカスタマイズ内容が明確に分離されるため、コードの管理がしやすくなります。

子テーマの基本的な仕組み

子テーマは、通常、以下の2つのファイルで構成されます。

  • style.css: これは子テーマのスタイルシートで、子テーマの情報をWordPressに伝える役割も持ちます。最低限、このファイルがあれば子テーマとして認識されます。親テーマのスタイルを読み込むための記述もここで行います。
  • functions.php: このファイルは、親テーマの機能を上書きしたり、新しい機能を追加したりするために使用されます。例えば、独自のJavaScriptファイルやCSSファイルを追加したり、ショートコードを定義したりすることができます。

子テーマの作成方法

子テーマの作成は比較的簡単です。

  1. 新しいディレクトリの作成: wp-content/themes ディレクトリ内に、子テーマ用の新しいディレクトリを作成します。例えば、親テーマが twentyseventeen なら、子テーマは twentyseventeen-child のように分かりやすい名前にします。
  2. style.css の作成: 作成した子テーマのディレクトリ内に style.css ファイルを作成し、以下の情報を記述します。

/*
Theme Name: My Child Theme
Theme URI: http://example.com/my-child-theme/
Description: My custom child theme
Author: Your Name
Author URI: http://example.com/
Template: twentyseventeen <– ここに親テーマのディレクトリ名を記述
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: my-child-theme
*/

<?php
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
?>
  1. WordPressの管理画面で有効化: WordPressの管理画面の「外観」→「テーマ」に、作成した子テーマが表示されますので、それを有効化します。

子テーマでのカスタマイズ例

  • CSSの追加・上書き: 子テーマの style.css に記述したCSSは、親テーマのCSSよりも優先して適用されます。これにより、親テーマのデザインを簡単に変更できます。
  • テンプレートファイルの変更: 親テーマにあるテンプレートファイル（例: header.php, footer.php, single.php など）を子テーマの同じパスにコピーし、そのファイルを編集することで、親テーマの機能を上書きできます。例えば、single.php を子テーマにコピーして編集すれば、個別の投稿ページの表示をカスタマイズできます。
  • 機能の追加: 子テーマの functions.php にコードを追加することで、カスタム投稿タイプ、ウィジェット、ショートコードなどの新しい機能を追加できます。

まとめ

子テーマは、WordPressでウェブサイトを構築・管理する上で非常に重要な概念です。これを使うことで、親テーマのアップデートを気にせず安全にカスタマイズを行い、将来的なメンテナンスを容易にすることができます。WordPressでウェブサイトを運用する際には、子テーマの利用を強くおすすめします。

WordPressの子テーマの注意点

WordPressの子テーマを使用する際の注意点は以下の通りです。

1. 親テーマの更新に対する影響

  • 子テーマは親テーマのテンプレートファイルや機能を利用するため、親テーマが更新されると子テーマに予期せぬ影響を与える可能性があります。
  • 特に、親テーマでフック（アクションフック、フィルターフック）が追加、削除、変更された場合、子テーマでそのフックを利用している箇所が動作しなくなることがあります。
  • 親テーマのテンプレートファイルが大幅に変更された場合、子テーマでそのファイルを上書きしていると、新しい親テーマの機能が反映されなかったり、デザインが崩れたりする可能性があります。
  • 対策:
    • 親テーマの更新前には必ずバックアップを取る。
    • 更新後、子テーマが正しく動作するか十分にテストする。
    • 親テーマの変更ログや開発者のアナウンスを確認し、影響範囲を把握する。

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

  • 子テーマで親テーマのテンプレートファイルを上書きする場合、親テーマのファイル名と完全に一致させる必要があります。ファイル名が異なると、子テーマのファイルが読み込まれません。
  • 上書きするファイルは、必要最小限に留めるのがベストです。親テーマのファイルを丸ごとコピーして修正するのではなく、変更したい部分だけを修正するように心がけましょう。
  • 対策:
    • 親テーマのファイル構造を理解する。
    • 上書きするファイルは慎重に選び、必要最低限に留める。
    • 変更箇所をコメントなどで明記しておくと、後で管理しやすい。

3. functions.phpの扱い

  • 子テーマの functions.php は、親テーマの functions.php の後に読み込まれます。
  • 親テーマで定義されている関数と同じ名前の関数を子テーマの functions.php で定義すると、PHPのエラー（致命的なエラー）が発生します。
  • 親テーマの関数をオーバーライドしたい場合は、function_exists() で関数の存在チェックをするか、remove_action() や remove_filter() を使って親テーマのフックを解除してから、子テーマで独自のフックを追加するなどの方法があります。
  • 対策:
    • 親テーマの functions.php の内容を把握する。
    • 子テーマで追加する関数名は、親テーマの関数名と重複しないように注意する。
    • 親テーマの関数を修正したい場合は、直接変更するのではなく、フックを利用するなどの方法を検討する。

4. スタイルの読み込み順序

  • 通常、子テーマの style.css は、親テーマのスタイルシートの後に読み込まれます。これにより、子テーマで親テーマのスタイルを上書きすることができます。
  • ただし、@import ルールを使って親テーマのスタイルを読み込む方法は、WordPress 5.X以降では非推奨とされています。functions.php で wp_enqueue_style() を使って親テーマと子テーマのスタイルシートを適切にキューイングするのが推奨されています。
  • 対策:
    • @import ではなく、functions.php で wp_enqueue_style() を使用してスタイルを読み込む。
    • wp_enqueue_style() の依存関係（dependencies 引数）を適切に設定し、読み込み順序を制御する。

5. スクリプトの扱い

  • JavaScriptなどのスクリプトも、スタイルシートと同様に wp_enqueue_script() を使って適切にキューイングする必要があります。
  • 親テーマで利用しているスクリプトのバージョンや依存関係を把握し、子テーマで追加するスクリプトとの競合を避けるように注意しましょう。
  • 対策:
    • wp_enqueue_script() を利用してスクリプトを読み込む。
    • 親テーマで使用しているスクリプトの情報を確認し、重複や競合を避ける。

6. 更新時の手間

  • 子テーマを作成すると、親テーマの更新時に子テーマのコードを見直す手間が増える可能性があります。特に、親テーマが大幅にアップデートされた場合、その影響範囲を確認し、子テーマの修正が必要になることがあります。
  • 対策:
    • 子テーマのコードはシンプルに保ち、必要最小限の変更に留める。
    • 変更箇所を分かりやすくコメントするなど、メンテナンス性を考慮したコードを書く。

7. テーマ作者のサポート範囲

  • 親テーマの作者は、通常、親テーマ自体のサポートは行いますが、子テーマによるカスタマイズ部分のサポートは範囲外となることが多いです。子テーマで発生した問題は、基本的に自分で解決する必要があります。

これらの注意点を踏まえることで、WordPressの子テーマをより安全かつ効果的に活用することができます。

メリットとデメリット

メリット

1. 親テーマの更新に対する安全性

親テーマがアップデートされた際、子テーマで加えたカスタマイズが失われるのを防げます。これは子テーマの最大の利点です。親テーマのファイルを直接編集していると、更新時に上書きされて変更が消えてしまいますが、子テーマはその影響を受けません。

2. 開発の効率化

ゼロからテーマを作るのではなく、既存の親テーマの機能やデザインを土台として利用できるため、開発時間を大幅に短縮できます。必要な部分だけを上書き（オーバーライド）すればよいため、コード量も少なく済みます。

3. ロールバックの容易さ

カスタマイズで問題が発生した場合、子テーマを無効化したり、特定のファイルを削除したりすることで、すぐに親テーマの状態に戻せます。これにより、トラブルシューティングが容易になります。

4. テーマの機能分割

カスタマイズされたコードが子テーマ内に分離されるため、テーマの管理やメンテナンスがしやすくなります。

デメリット

1. 動作の理解が必要

親テーマと子テーマがどのように連携し、どのファイルがどのように上書きされるか（特にPHPファイル）を理解する必要があります。CSSやJavaScriptだけでなく、PHP関数やテンプレートファイルの動作について知識がないと、意図しない挙動につながる可能性があります。

2. 親テーマの依存性

子テーマは親テーマが存在しないと動作しません。親テーマに重大なバグがあったり、開発が停止してしまったりした場合、子テーマもその影響を受けます。

3. カスタムの限界

親テーマの構造や仕組みによっては、カスタマイズできる範囲に限界があることがあります。特に親テーマがフック（アクションやフィルター）を十分に提供していない場合、子テーマ側から親テーマの機能に手を入れるのが難しくなります。

4. やや煩雑なセットアップ

子テーマを使用するための初期設定（style.cssやfunctions.phpの作成と記述）が、テーマファイルを直接編集するよりも一手間多くかかります。

メリットデメリット
主な点親テーマの更新でカスタマイズが消えない親テーマの動作や構造の理解が必要
開発効率的に開発・カスタマイズできる親テーマに依存する
保守トラブル時のロールバックが容易初期セットアップがやや煩雑

WordPressはカスタマイズしやすい

一般的に、WordPressはカスタマイズがしやすいと言える要素が多いです。

カスタマイズしやすい点

  • テーマの豊富さ:
    • デザインや機能があらかじめ組み込まれた「テーマ」が非常に多く、テーマを選ぶだけでサイトの見た目や基本的な機能を簡単に変更できます。
    • カスタマイズ性に優れていることを売りにしているテーマ（例：SWELL, AFFINGER, Snow Monkeyなど）も多く、これらのテーマを使えばコードを触らずに設定画面から多くの調整が可能です。
    • 最近はフルサイト編集（FSE）に対応したテーマもあり、より直感的にサイト全体を編集できます。
  • プラグインによる機能追加:
    • Webサイトに必要な様々な機能（問い合わせフォーム、セキュリティ対策、SEO対策、表示速度の改善など）を、プログラムの知識なしにプラグインを導入するだけで追加できます。
  • CSSなどの知識があればさらに自由度が高い:
    • HTMLやCSS、PHPといったウェブ制作の知識があれば、テーマファイルを直接編集したり、子テーマを作成したりすることで、さらに細部にわたる自由なカスタマイズが可能です。

注意点

  • テーマ選びが重要:
    • デザインを大きく変えたい場合や、特定の機能を追加したい場合、選んだテーマのカスタマイズの自由度が低いと、実現が難しかったり、余計な手間がかかったりすることがあります。
    • 初心者の方は、直感的な操作や豊富な設定オプションがある「カスタマイズしやすい」と評判のテーマを選ぶと良いでしょう。
  • 複雑な機能の実装には知識が必要:
    • 非常に高度で特殊な機能や、テーマの標準設定にない大きな構造変更を行うには、やはりPHPなどのプログラミング知識が必要になります。
    • この場合、専門の制作会社に依頼したり、自分でコードを編集するために学習したりする必要があります。

結論として、多くのカスタマイズは知識がなくても比較的簡単に行えますが、どこまで深く、細かくこだわるかによって難易度は変わってきます。

有料WordPressテーマはカスタマイズに有利

有料のWordPressテーマは一般的にカスタマイズに有利だと言えます。

主な理由としては、以下のような点があります。

  1. 豊富な機能と設定オプション:
    • 有料テーマには、デザインやレイアウトを細かく調整するための専用機能や設定項目が豊富に用意されていることが多いです。
    • プラグインをあまり使わなくても、枠線、吹き出し、装飾文字などの実用的な機能が使えるようになっていることが多く、初心者でも簡単にカスタマイズできます。
  2. デザインの自由度の高さ:
    • 最初からプロが作成した洗練されたデザインテンプレートが用意されており、それをベースに色やレイアウトを比較的自由に調整できるテーマが多いです。
    • 多くのテーマがブロックエディタ（Gutenberg）に完全対応し、より直感的にカスタマイズできるようになっています。
  3. サポートとマニュアルの充実:
    • カスタマイズ方法やトラブルシューティングに関する詳細なマニュアルが整備されていたり、購入者向けのサポート（メールやフォーラムなど）が付いていることが多いため、困ったときに解決しやすいです。
  4. 技術的な優位性:
    • SEO対策や高速表示など、サイト運営に重要な技術的要素が考慮されて設計されていることが多く、その上でカスタマイズも容易にできるように作られています。

無料テーマでも素晴らしいものはありますが、カスタマイズの自由度を上げようとすると、自分でCSSやHTMLなどの専門知識が必要になるケースや、利用できる機能に限界を感じることが少なくありません。

時間を節約し、効率的かつ高品質なサイトを構築したい場合は、初期投資として有料テーマを導入することが、結果的に大きなメリットとなることが多いです。

テーマ名主な特徴・強み適したサイト
ザ・トール (THE THOR)国内最高クラスのSEO最適化と高速表示
プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり）
アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援		アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)Web集客・ビジネス利用に特化した機能が豊富
CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成
企業サイト、オウンドメディアに適したデザイン
WooCommerce対応でネットショップにも利用可能（Premium）		コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)「誰が使っても美しいデザイン」を追求したモバイルファースト設計
シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い
ブロックエディタに最適化され、直感的な操作が可能
シンプルかつ洗練されたデザインで、汎用性が高い		商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている
高いSEO対策と構造化データ対応
多言語対応機能（LIQUID CORPORATEなど）
カスタマイザーでの直感的な編集が可能		メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

  • ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
  • エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
  • ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
  • リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。

関連投稿:

  1. Twenty Twelveのカスタマイズ – WordPressテーマ
  2. WordPressの基本操作（ダッシュボードや外観のカスタマイズ）
  3. WordPressの基本操作の概要（新規投稿からカスタマイズ）
  4. 有料WordPressテーマLIQUID PRESS（リキッドプレス）のカスタマイズ
  5. 有料WordPressテーマ「Emanon（エマノン）」を企業サイトにカスタマイズする
カテゴリー
カスタマイズ
カスタマイズ

前の記事

Maxwellのカスタマイズ – WordPressテーマ
2023年10月30日
テーマ

次の記事

Twenty Twenty-FourはWordPress 6.4の新しいデフォルトテーマ
2024年1月15日