【初心者向け解説】WordPress子テーマ、フォルダの場所から作り方まで

 

こんにちは、キリカブです。

ワードプレスの子テーマとは

WordPressの「子テーマ」とは、元のテンプレートのデータ（親テーマ）を変更することなく、カスタマイズするためのフォルダです。

親テーマを上書きして変更を反映させるため、もしエラーなどが起きても、子テーマを削除するだけで元のテーマを傷つけることがありません。

またWordPressのテンプレートは、セキュリティの強化やバグの修正などの理由でテーマのアップデートがある場合がありますが、子テーマなしでテンプレートをカスタマイズしていた場合、アップデートするとカスタマイズされた内容が上書きされ、無くなってしまいます。

子テーマがあると、アップデートで上書きされるのは親テーマだけのため、カスタマイズした部分は変わらず残り、安心です。

子テーマフォルダを作る場所は？

wp-contentのthemesフォルダの中に作ります

子テーマの作成場所は、themes（テーマ）フォルダの中の、親テーマと同じ階層ディレクトリに作ります。

ちなみに名前は好きなものをつけてOK。

私はわかりやすく、親テーマの名前にchildをつけることが多いです。

子テーマフォルダの中身は？

絶対に必要なファイル（必須ファイル）があります！

これだけです！

２つとも、一から新しいファイルを作成してください。

必須ファイルは２つだけ

ちなみにfunction.php、ではありません。

”s”がつきます。

一度”function.php”で作成して、サイトが真っ白になったことがありました。

ご注意ください…

子テーマのstyle.cssに記入する必要事項

コメントアウトの中に、

/*
Theme Name:     metro-magazine-child      /*子テーマの名前　必須*/
Description:    metro-magazine子テーマ     /*テーマの説明　任意*/
Template:   metro-magazine               /*親テーマの名前　必須！*/
*/

を入れてください。

子テーマフォルダに保存します。

子テーマのCSSに親テーマのCSSを読み込む

一昔前は@import url(親テーマのCSSファイルの場所);
で読み込みました。

最近ではこちらの方が読み込みが早いということで、functions.phpに書き込みします。

functions.phpはいじるのがコワい

と思う方は多いでしょう。私もそうです。

画面が変わって「機能していません」と宣告されるときの恐怖と言ったら…

だけど大丈夫！

変更前のバックアップをローカルにしっかりとっておきましょう。

いざエラーが出たら、FTPなどで元のfunctions.phpの場所にアップロードして、再度読み込みをすれば元どおりです！

functions.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' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

このまま変更なしでコピペでOKです。

書き込み内容の説明ですが、一番わかりやすくかつ正確で初心者が見やすいと思われるのはこちらのサイトです。

ものくろぼっくす

シンプルで簡潔な文章で、わかりやすくてホッとします。
コピペOKなphp構文あります。

MSREDDESIGN

やってしまいがちな失敗が色々載っていて初心者大助かり。コピペOKなphp構文も載っています！

作成した子テーマを読み込む

子テーマを作るときはいきなりサーバーで作業をせず、ローカルで作成してからサーバーにあげましょう。

ローカルにも同じものがあれば、何かあったときに助かります。

ダッシュボードの「外観」　→　「テーマ」を選ぶと、作成した子テーマがありました。

「有効化」を押しましょう。

今はイメージの画像が何もないですが、キャプチャ画像を用意すればテーマのイメージ画像も入れることができます。

子テーマ反映

無事反映させることができました！

任意のファイルを子テーマに追加

親テーマから変更したいパーツのphpファイルをコピーして、子テーマに追加しましょう。

そこにオリジナルの内容を加えれば、元のファイルを上書きして変更の箇所だけ反映してくれます。

注意！functions.phpはコピーしない

functions.phpは親ファイルからコピーせず、白紙から作成してください！

内容が二重に読み込まれるとエラーを起こします。

まとめ

いかがでしたか？

意外とかんたんにできたことと思います。

バックアップをしっかりとって、チャレンジしてみてくださいね！