WordPressカスタマイズ ~functions.php 編集時の注意と子テーマの活用~

背景とリスク

テーマの管理画面(GUI)では設定できないカスタマイズや、Google Analytics(GTM)等の計測タグを導入する際、functions.php の編集が必要になるケースがあります。

しかし、親テーマの functions.php を直接編集することは推奨されません。親テーマのアップデート(更新)が行われると、ファイルが丸ごと上書きされ、追加したコードがすべて消失してしまうためです。

このリスクを回避し、安全にコードを管理するために「子テーマ(Child Theme)」を使用します。

子テーマ(Child Theme)を使った解決策【推奨】

WordPressの公式ドキュメントでも推奨されている標準的なカスタマイズ手法です。親テーマの機能を継承しつつ、差分のみを安全に管理できます。

1. 子テーマディレクトリの作成

wp-content/themes/ ディレクトリ内に、親テーマとは別のフォルダを作成します。

このとき任意の親テーマの子テーマであることが分かるようなディレクトリ名にします。

テーマが Lightningの場合:

wp-content/ themes/
├──── lightning/
└──── lightning-child/

2. 必須ファイルの配置

作成したフォルダ内に、以下の2ファイルを配置します。

  • style.css: 親テーマを定義するためのヘッダー情報を記述。これがないとテーマとして認識してもらえないので、必須。
  • functions.php: カスタマイズ用のPHPコードを記述。

3. コードの記述(GTMのタグ追加など)

  • style.css
    • Theme Name: 管理画面に表示される名前です(任意)。
    • Template: ここが重要です。 親テーマのディレクトリ名(lightning)を正確に記述します。これで親テーマと紐付きます。

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

  • functions.php
    • style.css を作っただけでは、親テーマのデザインが崩れて表示されることがあります。 「親テーマのCSS」と「子テーマのCSS」を正しく読み込ませるために、子テーマ側の functions.php に以下の記述をすることが推奨されます。
<?php
add_action( 'wp_enqueue_scripts', function() {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );
//この下にGTMのタグ追加などのコードを記述

4. 子テーマの有効化

WordPress管理画面の「外観」>「テーマ」から、作成した子テーマを有効化します。


投稿者プロフィール

アバター画像
tt_admin
サイト管理者。

\ 最新情報をチェック /

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です