WordPress企業サイトを守る！子テーマで安全にデザイン変更

WordPressのデザインを変更したいとき、テーマファイルを直接編集してしまうと「テーマ更新時に上書きされて消える」「間違えるとサイトが真っ白になる」などのリスクがあります。

そこで活躍するのが 子テーマ です。

子テーマは、今使っている 親テーマ（例：Lightning）の機能やデザインを引き継ぎつつ、一部だけ上書きできる仕組みです。親テーマを更新しても、子テーマの変更内容は残るため、安全にカスタマイズができます。

子テーマを作成する手順

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

• サーバーの「/wp-content/themes/」にアクセス
• 「lightning-child」などの名前で新しいフォルダを作成

style.cssを作成する

子テーマには必ず style.css ファイルが必要です。

style.cssの役割

• サイトの見た目（デザイン）を定義するファイル
• 文字の色・フォント・余白・背景色などを指定できる
• CSS（カスケーディングスタイルシート）という仕組みで「どの要素をどう表示するか」を制御する

以下の内容を記入して保存しましょう。

/*
 Theme Name: Lightning Child
 Template: lightning
*/

• Theme Name … 子テーマの名前（自由につけてOK）
• Template … 親テーマのフォルダ名（Lightningの場合は「lightning」）

functions.phpを作成する

次に、子テーマに functions.php を作成します。

functions.phpの役割

• WordPressに新しい機能を追加したり、既存の動作を変更するためのファイル
• PHPというプログラミング言語で書かれており、テーマやプラグインの動作をカスタマイズ可能

例：親テーマのCSSを読み込む、ウィジェットを追加する、メニューを拡張するなど

子テーマでも親テーマのデザインを使うため、以下のコードを入れます。

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

• wp_enqueue_style … CSSファイルを読み込む命令
• get_template_directory_uri() … 親テーマのフォルダの場所を取得する関数

この設定により「まず親テーマのデザインを読み込み、必要に応じて子テーマで上書きする」という仕組みになります

子テーマを有効化する

• WordPress管理画面 →「外観」→「テーマ」
• 「Lightning Child」が追加されているはず
• 「有効化」をクリック

子テーマでできる基本カスタマイズ

色やフォントを変える

style.cssに追記するとデザインを変更できます。

例：本文の文字色をグレーに

body {
    color: #333;
}

例：見出し（h2）の色を青に

h2 {
    color: #005bac;
}

レイアウトを調整する

例：段落の余白を広げる

p {
   margin-bottom: 20px;
}

フッターに会社名やコピーライトを追加

footer.phpを子テーマにコピーして編集すれば、会社情報を表示できます。

例：

<p>© 2025 株式会社サンプル. All Rights Reserved.</p>

子テーマを使うメリットの整理

• 親テーマ更新の影響を受けず、安全にカスタマイズできる
• style.css でデザインを自由に変更できる
• functions.php で機能を追加・拡張できる
• トラブル時も親テーマを残しておけるので復旧が簡単

まとめ：自社らしいデザインを安全に実現するために

今回の記事では、WordPressの子テーマを作り、基本的なカスタマイズをする方法を紹介しました。

• 子テーマは「親テーマを守りながらデザインや機能を変更する仕組み」
• style.cssで色やフォントなどの見た目を変更
• functions.phpで親テーマのCSSを読み込み、機能を拡張
• footer.phpを編集して会社情報を追加

子テーマを導入すれば、企業サイトを「自社らしいデザイン」にしながら、安全に運営できます。

これらのサポートをご希望の方はこちらからご連絡ください！