WordPressをカスタマイズする時には子テーマを使うと幸せになれるお話

WordPressを使ってブログサイトやビジネスサイトを作成してしばらくするとカスタマイズしたくなりませんか？

• ちょっとここの色を変えたいな。。
• この前見つけた素敵なサイトにあったみたいな装飾を増やしたいな。。

などなど、Wordpressのテーマをそのまま使うということは同じ見た目のブログが他にも存在するということ。

大きなカスタマイズはできなくても、ほんのちょっと自分色をいれたいなって思ったとき、あなたはどうしますか？

ノンノン！それではダメですよ！

直接テーマファイルを書き換えたら、テーマの更新をしてバージョンアップをしたが最後！

頑張ってカスタマイズした変更箇所が消えてしまうかもしれません！

使っているテーマのファイルを書き換えるのではなく子テーマを作ったほうがいい理由

WordPressは常にバージョンアップを繰り返しています。

そして数え切れないほどあるWordpress用のテーマもまた、日々バージョンアップしていくんです。

バージョンアップの頻度はテーマごとに違いますが、Wordpress本体のバージョンアップに対応するためやもっと使いやすくしたり機能を追加したりと、さまざまな理由で成長しているんですね。

このテーマのバージョンアップをするときに問題なのは、新Verが旧Verのテーマをすべて上書きしてしまうこと。

テーマ内のstyle.cssに直接CSSを記述していた場合、バージョンアップした時に頑張ってカスタマイズしたstyle.cssまで上書きされて消えてしまうんです！

なんて思ったあなた！本当に更新しないでいいんですか？？

びっくりするくらいとっても使いやすい機能が追加された、なんてときも重大なバグが発見されたので必ず更新してください！なんてなっても更新しない？

さすがに後者だとちょっと更新しないわけにはいかないですよね。

そんな悲劇をおこさないための方法が「子テーマ」というシステムなんです。

そもそも子テーマってなに？

使いたいテーマを「親テーマ」としてその子どもである「子テーマ」を作り、Wordpress管理画面のテーマの選択で「子テーマ」のほうを有効にします。

すると、「子テーマ」にあるファイルは「子テーマ」のものを利用。

「子テーマ」にはないけどサイトを表示するために必要なファイルは「親テーマ」へ見に行ってくれる、という2段構えの構図になります。

「子テーマ」にはカスタマイズした必要最小限のファイルのみがはいっていて、「親テーマ」の記述はデフォルトのままいじっていない状態。

カスタマイズしたすべての情報は「子テーマ」内にあるので、「親テーマ」の更新をしてもカスタマイズした情報は消えない、というわけです。

他にもあるよ！子テーマのメリット

まず子テーマを使う一番のメリットとしては、自分がカスタムしたファイルや記述しかないのでとても見やすいです！

親テーマに直接記述していると、自分のカスタムした箇所が埋もれてしまって探すのも大変。

子テーマを使うとそのわずらわしさがないのがメリットです。

また、カスタマイズが楽しくなってきてガシガシカスタマイズしていたら、なんかおかしなとこさわっちゃったみたい。。
でもどこをさわってこうなったのかわからないよー！ってなった時、親テーマに直接記述していたらもうお手上げです。

でも子テーマだと、親テーマに元の記述が残っているので、見比べることができます。

それでもわからなければ最悪子テーマ内のファイルを消してしまえば被害は最小限に抑えられます。

親テーマに直接記述していた場合でも親テーマをまたダウンロードしてくればいいですが、もしすでに配布終了していたり、無料期間が終わっていれば元には戻せません。

最悪の事態をまねかないためにできることは少しでもやっておきましょう！

子テーマの作り方は３通り！

CSSのみ子テーマ化できるプラグインを使う

とりあえず難しいことはわからないからcssでちょっと色変えたりするくらいかな？っていう人はCSSのみを子テーマ化できるプラグインを使いましょう。

プラグインを使うメリットは、FTPを使わなくても気軽に子テーマ化できる点です。

• One-Click Child Theme
• Child Theme Wizard
• Simple Custom CSS

プラグインを使って子テーマを作成する場合は下記のサイトが参考になります。

[WordPress] 子テーマを使ったテーマ改造2

WordPressの子テーマ作成プラグイン「Child Theme Wizard」

Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWordPressプラグイン

プラグインを使えば簡単に子テーマの作成が可能なので、難しいのは無理。。って方もぜひ試してみてください。

また、もしすでにSNS連携などのためにJetpack by WordPress.comというプラグインをお使いの方は、JetpackのカスタムCSSという機能でCSSの追加・変更ができますよ。

functions.phpとstyle.cssを子テーマ化できるプラグインを使う

cssだけじゃなくfunctionsなんかもいじる予定があるんだけどFTPとかZipがわからない。。触れない。。なんて方は、cssとfunctionsをまとめて子テーマ化できるプラグインを使ってみましょう。

