WordPressをカスタマイズしたいけどどうすればいいか分からない。。。
子テーマをカスタマイズすれば良いと聞いたことがあるが、どうやって子テーマを作るの？
あと、なんで親テーマをカスタマイズしたらいけないか理由も教えて欲しい。
今回の記事では、WordPress初心者向けに子テーマを作って既存の親テーマをカスタマイズする方法をご紹介し、なぜ親テーマをカスタマイズしてはいけないか理由をご紹介します！
WordPressをカスタマイズする際には、この子テーマを必ず作ってテーマを編集する必要があり、これをしないと、、、
- 親テーマをアップデートした際にカスタマイズしたデータが消える
- サイトの表示がうまくいかない
このような原因にもなります！
- WordPress初心者の方
- WordPressの親テーマをカスタマイズしたい方
- WordPressの子テーマの作り方を知りたい方
WordPressについてあまり詳しくない方は下記の記事をまずはご覧ください！
→ 【初心者向け】WordPressとは？できること、使う前の基礎知識を解説
WordPressの子テーマとは？作る理由
WordPressのテーマにはそもそも2つのタイプがあり、、、
- 親テーマ・・・メインのテーマ
- 子テーマ・・・カスタマイズ用のテーマ（親テーマを部分的に編集する）
この2つのタイプがあります。
人気のWordPressテーマや、ブロガー向けのWordPressテーマにはこの子テーマというのがほとんど作られており、親テーマ同様にインストールして使用することができます。
プログラミング知識のない、ブロガー向けのWordPressテーマには子テーマがあるケースが多いですが、商用利用可能のテーマやビジネス向けのテーマはオリジナル性を持たせるためプログラマーがカスタマイズする必要があるので、「子テーマは自分で作ってね！」というケースが多いです。
親データでカスタマイズするとアップデート時に問題が！
なんで親テーマでカスタマイズしたらダメなの？
親テーマを直接編集すると後からトラブルが起きてしまいます！
WordPressのテーマは、開発者が定期的にアップデートを行います。
アップデートする際には親テーマを更新するわけですから、もし親テーマをカスタマイズしてしまうと、アップデートする際にカスタマイズ内容が更新されてしまいます。
つまり、子テーマを作ってカスタマイズすることにより、親テーマをアップデートしてもカスタマイズ内容が上書きされることがありません。
その他のメリットとしては、子テーマをカスタマイズした際に、もし何か表示崩れが起きたり記事が正しく表示されなくなってどうしようもないときでも、親テーマを有効化すればデフォルトの状態に戻すことが可能です。
子テーマでカスタマイズすることにより、親テーマのアップデートの際にカスタマイズ内容が上書きされることを防ぐことができる！
WordPressで子テーマを作って既存の親テーマをカスタマイズする方法
では、実際に手を動かしながら子テーマを作っていきましょう！
とっても簡単なので、安心してください！
- 子テーマのフォルダを作る（親テーマ名＋-child）
- style.cssを作る
- functions.phpを作る
- テーマ管理画面で有効化
- 編集したいファイルを編集していきカスタマイズする
1.子テーマのフォルダを作る（親テーマ名＋-child）
まず始めに、子テーマのファイルをまとめるために子テーマのフォルダを作成します。
（※今回はバズ部のXeoryExtensionを例に解説していきます！）
themesフォルダの中に、親テーマのフォルダが入っているので同じディレクトリの場所に、
親テーマの名前+ -childで名前をつけて子テーマフォルダを作成します。
この子テーマフォルダの中に、カスタマイズしていくファイルを格納していきます。
2.style.cssを作る
次に作成した、子テーマフォルダの中（xeory_extension-child）にstyle.cssファイルを作成します。
そして作成したstyle.cssファイル内に下記のコードを記入します！
@charset "UTF-8";
/*
Theme Name: XeoryExtension-child
Description: Xeoryの子テーマ
Author: バズ部
Template: xeory_extension
*/
/* all display
-------------------------------------------------- */| Theme Name | 子テーマの名前を記入します（必須） |
| Description | 子テーマの説明文（必須ではない） |
| Author | 開発者の名前（必須ではない） |
| Template | 親テーマのフォルダ名（超重要） |
style.cssの冒頭にこのように記入します。
Templateの部分は、一つでもスペルミスがあると正しく子テーマが認識されないので、注意してください！
3.functions.phpを作る
次に、親テーマのデータを継承するために子テーマフォルダ内にfunctions.phpファイルを作りコーディングしていきます。
そして、作成したfunctions.phpに下記のコードをコピペします。
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}style.css、functions.phpに記載するコードは、
https://developer.wordpress.org/themes/advanced-topics/child-themes/
こちらのWordPress公式サイトから引用しています。
これで、子テーマの完成です！次に管理画面から有効化します！
4.テーマ管理画面で有効化
次に作成した子テーマフォルダをWordPressの管理画面から有効化していきます。
このように、管理画面に進むと子テーマが表示されていると思うので、有効化します。
子テーマが表示されていない場合は、style.cssとfunction.phpの記載ミスが原因なので、もう一度チェックするようにしましょう！
5.編集したいファイルを編集していきカスタマイズする
主にカスタマイズする内容として多いのが、、、
- style.cssを編集してデザインをカスタマイズする
- header.phpやfront-page.phpのHTMLやPHPコードを編集する
この2つが主にカスタマイズする内容だと思います。
この.cssファイルと.phpファイルをカスタマイズする際には特徴と注意点があって、、、
- style.css→親テーマのstyle.cssに追加する形になる
- .phpファイル→親テーマの.phpファイルに上書きする形になる
この特徴をしっかりと覚えておきましょう！
style.cssに追加でコードを書きカスタマイズ
「ここの背景色を変えたいな！」「このレイアウトを変更したいな！」などのスタイルをカスタマイズする際には、子テーマ内のstyle.cssにCSSでコーディングしていけばOKです！
←このように好きなスタイリングをしていってデザインをカスタマイズしていきます！
header.php（.php系のファイル）をカスタマイズ
header.phpなどの.phpファイル系をカスタマイズする際にはいくつかポイントがあります。
- 親テーマの.phpファイルを子テーマ内に複製する
- htmlやphpを編集していく
このように、新規で子テーマ内にheader.phpと作成するのではなく、親テーマのheader.phpを複製する必要があります。（コピペでもOK）
まず始めに、カスタマイズしたい.phpファイルを親テーマのフォルダ内からコピーします。
次にそのコピーした、.phpファイルを子テーマのフォルダ内にペーストします。
あとは、好きなようにHTMLやPHPのコードを編集していけばOKです！
このように、メインのTOPページに要素を追加したい場合には、.php系のファイルを編集する必要があります！
WordPress子テーマの作り方 まとめ
これで、WordPressで自由にカスタマイズできるようになったよ！
いかがでしたでしょうか！！
WordPressをカスタマイズする際には、必ず子テーマを作ってカスタマイズする！
これだけはしっかりと覚えておきましょう！
最後までご覧いただきありがとうございました！
