どうもこんにちは、りゅう（@ryuta_blog）です！
WordPressでブログをやっている皆さん！
ちゃんと「子テーマ」を利用していますか？
「子テーマ？なにそれ？」となった人は、この記事を参考に子テーマについて理解していってください。
目次
子テーマとは？
子テーマとは、通常のテーマ（親テーマ）の情報をすべて受け継いだテーマです。
通常
子テーマを使う場合
WordPressのテーマをカスタマイズする時は、親テーマではなく、子テーマをカスタマイズするのが正しいとされています。
子テーマは”カスタマイズ用のテーマである”と覚えておきましょう。
なぜ子テーマを使うの？
子テーマを使う理由は以下のとおりです。
- テーマのカスタマイズを安全に行うため
- テーマのアップデート時に、カスタマイズした内容を残しておくため
テーマのカスタマイズを安全に行うため
親テーマを直接編集してミスると取り返しがつかなくなります。
- まちがって重要なコードを消してしまった
- 画面が真っ白になってしまった
- レイアウトがぐちゃぐちゃになってしまった
このような事態を防ぐために、親テーマではなく子テーマを編集するのです。
そうすれば、編集でおかしくなったとしても子テーマを消せば元に戻ります。
テーマのアップデート時に、カスタマイズした内容を残しておくため
親テーマを直接カスタマイズした場合、アップデートが入るとカスタマイズした内容がすべて上書きされてしまいます。
ですが、子テーマをカスタマイズしていれば、たとえ親テーマにアップデートが入ったとしてもカスタマイズ内容が消えることはありません。
以上のことから、カスタマイズは親テーマではなく子テーマで行うのが正しいといえます。
そうと分かれば、実際に子テーマを作成していきましょう！
※ほとんどの有料テーマには、あらかじめ専用の子テーマが用意されています。有料テーマをお使いの方はそちらをお使いください。
【超かんたん】子テーマの作り方
子テーマを作成する手順は以下のとおりです。
- 子テーマのフォルダを作成する
- style.cssを編集
- function.phpを編集
作成の際は、お使いのサーバーのファイルマネージャー、もしくはFTPソフトを利用してください。
今回の説明ではエックスサーバーのファイルマネージャーを例にします（どのサーバーでも流れは一緒です）。
【手順1】子テーマのフォルダを作成する
今回は、WordPressに最初から入っている「twentyseventeen」の子テーマを作成します。
まずはファイルマネージャーを開き、以下の順にクリックします。
「お使いのドメイン＞publc_html>wp_content>themes」
フォルダ名を「twentyseventeen-child」とし、フォルダ作成をクリックします。
（親子関係がわかるように語尾に「-child」をつけましょう）
こんな感じで作成されればOKです。そのままフォルダをクリックしましょう。
続いてフォルダ内に、以下の2つのファイルを作成します。
- style.css
- function.php
同じ手順で作成すればOKです。
※フォルダ作成ではなく、”ファイル作成”ですのでお間違えなく
【手順2】style.cssを編集
作成したstyle.cssに必要な情報を入れていきます。
チェックを入れて「編集」をクリックしましょう。
開きましたら以下のコードを記述し「保存する」をクリックします。
/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/
記述する際は、それぞれ下記の通りに書き換えてください。
- Theme Name: 子テーマのフォルダ名
- Template: 親テーマのフォルダ名
【手順3】function.phpを編集
function.phpにも必要な情報を入れていきます。
下記のコードをそのままコピペで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’ ); }
コピペしましたら「保存する」をクリックします。
これで子テーマが完成しました！
早速確認してみましょう。
作成した子テーマを有効化しよう
WordPress管理画面の「外観」から「テーマ」をクリックします。
作成した子テーマが反映されて入ればOKです。
あとは「有効化」をして、レイアウトに問題がないか確認してみましょう。
もしレイアウトが崩れていましたら、style.cssの記述に間違いがないか確認してください。（1文字でもスペルが間違っているとうまく動きません。）
おつかれさまでした！
これからカスタマイズをする際は、今回作成した子テーマのstyle.cssを編集するようにしましょう！
最後までしっかりお読みいただき、ありがとうございました！
こちらの記事もオススメです↓↓
プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか？
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました！
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開（Zoom&チャット）
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック！
エックスサーバー 
mixhost 
ヘテムル 