WordPressの子テーマを作成してみる

ホーム » ブログ » WordPressの子テーマを作成してみる

2023.05.15

|

2023.10.30

WEB

子テーマを作る理由

カスタマイズしたテーマをアップデートする場合に、カスタマイズが失われるのを防ぐためです。親テーマに直接変更を加えると、テーマのアップデート時にそれらの変更が上書きされてしまいますが、子テーマに変更を加えることで、親テーマのアップデートに影響を受けずにカスタマイズを維持できます。
デザインをカスタマイズする場合に、親テーマのファイルを変更せずに、追加や変更を加えることができます。例えば、親テーマが提供するスタイルシートを変更したい場合、子テーマのスタイルシートに新しいルールを追加することができます。
プログラムの修正や機能の追加を行う場合に、親テーマのファイルを変更するよりも、子テーマでの変更が推奨されます。これにより、親テーマのアップデートが容易になり、変更を行ったファイルが上書きされることを避けることができます。

総じて、子テーマを使用することで、WordPressテーマをより柔軟にカスタマイズできるようになります。また、テーマのアップデートを行う場合にも、変更が失われることを防ぐことができます。

style.css

ウェブサイトの外観を制御するためのスタイルシートファイルです。このファイルは、親テーマのスタイルシートを引き継ぎつつ、子テーマでカスタマイズしたスタイルを追加するために利用されます。

子テーマを作成する際には、少なくともこれら2つのファイルが必要となります。ただし、それ以外にも、カスタマイズしたいテンプレートファイル（header.phpやsingle.phpなど）がある場合には、それらを子テーマ内に作成する必要があります。

<?php
function theme_enqueue_styles() {
  //親テーマのCSSを読み込み
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  //親テーマのCSSを上書き
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

<?php

function theme_enqueue_styles() {

//親テーマのCSSを読み込み

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

//親テーマのCSSを上書き

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

このコードは、子テーマのstyle.cssが親テーマのstyle.cssを上書きするために、parent-styleの依存関係を指定してchild-styleを読み込みます。

冒頭の追記コード以外に、親テーマのfunctions.phpに変更箇所は任意で上書きや追加記述します。

※親テーマのfunctions.phpファイルにある関数を変更したい場合、同じ関数名を使用して子テーマのfunctions.phpファイルに新しい関数を定義することで、親テーマの関数をオーバーライドすることができます。
親テーマのfunctions.phpファイルの全文を子テーマのfunctions.phpファイルにコピーすると、重複した関数やコードが生じる可能性があるため、避けるべきです。代わりに、必要なカスタムコードのみを子テーマのfunctions.phpファイルに追加することで、親テーマの機能を拡張することができます。

※上書きする内容が無い場合は上記のコードのみのfunctions.phpの用意で問題ありません。

設定ができたら、先程作成した子テーマのディレクトリ（フォルダ）に、「functions.php」の名前で保存してください。

style.cssを用意する

子テーマのstyle.cssにも、親テーマのstyle.cssのように必要情報を冒頭に記載します。

/*
Theme Name:テーマの名前
Theme URI:テーマに関連するWebサイトのURL
Description:テーマの説明
Template:親テーマのディレクトリ名
Author:テーマ作成者の名前
Author URI:テーマ作成者のWebサイトのURL
Version:テーマのバージョン
*/

Theme Name:テーマの名前

Theme URI:テーマに関連するWebサイトのURL

Description:テーマの説明

Template:親テーマのディレクトリ名

Author:テーマ作成者の名前

Author URI:テーマ作成者のWebサイトのURL

Version:テーマのバージョン

Theme Name	「親テーマの名前 child」が一般的です。
Theme URI	ご自身のURLなど不要な場合は行ごと削除可
Description	簡潔かつ明確にテーマの説明を記載します。
Template	親テーマのディレクトリの名称を記載します。（親テーマのディレクトリ名が「twentytwenty」の場合は「twentytwenty」と記載します。）
Author	作成者名を記載します。
Author URI	作成者のURLを記載します。
Version	任意でバージョンを記載します。

冒頭の追記コード以外に、親テーマのstyle.cssの内容から、変更したい部分は任意で上書きや追加記述しstyle.css内に納めます。
※子テーマのstyle.cssファイルには必要なカスタムスタイルのみを追加し、親テーマのstyle.cssファイルの全文をコピーする必要はありません。

※上書きする内容が無い場合は上記コードを編集したものだけの記載で問題ありません。

設定ができたら、先程作成した子テーマのディレクトリ（フォルダ）に、「style.css」の名前で保存してください。

ファイルをアップロードする（FTPアクセスの場合）

FTPアクセスの場合はzipファイル化する必要はありません。※慣れている方はこちらが推奨。
先程作成した「functions.php」「style.css」を格納したフォルダ、この記事ではフォルダ名を「親テーマ名-child」としましたが、このフォルダを「wp-content＞themes」のフォルダへ格納し、ワードプレス管理画面の「外観＞テーマ」から子テーマを有効化することにより設定が可能です。

FTPアクセスになれている方は、追加ファイルのアップロードなどを、いちいちzipでアップロードする必要もありませんので、FTPでのアップロードが推奨になります。

FTPアクセスをワードプレス管理画面から

プラグイン「File Manager（WP File Manager）」を使用することで子テーマのアップロードにFTPソフトを使用せずにWordPress管理画面からもアップロード可能です。
上記のFTPアクセスの場合のフォルダと同様に「wp-content＞themes」にアップロードをします。
プラグイン「File Manager（WP File Manager）」については以下の記事にて取り上げています。
[clink url=”https://recross.co.jp/file-manager/”]

まとめ

親テーマ自体のテーマ構成ファイルを変更し、デザインなどをオリジナルにカスタマイズしていくことも出来ますが、親テーマ自体のアップロードが入った際に、子テーマとして作っておかないと、テーマのアップロード時に対象の内容が記載されているファイルが上書きされてしまい、カスタマイズが消えてしまうことがありますので、カスタマイズを加える可能性がゼロではない場合は、事前に子テーマを作成し作業していきましょう。

私の場合は、reCAPTCHAの表記をフッターによく入れることがあり、同時にスタイルシートも変更することから、「style.css」ファイルへの記載の追記と、「footer.php」ファイルを子テーマに入れて作業することが良くあります。

一部のディレクトリが動作上必須になるファイルがあります。その場合は、参照元のURLを変更するか、ディレクトリ自体をアップロードして対応しましょう。
（例→url(“fonts/1234.svg”)の場合url(“../親テーマのディレクトリ/fonts/1234.svg”)）

その他にも、投稿のファイル自体やパンくずリストなど、テーマを構成するファイルを1ヶ所でも更新する場合は、子テーマをどんどん使っていきましょう。

2023.05.15

|

2023.10.30