WordPressに「子テーマ」を実装してカスタマイズ性を向上させる方法

2023-11-15 by スキマデザイン

WordPressに「テーマ（ベースのテンプレート）」をインストールして、そのまま運用している方は結構多いと思いますが、
問題になってくるのが親テーマの「アップデート」。
親テーマを色々カスタマイズしたけど、親テーマのアップデートが入って、追加で変更した部分が全部消えた！は中々の地獄ですね(涙)
そんなことがないように、親テーマに対して、それと連動する「子テーマ」を実装して、アップデートの問題を解消し、
なおかつ、カスタマイズ性を上げようというのが、子テーマ実装の大きなメリットです。

以下に、子テーマの実装方法をできるだけ簡単にかみ砕いて説明させていただきます。

最低限の子テーマの作り方

1.子テーマを収納するフォルダの作成

PCのローカル環境で子テーマを収納するフォルダを作成します。
（フォルダ名は半角英数字でサイト名などを当てると分かりやすいと思います。）

２．「functions.php」ファイルを作成

テキストエディターで「functions.php」というファイルを作成し、下記のコードをコピペし、子テーマフォルダに保存します。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

３．「style.css」ファイルを作成

「style.css」ファイルを作成し、下記コードをコピペし、追記して、子テーマフォルダに保存する。

/*
Theme Name:
Template:
Version:
*/

「Theme Name:」の右側はさっき作った子テーマフォルダ名に書き換え。

「Template:」の右側は親テーマのフォルダー名に書き換え。

「Version:」の右側は親テーマの現行バージョンに書き換え。
（親テーマのstyle.cssで確認）

４．「screenshot.png」を作成

テーマ閲覧時のサムネイルになる画像ファイル「screenshot.png」を幅1200px、高さ900pxで作成し、子テーマフォルダに保存する。
（サイトのファーストビューのスクショでいいと思います。）

５．子テーマをWordPressにアップロード

子テーマフォルダを圧縮（zip）し、WordPressにアップロード、有効化します。

左メニュー「外観」→「テーマ」→「新しいテーマを追加」
（アップロード時にエラーが出る場合は、ファイル名や追記コードの不一致などの問題がありますので、再確認して、アップロードしなおしてください。）

６．必要なファイルをダウンロードし、子テーマにアップロード

あとは、親テーマからカスタムに必要なファイルをダウンロードし、子テーマにアップロードします。

・header.php
・footer.php
など。

（ここで、プラグイン「File Manager」が大活躍します。）
（ファイルの存在する階層は親テーマと同様にしてください。例えば親テーマのフォルダの中に存在しているファイルなら、そのフォルダも子テーマで作成し、その中に収納します。）

７．テキストエディターで「custom.css」を作成

テキストエディターで「custom.css」（名称はなんでも大丈夫）を作成し、子テーマにアップロードし、先にアップロード済みのheader.phpの内に下記コードを追加して、custom.cssの内容が反映されるようにします。

（※この後、簡単なCSSを記述して、custom.cssが有効か確認する）

今後、サイトのCSS修正はこのファイル内で行っていきます。

実装した最低限の子テーマにファイルを追加

これで、最低限の子テーマは実装出来ました。
あとは必要に応じて編集が必要なファイルを親テーマからダウンロードし、子テーマにアップロードします。

index.php
page.php
category.php
archive.php
single.php

などなど。