WordPress（ワードプレス）の子テーマの作り方はとっても簡単！！

難しそうだなあと後回しにしていたWordPress（ワードプレス）の子テーマの作成ですが、重い腰を上げて挑戦してみたら案外簡単でしたので、その方法についてまとめました。

なぜ子テーマを作る必要があるの？

子テーマの作り方の説明に入る前に、子テーマを作った方が良い理由についてお話ししますね。

私も以前は「既存のテーマ（親テーマ）を直接カスタマイズすればいいのに、なんで子テーマなんて作る必要があるのだろう・・・？」と思っていました。

既存のテーマを使っていると、新しい機能の追加や修正などテーマの更新があります。また、WordPress公式テーマをお使いの場合は、自動でアップデートが行われてしまうこともあります。

つまり、親テーマに直接書き込んでいると、テーマの更新をした際に（または自動でアップデートがされた際に）、今まで一生懸命カスタマイズしてきたことがなかったことになってしまう、ということなんです。

ちょっと、この事実を知ってしまうと怖くなってしまいますよね。

「でも、子テーマを作るのって難しそうだし…」と思われるかもしれませんが、子テーマは思っているよりも簡単に作ることができます。

ということで、ここからは一緒に子テーマを作ってみましょう！！

子テーマを作ってみよう

1. フォルダを作る

最初に、アップロードするフォルダを作ります。使用しているテーマ名に「-child」とつけると分かりやすいです。

私の場合は、「MAG」というテーマを使用しているので「MAG-child」にしました。

2020年11月現在「SWELL」というテーマを使用しています。

2.「fanctions.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' );
}

「functions.php」と名付けて、１で作ったフォルダ「MAG-child」に保存します。

3. 「style.css」を作る

次の記述を一部修正して使用します。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:3.1.3
*/

上の記述は、私が使用している「MAG」の例になりますので、下記のようにご使用のテーマに合わせて書き換えてお使いください。

親テーマのフォルダ名は、レンタルサーバーから確認できます。「wp-content/themes/」の直下にあります。

同じところ（「wp-content/themes/」の直下）にある「screenshot.png」のファイルをダウンロードして、１で作ったフォルダに保存しておくと、子テーマのサムネイル画像として表示されます。

つまり、何もしなければ、このような表示（）になりますが、

フォルダに保存した場合は、このような表示（）になります。

こちらは他の人から見えるわけではないので、自己満足の世界です。チャレンジしたい方はどうぞ。

親テーマの現行バージョンの確認方法は・・・

WordPress の管理画面 ＞ 外観 ＞ テーマの編集 に入ると、「style.css」が表示されます。その「style.css」の上の方（私が使用しているテーマ「MAG」では８行目）に書かれているのですぐに見つけられると思います。

これに「style.css」と名前を付けて、１で作ったフォルダに保存します。

4. 他にもカスタマイズしたいページがあれば同じように作る

例えば、ヘッダー（header）をカスタマイズしたい場合は、WordPress の管理画面 ＞ 外観 ＞ テーマの編集 を開き、

を選択します。

「header.php」を全てコピーして、テキストエディタにペーストします。これに「header.php」と名前を付けて、１で作ったフォルダ「MAG-child」に保存します。

5. アップロードして有効化する

① １で作ったフォルダ「MAG-child」を圧縮します。

② WordPress の管理画面 ＞ 外観 ＞ テーマ ＞ 新規追加 ＞ テーマのアップロード をクリックします。

上の画像の赤枠内『ファイルを選択』で ①で作った zipファイルを選択し、『今すぐインストール』をクリックします。

③『有効化』をクリックします。

これで、『子テーマ』が完成しました！！

子テーマが利用できるか確認してみよう

子テーマを作ることはできたけど「本当にこれで大丈夫なの？」と思う方は、試しに CSSファイルに下の記述をして確認してみましょう。

コメントアウトしたテーマ情報の下に記述します。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:3.1.3
*/

body {
  background: skyblue; 
}

サイトを更新すると、背景が水色になっているはずです。確認が済んだら、このコードは削除しておきましよう。

うまく反映されない場合は、「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' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

この記述は親テーマの後に子テーマのスタイルシートをロードすることを、よりはっきりと示しています。

子テーマの作り方についてのまとめ

もし親テーマである既存のテーマがアップデートされてしまったとしても、子テーマを使ってカスタマイズしていれば、カスタマイズしたものが全てなかったことになってしまうような惨事は免れることができます。

『子テーマ』は思っているよりも簡単に作れますので、ぜひあなたもチャレンジしてみてくださいね。

ワードプレス製作代行も承っております。