エックスサーバーで子テーマを作成する方法

エックスサーバーで子テーマを作成する方法をまとめておきます。

子テーマを作成する前に

子テーマを作成する前に、テーマ配布元サイトで子テーマが配布されていないか確認して下さい。

子テーマが配布されている場合は、通常テーマと同様、管理画面の外観「テーマ」から、子テーマのzipファイルをアップロードするだけで子テーマを使うことができます。

子テーマのzipファイルをアップロード

子テーマのzipファイルをアップロード

子テーマが配布されていな場合は、ご自身で子テーマを作成して下さい。

子テーマの作り方

流れは以下の通りです(初めての方でも10分あれば設定できます)。

手順
  1. 子テーマフォルダの作成
  2. style.cssの作成
  3. functions.phpの作成
  4. 親テーマを継承するためのコードを記述
  5. 子テーマの有効化

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

エックスサーバーにログインして、「ファイル管理」をクリックします。

「ファイル管理」をクリック

「ファイル管理」をクリック

テーマフォルダを開いて、「新規フォルダ」から子テーマフォルダを作成します。

例えば、Twenty Twentyの子テーマを作りたい時は、「twentytwenty-child」等の名前をつけて子テーマフォルダを作成します(フォルダ名は半角英数字ならなんでも構いません)。

パス:/該当ドメイン/public_html/wp-content/themes/

子テーマフォルダの作成

子テーマフォルダの作成

子テーマフォルダに「style.css」と「functions.php」を作成する

作成した子テーマフォルダを開き、「新規ファイル」から2つのファイルを作成します。

作成するファイル名
  1. style.css
  2. functions.php

パス:/該当ドメイン/public_html/wp-content/themes/子テーマ

子テーマフォルダにファイルを作成

子テーマフォルダにファイルを作成

同様にfunctions.phpファイルも作成して下さい。

子テーマフォルダに2つのファイルを作成

子テーマフォルダに2つのファイルを作成

子テーマのstyle.cssにスタイルシートヘッダを入力する

style.cssファイルを選択して、「編集」をクリックします。

style.cssの編集

style.cssの編集

下記コードを記述して、「更新」をクリックします(下記はTwenty Twentyの場合)。

style.css編集内容

style.css編集内容

この際、「Template:○○」の部分には、必ず「親テーマのフォルダ名」をそのまま入力して下さい。

Theme Name テーマ一覧で表示される名前(自由につけてOK)
Template 親テーマのフォルダ名

ちなみに、「@import:」を使用して親テーマのスタイルシートをインポートすることもできますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨しています。

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

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。

子テーマのfunctions.phpに親テーマを継承するためのコードを記述する

functions.phpを選択して、「編集」をクリックします。

functions.phpの編集

functions.phpの編集

下記コード(全てのテーマ共通)を記述して、「更新」をクリックします。

functions.php編集内容

functions.php編集内容

子テーマを有効化する

管理画面の外観「テーマ」に子テーマが追加されているので「有効化」します。

子テーマを選択

子テーマを選択

親テーマと同じデザインでサイトが表示されれば、子テーマの設定は完了です。

その他のファイルを子テーマでカスタマイズする方法

親テーマのフォルダを開き、ファイルを選択して「コピー」をクリックしたら、コピー先で子テーマフォルダを選択します(コピー先には必ず子テーマフォルダを指定)。

カスタマイズしたいファイルを子テーマフォルダにコピー

カスタマイズしたいファイルを子テーマフォルダにコピー

子テーマの編集画面にアップロードしたファイルが追加されます。

子テーマにfooter.phpが追加される

子テーマにfooter.phpが追加される

但し、「style.css」と「functions.php」以外のファイルは、子テーマのファイルが優先して読み込まれます(親テーマのファイルが呼び出されない)。テーマがアップデートされた際に恩恵を受けられなくなる可能性があるので注意して下さい。

最後に

WordPressのテーマカスタマイズは、子テーマを使うのが一般的です。

親テーマを直接カスタマイズすると、テーマをアップデートした際にカスタマイズした箇所が初期化されてしまうからです(子テーマを使えばカスタマイズした箇所を引き継ぐことができる)。

簡単な「style.css」の編集だけなら、ワードプレスの標準のカスタマイズ機能「追加CSS」を使えば問題ありませんが、「functions.php」を編集したい場合や、テーマファイルに大きな変更を加えたい場合は、子テーマを作ることをおすすめします。

スポンサーリンク
スポンサーリンク

8 件のコメント

  • 初めまして

    新しい方式の子テーマの作り方を知りました。
    とても判りやすい解説で助かりました。
    ありがとうございました。 m(_._)m

    • この記事がお役に立てたのなら幸いです。

      恐らく、「@import:」と「functions.php」のやり方だと思いますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨していますので、「functions.php」を使った方が良さそうですね。

  • 非常にわかりやすく同テーマ、同サーバーなのでピンポイントで参考になります。
    ありがとうございました。

    P.S私もアニメが好きでアニメサイト運営中です☆

    • FFFTPを使わなくても、サーバーのファイルマネージャから大抵のことはできてしまうので、知っておくと凄い便利だと思います。

      それよりも、僕はアニメサイトが気になりますっ!

      僕は広く浅くのにわかタイプなのですが、基本的にアニメはなんでも好きです。

  • はじめまして
    ここまで詳しく書いて頂き本当に助かりました。
    ありがとうございました。
    感謝感謝です。

  • こんにちは。

    子テーマの設定がわからず悩んでいたので、とても助かりました。

    ありがとうございます!

    1つ質問させていただいてよろしいでしょうか?

    「最後に」の見出しのまえにある「テーマがアップデートされた際に恩恵を受けられなくなる可能性があるので注意して下さい。」

    とは、どういうことなのでしょうか??

    子テーマをカスタマイズすることで、親テーマをアップデートしてもカスタマイズ内容が残る、というのは理解しているのですが、先程の部分が分かりませんでした。

    初歩すぎる質問かもしれませんが、ご回答頂けると嬉しいです。

    • style.cssとfunctions.phpの2つのファイルは、親テーマと子テーマ双方のファイルが呼び出されます。親テーマのstyle.cssを元に、子テーマのstyle.cssで「追加・上書きする」といったイメージです。テーマのアップデートで、親テーマのstyle.cssに修正が加えられた場合、その修正内容は子テーマにも適用されます。

      ですが、style.cssとfunctions.php以外のファイルを子テーマに作成した場合は、親テーマの対象ファイルが呼び出されなくなります(作成しなければ親テーマのファイルが呼び出されます)。親テーマのファイルを子テーマのファイルに「置き換える」といったイメージです。例えば、footer.phpを子テーマに作成した後、テーマのアップデートで親テーマのfooter.phpに修正が加えられた場合、この修正が子テーマには適用されません。

      style.cssとfunctions.phpだけ特殊だと思って下さい。

  • コメントを残す

    メールアドレスが公開されることはありません。