WordPress子テーマメーカーを使えば、親テーマの名前と子テーマにつけたい名前を入力するだけで最低限のファイルを作成してくれます。

WordPress子テーマメーカーについては下記のサイトに詳細が記載されています。

子テーマ作成プラグイン、『子テーマメーカー』作りました

※functions.phpはとっても大切なファイルなので、よくわからないって方は触らないことをおすすめします。
少し間違ったり親テーマの記述とケンカするだけでサイトが真っ白になったりします。

プラグインを使わずに子テーマを追加する

３つめの方法はプラグインを使わないで子テーマを追加する方法です。

この方法はプラグインは極力使わずにスリムにしたい方などにおすすめ。

子テーマのフォルダを作ってFTPで直接アップロードするかZip化してアップロードするだけで簡単にWordpressの子テーマが作れちゃいます。

プラグインで追加するよりは少し高度になるので、自信のない方、FTP？Zip？ってなに？って方はプラグインで追加しちゃいましょう。

プラグインを使わずに子テーマを追加する方法

先に説明したように、子テーマを追加するためには３つの方法があります。

今回はその中から、プラグインを使わないで子テーマを追加する方法を詳しく解説します。

• 子テーマのフォルダ
• functions.php
• style.css

必要なものは上記の3つだけです。

子テーマのフォルダを作成しよう

functions.phpとstyle.cssを入れる子テーマフォルダを作成しましょう。

名前は半角英数字なら自分のわかりやすい好きな名前で大丈夫です。

大体はわかりやすいように「親テーマの名前＋child」とつけると、なんのテーマに対しての子テーマかがわかりやすいと思います。

functions.phpを作成しよう

子テーマを作って子テーマのcssが適応されると、そのままの状態では親テーマのcssを引っ張ってきてくれません。

なので、functions.phpを作成し、親テーマのcssも読み込んでくれるように記述していきます。

<?php //

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

上記を記述したらfunctionsという名前でファイルの種類をphpとして保存しましょう。

functions.phpの作成は以上です。

style.cssを作成しよう

実際にこれからcssの追加や編集をしていくstyle.cssを作成します。

使用する親テーマの子供だということを認識してもらうコードを記述していきます。

/*
 Theme Name:   子テーマの名前
 Template:     親テーマの名前
*/

最低限必要な情報は上記の2つです。

親テーマの名前は大文字小文字など詳細まで間違えないように記述しましょう。

上記は簡易版ですが、下記のように詳細を設定することもできます。

/*
 Theme Name:   子テーマの名前
 Theme URI:    子テーマのURL
 Description:  子テーマの説明文
 Author:       子テーマを作った人
 Author URI:   子テーマを作った人のURL
 Template:     親テーマの名前
 Version:      子テーマのバージョン
 License:      ライセンス情報
 License URI:  ライセンスURI
 Tags:         テーマのタギング
 Text Domain:  ドメイン（プラグイン名）
*/

必要な記述をして、ファイル名をstyle、ファイル種別をcssにして保存すればstyle.cssの完成です。

参考－WordPress Codex 日本語版　子テーマ

子テーマをアップして有効化しよう

上記で作成したfunctions.phpとstyle.cssをはじめに作っておいた子テーマ専用のフォルダにいれて子テーマの完成です。

この子テーマをWordpressにアップしていくのですが、方法は２つ。

１つ目はFTP経由で親テーマと同じ階層にアップする。

２つ目は子テーマフォルダを圧縮してZipにしてから外観→テーマ→新規追加→テーマのアップロードからアップする。

お好きな方法でアップしたら子テーマを有効にして、子テーマの設置完了です。

あとは子テーマのcssを思う存分カスタマイズするだけ！

これでいくらカスタマイズしてもテーマの更新で消えてしまうことはありません。

子テーマの作成　おまけ

子テーマのフォルダにはいっているものがfunctions.phpとstyle.cssの２つだけだと、テーマを選ぶときの画像がなく透明のままです。

画像が表示されなくて困るってことはないですが、ちょっと殺風景だしなんか画像表示させたいなって場合は、表示させたい画像を準備し、名前をscreenshot.pngにして子テーマフォルダにいれてあげると。。

画像が表示されてテーマを選ぶ画面がちょっとおしゃれ！になります。

WordPressを子テーマでカスタマイズする方法　まとめ

意外と簡単に作成できる子テーマ。

ほんの少しの労力で、頑張ったカスタマイズを守ることができるので、ぜひ導入してみてください。

また、初心者におすすめ！WordPress無料テーマ３選！－はぴまむ編－で紹介しているマテリアルとBizVektorは専用の子テーマも配布しておられるので親切安心です！

マテリアル　カスタマイズ用子テーマ
BizVektor　高度なカスタマイズの仕様

以上、Wordpressのカスタマイズは子テーマでおこなって楽しいwordpressライフをおくりましょう！