WordPressの子テーマの作り方と設定

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

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

テーマを一切カスタマイズせず使っている方には必要ありませんが、少しでも「スタイルシート(style.css)」を編集されている方、カスタマイズしたい方は、子テーマを使うべきです。

子テーマの作り方

難しいことは一切ありません(初めての方でも10分あれば作れます)。流れは以下の通りです。

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

実際にエックスサーバーで公式テーマ「Twenty Sixteen」の子テーマを作ってみます。

注意
有料テーマ等、子テーマが用意されているテーマでは設定不要です。通常テーマと同様、子テーマのzipファイルをアップロードして有効化させて下さい。

ファイルマネージャにログイン

エックスサーバーにログインして、「ファイルマネージャ」にログインします。

ファイルマネージャにログインする

エックスサーバーのファイルマネージャにログイン

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

テーマフォルダを開きます。

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

  1. 「該当ドメイン」をクリック
  2. 「public_html」をクリック
  3. 「wp-content」をクリック
  4. 「themes」をクリック
  5. 子テーマのフォルダを作成

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

子テーマフォルダの作成

子テーマフォルダの作成

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

先程作成した子テーマのフォルダを開き、2つのファイルを作成します。

  1. style.css
  2. functions.php

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

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

子テーマのstyle.cssにスタイルシートヘッダを入力する(必須項目のみ)

style.cssにチェックを入れて、「編集」をクリックします。

style.cssの編集

style.cssの編集

下記コードを記述して、「編集」をクリックします(twentysixteenの場合)。

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

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

style.css編集内容

スタイルシートヘッダに詳細な情報を入力したい方は、WordPress Codexを参考に入力して下さい(後から管理画面のテーマ編集から入力することもできます)。

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

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

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

functions.phpにチェックを入れて、「編集」をクリックします。

functions.phpの編集

functions.phpの編集

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

functions.php編集内容

functions.php編集内容

子テーマを有効化する

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

子テーマを選択

子テーマを選択

親テーマと同じデザインでサイトが表示されれば、子テーマの設定は完了です。後は、「スタイルシート(style.css)」を自由にカスタマイズして下さい。

style.css以外のファイルを子テーマでカスタマイズする方法

親テーマのフォルダを開き、カスタマイズしたいファイルをダウンロードします。

ファイルのダウンロード

ファイルのダウンロード

子テーマのフォルダを開き、ダウンロードしたファイルをアップロードします。

ファイルの追加

ファイルの追加

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

テーマフッターが追加される

テーマフッターが追加される

後は自由にカスタマイズして下さい。

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

最後に

今回紹介した方法以外にも、ローカル環境で「子テーマフォルダ」を作成、その中に「style.css」と「functions.php」を作成、子テーマフォルダをzip形式で圧縮して管理画面からアップロードするといった方法もあります。結果は同じですから、やりやすい方法で子テーマを作成して下さい。

ちなみに、僕はWordPressを使い始めた頃、テーマをアップデートするとファイルが初期化されるなんて知らず、バックアップも取らずアップデートしてしまったことがあります。

当時は子テーマのことすら知りませんでした・・・。

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

6 件のコメント

  • 初めまして

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

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

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

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

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

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

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

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

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

  • コメントを残す

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