WordPressで子テーマを作る方法【初心者でも5分もあれば完成】

WordPress を始めてカスタマイズなどに興味を持ち始めると、「子テーマを作れ!」という記事もチラホラ見かけるようになると思います。

ただ、それらの記事を単に信じてやみくもに「子テーマ」を作れば良いというわけでもありません。

子テーマが不要なパターン
  • テーマのカスタマイズをするつもりはサラサラない
  • CSS を追加してカスタマイズする程度しか考えてない
  • 自分でテーマを作っちゃった人

自分でテーマを作れるプロ級の人はもちろん不要ですが、PHP の追記・変更が必要になってきてから「子テーマ」の設置を考えても遅くはないです。

なぜなら、カスタマイズをしない人にとってはデメリットしかないから。理由に関しては、WordPressでの子テーマが不要説は本当か?【もちろんデメリットはある】の記事で紹介しています。

既存のテーマを使いながら PHP の追記・変更が必要になっている人は、一緒に「子テーマ」の作り方を見ていきましょう。

子テーマの作り方

「子テーマ」を作るには、FTP を触ります。今まで使ったことがない人には怖いかもしれませんが、これから WordPress を使っていくための勉強だと思って頑張ってみましょう。

まずはフォルダーを1つ作成

まずは、「子テーマ」用のフォルダーを1つ作ります。今回は、公式テーマ「Twenty Nineteen」を例にしていきます

ファイルを追加する場所は、エックスサーバーなら「ファイル管理」から、MixHost なら「ファイルマネージャー」からになります。他のサーバーにおいても、ファイルを直接変更する管理画面にアクセスしてください。

そうしたら、「対象のドメイン」→「public_html」→「wp-content」→「themes」までいきます。(MixHost の場合は、対象ドメインと public_html の順番が逆)

「themes」を開いたら、「twentytnineteen」と書かれたファイルがあるはずです。このファイルと同じ階層で、「子テーマ」用のフォルダーを作ります。

childtheme

一般的には、親テーマに英語で子供という意味の「child」をハイフンで繋ぎ、フォルダーを作ります。そうすると、他の人が見てもすぐに分かりますからね。

エックスサーバーの場合は右側に入力場所があるので、「フォルダー作成」の上に「twentytnineteen-child」のようにして入力したら、「フォルダー作成」のボタンを押してください。

childtheme

MixHost の場合は画面上部に「+フォルダー」とあるので、それをクリックして表示された入力欄に「twentytnineteen-child」と入れます。

childtheme

すると、「twentytnineteen」のフォルダーの下に「twentytnineteen-child」が表示されます。これで、フォルダーの作成は完了です。

childtheme

style.css を追加

「twentytnineteen-child」が出てきたら、次はファイルを2つ作ります。そのうちの1つ目、「style.css」を作ってみましょう。

childtheme

フォルダーを作った時と要領は同じで、今度は「ファイル作成」の上に「style.css」と入力して「ファイル作成」のボタンを押します。

すると「style.css」のファイルが表示されるので、エックスサーバーの場合はファイルの横にあるボックにチェックを入れてから「編集」のボタンを押します

MixHost の場合は、ファイルを1度クリックするとアクティブになるので、それから画面上部にある「編集」を押します。

そうしたら、下記の内容を真っさらのファイルに追記します。

style.css
/*
Template: twentynineteen
Theme Name: Twenty Nineteen Child
*/

他の人の説明ではもっと表示されていることもありますが、基本的には最低限この2つあれば「子テーマ」は作れます

style.css に追記する2項目の役割
  • Template:親テーマの名前。ただし、実際の名前と異なっていることも多いので、親テーマの「Text Domain」と書かれている名前をコピペすることをおすすめします。
  • Theme Name:テーマの一覧で表示される名前。自分の分かりやすい名前にして大丈夫。

それぞれの入力が完了したら、「保存」を押して完了となります。

functions.php を追加

1つ目のファイル「style.css」が終わったので、2つ目の「functions.php」というファイルを作っていきましょう。

「style.css」と同じ要領でファイルを作ってから、下記の内容を真っさらのファイルに追記します。

functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
閉じタグが気になった人へ
PHP を少し知っていると「閉じタグは?」となるかもしれませんが、PHP は省略が可能なのでこれで大丈夫です。もちろん、自分で加えてもOKです。

上記のコードを入力して「保存」を押したら、「functions.php」は完了です。

子テーマに切り替えてみよう

フォルダー1つとファイルを2つ作れたら、さっそくテーマの変更をしに WordPress の管理画面へ戻ってください。

「テーマ」にアクセスして、「子テーマ」があったら「有効」にしてからカスタマイズの作業を始めてみましょう。

もし、親テーマが見当たらないなどと表示された場合は、今一度「style.css」の「Template」に正しい名前が入力できているかを確認してみてください