【画像付き解説】子テーマを作成してWordPressのカスタマイズを楽にしよう！
こんにちは、とみーです。
WordPressのテーマって本当に色々ありますよね。
とても気に入ったテーマがあってもセンスって人によるもので、自分好みにしたい箇所ってあると思うんですよ。
それで「いざカスタマイズ！」と意気込み完成したとしても、テーマのバージョンアップによってそれは０に戻ってしまいます。せっかく時間をかけてカスタマイズしたのに水の泡に。
それを防ぐために、カスタマイズ前に子テーマを作成することをおすすめします。
子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
子テーマ – WordPress Codex 日本語版
中には子テーマもダウンロードできるサイトがありますが、大半は親テーマのみのダウンロードです。
この記事は子テーマがないテーマに、自分で子テーマを作成しよう！という趣旨のページです。
子テーマを作成するメリット
上で書いてしまいましたが、子テーマを作成するメリットは
親テーマがバージョンアップしても、自分がカスタマイズしたデザインはそのまま
これに尽きると思います。
WordPress Codex 日本語版のページでは開発時間だったりテーマの開発を学べるだったり書いてますが、そんなことは二の次です。
手順を画像付きで解説！ 子テーマの作成方法
私が以前使っていたミニバード（現行：スターサーバー）
というレンタルサーバーではファイルマネージャーが用意されているので、その方法を説明します。
※2017年5月にサーバーをミニバードからMixHostに移転しました。
お借りしているレンタルサーバーにファイルマネージャーがない人はFFFTP というソフトがお勧めです。
子テーマのフォルダを作成する
まずサーバーにフォルダを作成するところから。
サーバー管理ツールにログインし、FTPアカウント設定をクリックします。
右画面にドメイン一覧が表示されますので、該当のドメインを選択。
するとFTPアカウント一覧が表示されますので、WebFTP欄のログインをクリックしてログインします。
ログインしたら左側にあるディレクトリツリーから、wp-contentフォルダの中のthemesフォルダを探してクリックします。
そしたら上部にある新規作成をクリックします。
名前を入力してフォルダ追加をクリックします。
今回ADELLEというテーマの子テーマを作成したいので、名前はadelle-childにしました。
無事フォルダが追加されました。
子テーマのスタイルシート・style.cssをファイルを作成する
次はstyle.cssを作成したいと思います。
ディレクトリツリーで先程作成したフォルダを選択し、再び新規作成をクリックします。
style.cssと入力してファイルを追加をクリックします。
style.cssは固定です。変えちゃダメです。
style.cssが出来ましたので一番左の編集アイコン（紙とペンのやつ）で編集します。
Chromeのせいか、エディターと上のボタンの間にいらないスペースありますね・・・。気にしないことにしよう。
スタイルシートの一番上にはそのテーマの情報を書く必要があります。
/*
Template: 親テーマのフォルダ名（必須）
Theme Name: 子テーマの名前（必須）
Author: 自分の名前
Version: バージョン（無くても全然問題ないです）
*/子テーマは親テーマのカスタマイズしたい部分だけ書くのが普通なので、親テーマを子テーマにインポートしてあげる必要があります。
@import url("../adelle/style.css");この1行で親テーマを読み込みます。adelleの箇所はご自身の親テーマのフォルダ名に合わせて変更してくださいね。
更に、本当に子テーマが適応されているのか確認するために背景を灰色に変更しましょう。ずっと灰色にするつもりないので確認したらこの3行は削除して構いません。
body {
background-color:#cccccc;
}
以上でOKです。改行コードをCR/LFに変更して上書き保存して閉じます。
ダッシュボードから子テーマを有効化する
WordPressのダッシュボードに戻ります。
外観 > テーマ をクリックすると、作成した子テーマが表示されているはずですので有効化します。
これで無事に子テーマの設定が終わりました！
サイトを確認してみると、背景が灰色になっているので無事成功したようです。
有効化したので以降スタイルシートは外観 > テーマの編集 から編集可能です。
背景は白に戻しておきましょう。
親テーマのインポートは公式が別の方法を推奨している件
@import url(“../adelle/style.css"); で親テーマを読み込みましたが、functions.phpを作成してそのプログラムから読み込む方法を公式では推奨しています。
とはいえ、style.cssで読み込んでも問題なく動きますので大丈夫です。
さて、いかがでしょうか。こんなに簡単に子テーマが作成できてしまうんです。カスタマイズが広がります。
スタイルシートって何？ という方も、自分のサイトが自分好みに出来たら嬉しいですよね！
ぜひ子テーマを作成して、スタイルシートとは何なのか勉強してみてください。そんなに難しくないですよ。
