WordPressを使用するときは、大抵無料のテンプレートを利用するのですが、細かいところは自分でカスタマイズしたい質なのでスタイルシートに手を加えることがしばしばあります。
ここで問題になるのが、テンプレートのデフォルトCSS（主に style.css）を直接触ってしまうと、「テンプレートの更新」がされたときに style.css が上書きされてしまうことです。
Contents
独自のCSSで、style.css を上書きしていたのですが…
そこで今までは original.css という別のファイルを作り、headタグを記述している head.php ファイルにスタイル読み込みのタグを追加していました。
style.css は100％触らず、既存のスタイルも新しいスタイルと併せ、original.css で上書きしてしまう構造です。
それでも不思議なことに、テンプレートの更新をしたらデザインが微妙に変わってしまったこともあり、さらにデメリット（より良いテンプレートに更新されてもアップデートできない、いつまでも「更新あり」のアラートが表示される）もあり、どうしたら良いか悩んでいました。
WordPress の回答は…「子テーマの利用を検討してください」
ある日、テーマの更新がされ「また、更新できないのに…」と思いつつ、Wordpress 管理画面の『WordPress の更新』を見たところ、テーマの欄にメッセージが出ているのが気付きました。
なんと！「子テーマ」を使用すると、テンプレートのアップグレードで style.css が上書きされても問題なくなるのか？！…ということで、早速、メインのサイトを対応してみることにしました。
WordPress 子テーマの作り方
子テーマはまず、
作らなくてはいけないのですが、最低FTPなどでWordpressのフォルダの中にフォルダを作ったり、ファイルを作ったりできる必要があります。
作る場所は、wp-content/themes の中で、現状使っているテンプレートのフォルダと同じ階層になります。
私の場合は、マルチドメイン化してあるWordpressサイトもあるので、どのサイトで使っているか分かるように、テンプレート名ではなくサイト名に『-child』と付けることにしました。
次に、作成したフォルダに必要なファイルを作成し、記述を行います。
作成するのは、「style.css」と「functions.php」の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 の直前に読み込まれます。