Lightningの子テーマ(lightning-child)を作成して安全にカスタマイズする方法

WordPressでテーマを直接編集すると、テーマのアップデートで変更が消えてしまいます。
安全にカスタマイズするためには、子テーマ(lightning-childフォルダ)を作成し、その中で編集する方法が推奨されます。

1 実装のポイント

  • 子テーマ(lightning-childフォルダ)を作成して、functions.php とstyle.css で親テーマを継承する
  • functions.php に必要な処理を追加
  • style.css で親テーマのデザインを引き継ぎつつ変更可能
  • 親テーマのアップデートによる影響を受けない

2 functions.php にコードを追加

ファイル名:functions.php
保存先:wp-content/themes/child-theme/functions.php


<?php
//-------------------------------------------
// 子テーマ用 functions.php
//-------------------------------------------
// 親テーマのスタイルを読み込む
function my_child_theme_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', 'my_child_theme_enqueue_styles');
    

2.1 保存方法:

- ファイル名:functions.php
- ファイルの種類:全てのファイル
- 文字コード:UTF-8N(BONなし)
- 改行コード:LF

3 汎用CSS

ファイル名:style.css
保存先:wp-content/themes/child-theme/style.css


/*
Theme Name: lightning-child
Description: Lightningの子テーマ
Author: ○○○○ ← ※ログインID以外にして下さい。
Template: lightning
Version: 1.0
*/

/* ページ全体のフォント設定 */
body {
    font-family: Arial, sans-serif;   /* Arialを基本フォントに、なければsans-serif */
}

/* -----------------------------
 * ここから子テーマ用CSSを追記
 * ----------------------------- */
    

3.1 ディレクトリ構造

  • lightning-child/
    • style.css
    • functions.php

2.1 保存方法:

- ファイル名:style.css
- ファイルの種類:全てのファイル
- 文字コード:UTF-8N(BONなし)
- 改行コード:LF

補足:

  • 最低限必要なファイルは functions.php と style.css です。
  • style.css の先頭にはテーマ情報ヘッダを記載してください。
  • 著者名にログインIDを記載するのはセキュリティ上、絶対に避けてください。
  • Template:には、外観→テーマで確認できるテーマの名前を記載してください。
  • フォルダ、ファイルを作成したら、FTPでサーバーに送ってください。次にワードプレスの管理画面の左メニュー「外観」→「テーマ」→「lightning-child」を有効化して下さい。

4 代用プラグイン

コードを書かずにカスタマイズしたい場合、以下のプラグインを利用する方法もあります。

  • Custom CSS & JS – CSSやJSを管理画面から直接追加可能
  • Child Theme Configurator – 子テーマの作成・編集を簡単に行える

5 まとめ

子テーマを作成することで、親テーマのアップデートによるカスタマイズ消失を防ぎ、安全に編集できます。
functions.php で処理を追加し、style.css でデザインを調整すれば、自分だけのオリジナルテーマを作ることも可能です。

6 関連記事リンク

クラシックエディタを使う方法

ビジュアルエディタを非表示にする方法【投稿・固定ページ・ウィジェットごとに制御】

WordPressのパーマリンク設定とおすすめ構造