WordPressにある程度慣れてくると、テーマを編集して色々なカスタマイズを行いたくなると思います。しかし、テーマの編集は注意しなければならないポイントがたくさんあるため、慎重に行わなければなりません。

テーマの編集は色々な方法で行うことができますが、おすすめの方法は子テーマを作ってテーマをカスタマイズする方法です。

今回は、子テーマを作って安全にWordPressのテーマをカスタマイズする方法をご紹介したいと思います。

子テーマって何?

子テーマとは、特定のテーマ(親テーマ)をカスタマイズするためのテーマファイルのことです。

子テーマを作ってカスタマイズを行うことによって、親テーマのデザインや機能をベースにしてカスタマイズしたい部分だけ自分で編集することができます。

親テーマを直接編集してテーマをカスタマイズすることも可能ですが、それでは色々な問題が発生してしまいます。その理由を次にご説明したいと思います。

子テーマを作ってカスタマイズを行うべき理由

では、なぜ子テーマを使ってテーマの編集・カスタマイズを行わなければならないのでしょうか?

子テーマを作ってカスタマイズを行うべき理由には、次のようなものがあります。

子テーマを使わないとカスタマイズ内容が消えてしまう危険あり

WordPressのテーマは、アップデートによって更新されます。テーマがアップデートされると、ファイルが上書きされてしまってせっかく作成したカスタマイズの内容がすべて消えてしまう可能性があります

テーマをアップデートせずに放置していると、重要なセキュリティ面の問題が発生してしまう可能性があります。テーマをアップデートしても問題が無いようにするためには、子テーマを作ってテーマを編集する方法がおすすめです。

変更内容を管理しやすい

親テーマを直接編集してしまうと、何か問題が発生した時に元に戻す方法が分かりづらくなります。

子テーマを作ってカスタマイズしている場合は、子テーマに記述したコードだけを消せば変更を元に戻すことができるので管理しやすく、手間がかからないというメリットがあります。

このように、親テーマを直接編集してしまうと色々と問題が発生してしまうので、テーマを編集する場合は子テーマを作ってカスタマイズする方法がおすすめです。

子テーマを編集する前にFTP接続できるようにしておこう

子テーマを作るためには、いくつかのファイルの編集を行います。ローカル環境でファイルを作成してWordPressの管理画面からアップロードする方法もありますが、FTP接続でサーバー上のファイルを編集する方法がおすすめです。

FTP接続を利用することで、普段使っているテキストエディタを使ってテーマファイルを編集することができるので、効率よく作業を行うことができ、テキストエディタの機能でエラーを検出しやすくなります

FTP接続のやり方が分からないという方は、「レンタルサーバー名+FTP」と検索すれば公式のヘルプページが表示されるので、そのページを参考に進めてみてください。

おすすめのFTPクライアントはCyberduckというソフトです。Windows/Macのどちらも対応しており、無料で利用する事が可能です

子テーマの作り方

子テーマを作るためのステップは大きく分けて4つあります。

  1. 子テーマのフォルダを作成する
  2. styles.cssに基本情報を記述する
  3. functions.phpに設定を追加する
  4. WordPressのテーマ設定から子テーマを選択する

それぞれの手順を詳しくご紹介していきます。

子テーマのフォルダを作成する

まずは、子テーマのファイルを保存するフォルダを作成しましょう。フォルダを作成する場所は、/wp-content/themes/の中です。色々なテーマのフォルダが入っている場所ですね。

フォルダ名は、「{親テーマ名}-child」のようにしておくと分かりやすく管理することができると思います。

style.cssに基本情報を記述する

フォルダを作成したら、まずはその中にstyle.cssという名前でファイルを作成します。style.cssの中には下記のコードを記述しておきましょう。

子テーマと親テーマの名前は、それぞれ下記を参考にして記述してください。

Theme Name
Theme Nameには、子テーマの名前を記述します。子テーマの名前は自由に付けることができますが、フォルダ名に付けたように「{親テーマの名前}-child」のように設定しておくと、それが子テーマであることが分かりやすくなります。
Template
Templateには、親テーマの名前を記述します。親テーマの名前は、親テーマのstyle.cssの上部に記述されている「Theme Name」の値をそのまま記述します。管理画面のテーマ一覧に表示される名前と同じです。

これでstyles.cssの準備は完了です。

functions.phpに設定を追加する

次に、style.cssを作ったファイルと同じ場所にfunctions.phpという名称でファイルを作成します。

functions.phpの中には下記のコードを記述します。

このコードを記述することで、親テーマと子テーマのstyle.cssで指定したスタイルが正しく適用されるようになります。

WordPressの管理画面から子テーマを有効化する

子テーマのフォルダの中にstyle.cssとfunctions.phpを作成できたら、最後にWordPressの管理画面から子テーマを有効化します。

管理画面の「外観」→「テーマ」を開くと、テーマ一覧に先程作成した子テーマが表示されているので、それを有効化しましょう。

これで子テーマがWordPressのテーマとして設定され、子テーマに記述した内容がWebサイトに反映されるようになりました。

しかし、まだ子テーマフォルダの中身がstyle.cssとfunctions.cssの2つだけなので、見た目は親テーマと同じです。

次に、実際に子テーマを編集してテーマをカスタマイズを行う手順をご説明します。

テーマを編集してカスタマイズする

子テーマを作り終えたら、カスタマイズしたいファイルを親テーマのディレクトリから子テーマのディレクトリにコピーします。

例えば、投稿ページを編集したい場合はsingle.phpを親テーマのディレクトリから子テーマのディレクトリにコピーします。

そして、子テーマのsingle.phpの内容を編集すると、公開されているWebサイトの表示内容に反映されます

なぜこれで編集内容が反映されるのでしょうか?実は、子テーマが有効化されている場合、WordPressは子テーマのファイルを読み込むように動作が決められています。

親テーマにしかsingle.phpが存在していない場合
親テーマのsingle.phpが読み込まれる
子テーマにしかsingle.phpが存在していない場合
子テーマのsingle.phpが読み込まれる
親テーマと子テーマのどちらにもsingle.phpが存在している場合
子テーマのsingle.phpが読み込まれる

このように、子テーマは親テーマのファイルの内容よりも優先して読み込まれるため、子テーマを編集することによってページの表示内容をカスタマイズすることができます。

編集したいファイルが複数ある場合は、それぞれを子テーマのディレクトリにコピーしてから編集すると変更内容が反映されます。

ただし、style.cssとfunctions.phpは動作が少し異なるので注意が必要です。

style.cssとfunctions.phpは例外

上記にWordPressは子テーマにファイルが存在していればそれを優先して読み込むとご説明しましたが、style.cssとfunctions.phpは親テーマと子テーマのファイルを両方読み込むようになっています。

そのため、style.cssとfunctions.phpにコードを追加したい場合は親テーマのディレクトリから子テーマのディレクトリにファイルをコピーせずに、子テーマ作成時に作ったファイルに追記する形でコードを付け足すようにしましょう。

まとめ

テーマの編集によってWordPressの優れた部分を最大限に活かすことができますが、同時に不具合やエラーが発生してしまう原因にもなります。

テーマのファイルを編集してカスタマイズする場合には、最大限注意して変更作業を行うようにしましょう。

おすすめの記事