レンタルサーバー＋WordPressで個人ブログを運営するとき、どんなWordPressテーマを使うか、というのも楽しみの一つ。
WordPressテーマは自分でゼロから作ることもできますが、多くの場合は有料または無料で配布されているものを利用したり、またはそれらを部分的にカスタマイズする場合が多いと思います。
本ブログも無料のWordPressテーマ「Simplicity2」を利用させていただいています。
既存のWordPressのテーマをそのまま使っていても全く問題が無いのですが、他のブログと違いを出したい！という時があります。
そのようにWordPressテーマを編集したい時は、「子テーマ」を編集・カスタマイズしましょう。
子テーマとは？
WordPressの子テーマとは、WordPressテーマを安全に編集するために用意されたテーマです。
このブログが使っているテーマは「Simplicity2」ですが、実際に有効になっているテーマは「Simplicity2_child」です。「Simplicity2」が親テーマ、「Simplicity2_child」が子テーマ、という関係性です。
親テーマにはテーマに関する全ファイルが入っています。それに対して子テーマは親テーマの一部分、つまりユーザーがカスタマイズできる必要最低限のファイルが準備されています。
こちらはWordPress管理画面の「外観」から「テーマの編集」に移動し、Simplicity2のテンプレートファイルを表示させた画面です。親テーマの全ファイルを表示しているので、多数のファイルがあることがわかるでしょう（実際は下の方へずっと伸びて表示されています）。
一方こちらは子テーマであるSimplicity2_childに含まれているファイルです。全10ファイルとコンパクト。またSimplicity2のテンプレートを引き継いでいることが表示されています。このように子テーマは親テーマの内容を受け継いでいることがわかります。
今回はSimplicity2の子テーマを例に挙げましたが、子テーマは全てのテンプレートファイルに標準で用意されているものではありません。Simplicity2の場合はテーマの製作者様が、ユーザーの利便性を考えて子テーマを準備してくれている、ということです。
なお本記事では詳細にふれませんが、子テーマが用意されていないテンプレートでもユーザー側で任意に子テーマを作成することが可能です。
子テーマを編集する理由
そもそも、親テーマを編集すれば子テーマを準備する必要がないだろう、と考える方もいるでしょう。確かにその方が楽ですが、子テーマを用意するのには理由があります。
例えばテンプレートのスタイルシートを編集してブログのデザインを変えたり、またプログラム（PHPの関数）を追加してブログに独自の機能を加えたい時があります。
これらはstyle.cssやfunctions.phpといった親テーマの該当ファイルを編集しても実現可能なのですが、極力、子テーマを編集した方が安全です。
なぜなら親テーマは、テーマの配布元によって更新される可能性があるからです。
特に自動更新される（WordPressに更新の通知が来る）WordPressテーマの場合、テーマを更新した時点でユーザーが加えた変更が上書きをされてしまいます。
せっかく手間暇かけて行ったカスタマイズも、テーマのアップデートで一瞬にして消えてしまうことに。
その点、子テーマを用意してそちらを編集しておけば、親テーマの更新に影響されずにカスタマイズした部分は安全に残る、というわけです。
子テーマの編集例
それでは具体的な子テーマの編集例です。
本ブログの見出し（h2）の文字の左側にある線（ボーダー）の色を変更してみます。文字上で右クリックし、コンテキスト・メニューの一番下「検証」をクリックします（ブラウザはGoogle Chromeを使っています）。
ページの要素が表示されます。今回編集したい部分は「.article h2」というスタイルシートで色が設定されています。
WordPress管理画面の「外観」より「テーマの編集」へ移動。右上の「編集するテーマを選択」が「Simplicity2_child」になっているのを確認し、「スタイルシート（style.css）」を開きます。
Simplicityの子テーマでは、「Simplicity子テーマ用のスタイルを書く」と丁寧にコメントが記載されています。その下に上書き用のスタイルシートを設定しましょう。
ボーダー色を赤にするため「color: #f00;」を追記して、「ファイルを更新」をクリックします。「ファイルの編集に成功しました。」と表示されれば完了です。
※上記は編集例で、実際のブログでは変更していません。
なお今回の編集はスタイルシートなので記述にエラーがあっても表示に問題はありませんが、「functions.php」などにPHPを記載したりする場合は、プログラムにエラーがあると最悪WordPressが真っ白になって表示されない、といったことが起こります。テスト環境で事前にテストをしたり、FTPでfunctions.phpのバックアップを取っておく、などの対応をしておきましょう。
実際にCSSの編集が成功したかどうか、ブログを表示させて確認します。期待した結果が表示されていれば成功です。
ファイルの編集は成功したのにブログの見た目が変わらない、という場合はキャッシュが残っている可能性があります。
Chromeの場合、右上のメニュー（「…」が縦になっているマーク）から「その他のツール」→「閲覧履歴を消去」、またはChromeがアクティブになっている状態でキーボードの「Ctrl＋Alt＋Delete」を押すと、上記のような閲覧履歴を消去する画面が表示されます。
「キャッシュされた画像とファイル」にチェックが入っていることを確認して「閲覧履歴データを消去する」をクリック、ブログを再度読み込みし、変更が反映されていることを確認しましょう。
なお「Cookieと他のサイトデータ」にチェックが入っていると、閲覧履歴データを削除した時に各種サイトのログインデータなど、ブラウザに記憶されている情報が消えてしまうので注意。
まとめ
以上、WordPressをカスタマイズする時には親テーマではなく、子テーマに変更を加えましょう、というお話でした。
ご覧のように子テーマを編集すると、親テーマをさわることなく安全にテーマに変更を加えることができます。
また上でも少し触れましたが、子テーマが用意されていない場合は自分で子テーマを作成することも可能です。
いずれにしても親テーマを編集してしまうと、親テーマがアップデートされた時にカスタマイズ内容が消えてしまう可能性がありますので注意してください。
本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。
公式サイト：エックスサーバー
コメント