WordPressをカスタマイズするときに直接テーマファイルを編集してしまうと、もしコードがひとつでも間違えていただけで真っ白な画面とご対面。
その後、どこが原因なのかを探すのにも大変で、復旧するまで結構時間かかったりと何かとめんどくさい。
じゃぁバックアップを取ったり、テスト環境を作ったらええやんといろいろ言いたいと思いますが、HTMLやCSSの知識がなくそこまでがっつりカスタマイズしないライトな層にはそこまでの環境は求めていないはず。
そんなときに役に立つのが「子テーマ」
あなたがHTMLやCSSは苦手だけど、ちょっとだけカスタマイズしたいなと思っているならば必ず導入しておくべきもののひとつですよ。
子テーマを作成するメリットとは
子テーマとは、かんたんにいうとこんな感じです。かならず親テーマとセットで使用します。
・親テーマ：いわゆるテーマ（Wordpress公式のTwenty Sixteenとか）
・子テーマ：親テーマの機能とスタイルを継承したテーマ。カスタマイズ専用
また子テーマを使用するメリットとしては、以下があげられます。
・テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。
・子テーマを使用すればテーマの変更は確実に保持されます。 子テーマを使用することで開発時間を短縮できます。
・子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
子テーマを使用して1番ええなと思うのは、親テーマがアップデートしてもカスタマイズした内容はそのまま引き継がれるってことです。これが1番重要。
たとえばがっつり親テーマをいじったとしてもアップデートしてしまったら、またイチからコーディングしていかないといけません。それはほんまにめんどくさい。
そういうのを防ぐために、子テーマが存在しているんです。
初心者でもできる！子テーマの作成方法
子テーマを作る流れはざっとこんな感じ。
- 子テーマ用のフォルダを作る
- フォルダに収納する「style.css」と「function.php」を作成する
- 子テーマフォルダをサーバーにアップロードする
では、まずは子テーマ用のフォルダを作りましょう。
子テーマ用のフォルダを作る
フォルダを作って、名前を付けます。ただそれだけです。
僕は、「JustWrite」というテーマを使っているので、子テーマの名前は「JustWrite child」にしました。フォルダの名前はなんでもいいので、好きに付けてください。
フォルダに収納するふたつのファイルを作成する
今回は、ここが山場といえるくらい重要です。
まずは、「style.css」から作成していきましょう。
「style.css」の作り方
テキストエディタ（Windowsｍならメモ帳、Macならメモなど）を開いて、下記のコードを記入します。
/* Theme Name: JustWrite Child Template: justwrite */
Wordpresの公式オンラインマニュアルの「WordPress Codex」の子テーマのページでは、上記コード以外にも、DescriptionとかLicenseとかいろいろ記入しないといけないみたいなんですけど、ふたつの項目さえあれば子テーマとしては十分なので今回はこれだけ記入しておきます。
ちなみに今回の場合は、
- Theme Name ＝ 子テーマフォルダ名（今回は、JustWrite Child）
- Template ＝ 親テーマフォルダ名（今回は、justwrite）
もちろん大文字、小文字やスペースなども完全一致しないと作動しません。僕がやったときは、フォルダ名が一致していなくうまく動かず、ちょっとつまづきました。
「function.php」の作り方
同じくテキストエディタ（Windowsｍならメモ帳、Macならメモなど）を開いて、下記のコードを記入します。こっちはそのままコピペでOKですよ。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}上記ふたつのファイルを先ほど作成した子テーマフォルダに保存します。
子テーマフォルダをサーバーにアップロードする
最後に、小テーマフォルダをサーバーにアップロードします。
ブラウザから、お使いのサーバーにアクセスしてもいいですけど、アヒルでお馴染みのFTPクライアントソフト「Cyberduck」を使って、アップロードするのがオススメです！
アップロードする場所は、wp-content/themesです。
ちなみに「Cyberduck」ですが、Macの場合、App Storeからもダウンロード出来ますが、2,900円と少し高価な部類に入るアプリです。
ただし、公式ウェブサイトからダウンロードすると、なんと無料でダウンロードできちゃうというカラクリが！
ダウンロードはこちらからできますのでお好みの方法でどうぞ！
参考 Cyberduckを公式ウェブサイトよりダウンロードする（Mac、Windowsともに可。しかも無料） [icon name=”download”]
参考 CyberduckをApp Storeからダウンロードする（Macのみ） [icon name=”download”]
あとは子テーマを有効化するだけです。
これで子テーマを作って、カスタマイズできる環境が整いましたね。
今後、長期でウェブサイト運営していく上でぜったい必要になってくると思うので、もしあなたが使っているテーマに子テーマが付属していなければ、この方法で作ってみてください。
ではまた！
