WordPressを使用するときは、大抵無料のテンプレートを利用するのですが、細かいところは自分でカスタマイズしたい質なのでスタイルシートに手を加えることがしばしばあります。

ここで問題になるのが、テンプレートのデフォルトCSS(主に style.css)を直接触ってしまうと、「テンプレートの更新」がされたときに style.css が上書きされてしまうことです。

独自のCSSで、style.css を上書きしていたのですが…

テンプレートの中には style.css がありますが…

テンプレートの中には style.css がありますが…

そこで今までは original.css という別のファイルを作り、headタグを記述している head.php ファイルにスタイル読み込みのタグを追加していました。

自分独自のCSSで上書きしてしまっていた

自分独自のCSSで上書きしてしまっていた

style.css は100%触らず、既存のスタイルも新しいスタイルと併せ、original.css で上書きしてしまう構造です。

それでも不思議なことに、テンプレートの更新をしたらデザインが微妙に変わってしまったこともあり、さらにデメリット(より良いテンプレートに更新されてもアップデートできない、いつまでも「更新あり」のアラートが表示される)もあり、どうしたら良いか悩んでいました。

WordPress の回答は…「子テーマの利用を検討してください」

ある日、テーマの更新がされ「また、更新できないのに…」と思いつつ、Wordpress 管理画面の『WordPress の更新』を見たところ、テーマの欄にメッセージが出ているのが気付きました。

「テーマを修正する場合、子テーマの利用を検討してください」

「テーマを修正する場合、子テーマの利用を検討してください」

なんと!「子テーマ」を使用すると、テンプレートのアップグレードで style.css が上書きされても問題なくなるのか?!…ということで、早速、メインのサイトを対応してみることにしました。

WordPress 子テーマの作り方

子テーマはまず、

作らなくてはいけないのですが、最低FTPなどでWordpressのフォルダの中にフォルダを作ったり、ファイルを作ったりできる必要があります。

作る場所は、wp-content/themes の中で、現状使っているテンプレートのフォルダと同じ階層になります。

私の場合は、マルチドメイン化してあるWordpressサイトもあるので、どのサイトで使っているか分かるように、テンプレート名ではなくサイト名に『-child』と付けることにしました。

FTPで子テーマ用フォルダを作成しました

FTPで子テーマ用フォルダを作成しました

次に、作成したフォルダに必要なファイルを作成し、記述を行います。

作成するのは、「style.css」と「functions.php」の2つだけです。

作ったフォルダの中に、2つの空ファイルを作成しました

作ったフォルダの中に、2つの空ファイルを作成しました

「style.css」は、元々ある style.css をコピーして、「functions.php」は空のものを用意します。

style.css

用意した「style.css」のヘッダ部分を書き換えます。

/*
 Theme Name: CRAWL Child
 Template: crawl ※元のテーマ。記述されていない場合は追記する
 Theme URI: http://元のテーマに記述されているテンプレートのURI
 Description: 元のテーマに記述されているDESCRIPTION
 Author: 元のテーマに記述されているAuthor
 Author URI: http://元のテーマに記述されているAuthor URI
 Template: 元のテーマに記述されているTemplate
 Version: 元のテーマに記述されているVersion
 License: 元のテーマに記述されているLicense
 License URI: http://元のテーマに記述されているLicense URI
 Tags: 元のテーマに記述されているTags
 Text Domain: crawl-child
*/

functions.php

先ほど作った「style.css」でもともとある「style.css」を上書きするには、同じフォルダに置いた「function.php」に以下の記述をします。

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

WordPress管理画面でのテンプレートの切り替え

「function.php」をアップロードしてからWordPressの管理画面の「外観」>「テーマ」を開くと子テーマ(Crawl Child)が表示されています。

子テーマの使用

子テーマの使用:テーマ切り替え前

子テーマ(Crawl Child)を有効化すれば、子テーマの設置は完了です。

子テーマの使用

子テーマの使用:テーマ切り替え後

テーマを変えると、「外観」>「カスタマイズ」で設定しているものがクリアになってしまう場合がありますので、まず確認して設定をし直しましょう。また、念のため、子テーマにした「style.css」を開き、どこか目立たないCSSを作って機能するかを確認しましょう。

style.css と function.php 以外のファイルも上書きできる

スタイルシート以外も親テーマと同じファイル名のファイルを子テーマフォルダに入れることで、同じように親テーマのファイルを上書きできます。親テーマに存在しないファイルでも、同じように子テーマとして読み込むことができます。

ただし、「function.php」だけは特殊で、親テーマの機能を上書きしません。親ファイルの functions.php の直前に読み込まれます。