WordPress(ワードプレス)の、子テーマの作り方!

WordPress

WordPress(ワードプレス)の、子テーマの作り方を説明します。読者対象は、WordPressの子テーマの作り方を知りたい方です。初心者でも取り組んでいただけるように、簡単に作れる方法をできる限り分かりやすく説明しています。

なぜWordPressの子テーマを作るのか?

WordPressを運用する際に、子テーマを使用すると大変便利です。テーマをアップデートした場合でも、カスタマイズ情報が消えないですからね。仕組みとしては、カスタマイズを別ファイルに記録するから上書きされないわけですが、これが子テーマ最大の特徴だと思います。

このように、非常に便利な子テーマですが、テーマによっては用意されていないことも少なくないようです。せっかく良いテーマが見つかっても、子テーマが無いのでは使用をためらってしまいますよね。だったら、いっそのこと自分で子テーマを作っちゃおうというわけなんです。

そこで、子テーマの作り方をできるだけ簡単に説明しようと思います。

子テーマの作り方を、5つの手順で説明します。

それでは早速、子テーマの作り方をご紹介しましょう。手順は5つですので、しっかり目を通してくださいね。(なお、基本的なファイル操作を理解されている方を対象に説明していますので、不慣れな方には難しいかもしれませんが、予めご了承ください。)

子テーマの作り方、その手順とは?

子テーマを自分で作成する場合は、以下のような手順で行います。(なお、利用したいテーマを最初にインストールして、動作することを確認しておきましょう。なぜなら、予め親テーマをインストールしておかないと、子テーマを作れないからです。)

このように、最低限フォルダは1つファイルは2つあれば、子テーマが作れます。意外に簡単なのではないでしょうか。ちなみにファイル作成は、文字コードを指定できるタイプのテキストエディタで行ってください。ほとんどの環境では、Unicode(UTF-8)で保存する必要があるからです。

参考 おすすめのテキストエディタはこちらです。

https://hprs1.com/%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8-%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf/

1.テーマフォルダに、子テーマ用のフォルダを作成する。

テーマフォルダは「 /wordpress/wp-content/themes/ 」に存在します。実際にフォルダを覗いてみると、現在インストールされているテーマのフォルダが見えるはずです。利用しているサーバーのやり方に従って、フォルダを確認してください。(一般的には FTP を使います。)

WordPress テーマフォルダー

複数のテーマをインストールしている場合は、複数のフォルダが見えると思います。

テーマフォルダが確認できたら、そこに子テーマ用のフォルダを作成します。フォルダ名は親テーマのフォルダ名に child を付けて、「○○-child」とします。例えば「twentynineteen」というフォルダ名であれば、子テーマは「twentynineteen-child」という名前にするわけですね。

WordPress 子テーマフォルダー

絶対この名前(-child)にしなくてはいけないというわけではありませんが、暗黙の了解で統一されているようです。

なお、親テーマのフォルダ名は表示したままにしておくか、メモして分かるようにしておいてください。(次の手順では、フォルダ名が分からないと先へ進めないからです。)

2.子テーマ用の style.css ファイルを作成する。

子テーマ用の style.css の内容は以下の通りです。

親テーマのフォルダが twentynineteen で、子テーマ名を Twenty Nineteen child にする場合。

/*
Theme Name: Twenty Nineteen child
Template: twentynineteen
Version: 20181230
*/

内容を簡単に説明すると、Theme Name には子テーマの名前を任意で記述します。Template には親テーマのフォルダ名を記述します。Version にはバージョンを示す数字(日付など)を任意で記述します。最低限これだけ記述すれば、子テーマとして十分機能します。

保存の際は、文字コードを UTF-8 で、名前を style.css で行いましょう。

3.子テーマ用の functions.php ファイルを作成する。

子テーマ用の 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’);
}
?>

こちらのコードは書き換えることなく、そのまま書き写してください。ちなみに、何をやっているのかというと、親テーマのスタイルを子テーマのスタイルで上書きする処理です。

保存の際は、文字コードを UTF-8 で、名前を functions.php で行います。

アポストロフィー・カンマ・ピリオドは、コピーすると全角に変換されてしまうことがありますので、十分気をつけてください。

4.用意したファイルを子テーマ用のフォルダに転送する。

2つのファイル(「style.css」と「functions.php」)が用意できたら、実際にサーバーに転送しましょう。利用しているサーバーのやり方に従って、ファイルを転送してください。ファイルの転送先は、「○○-child」フォルダです。(先ほどの例なら「twentynineteen-child」)

WordPress 子テーマファイル

ここまでできれば、いわゆるインストール作業は完了です。しかし、このままでは子テーマとして稼働しませんので、続いて有効化の手順を実行しましょう。

5.テーマを有効化する。

インストール作業が終わりましたので、テーマを有効化しましょう。手順は以下の通りです。

  1. [外観]⇒[テーマ]の順にポイントする。外観 テーマ
  2. [テーマ]をクリックする。
  3. 「○○ child」が表示されていることを確認する。
    WordPress テーマ一覧
  4. 見つけた「○○ child」をポイントする。WordPress テーマ一覧で子テーマをポイント
  5. [有効化]ボタンをクリックする。WordPress テーマ一覧で子テーマを有効化

これで、子テーマを利用できるようになりました。子テーマには何も設定していませんので、サイトには何の変化もないはずです。(もし、表示が変わった場合は、子テーマが機能しない場合は?を参照してください。)

動作を確認してみましょう。

あとは、実際に子テーマのCSSにスタイルを記述して、適用されるかどうか確認しましょう。例えばタイトルの文字サイズを大きく(1.5倍)してみます。(先ほどの内容の下に記述します。)

WordPress 子テーマ設定前

Version: 20181230
*/
.site-title {font-size: 150%;}

うまくいけば、スタイルが適用されるはずです。(上記は Twenty Nineteen 用の記述です。)

WordPress 子テーマ設定後

参考:画像を表示したいときは?

テーマの一覧では、子テーマの画像が表示されないので殺風景ですよね。動作上まったく問題ありませんが、何とかしたいときは、親テーマのフォルダにある「 screenshot.png 」という画像を子テーマフォルダにコピーしてください。親テーマと同じように画像が表示されますよ。

WordPress テーマ一覧で子テーマに画像を表示

同じ名前であれば、他の画像でも大丈夫です。

補足:子テーマが機能しない場合は?

子テーマが機能しない場合があると思います。その場合は、親テーマのCSSも反映されないのではないかと思います。おそらく、functions.php がうまく機能していないと思いますので、転記ミスが無いか、記述されているプログラムをよく確認してくださいね。

また、コピー&ペーストすると、一部の記号が全角に変換されてしまうことがあります。これはよくあるんですが、気付きにくい問題ですので、よく確認してみてください。

まとめ

いかがでしたか? WordPress(ワードプレス)の、子テーマの作り方を説明しました。

WordPress(ワードプレス)の子テーマの作り方について、フォルダの作り方、2種類のファイルの作り方、ファイルの転送、子テーマの有効化など説明しましたので、ご理解いただけたのではないかと思います。「意外と簡単に作れるなあ」と思われたんじゃないでしょうか。

子テーマが用意されているテーマの場合は不要な手順でしたが、子テーマが用意されていない場合は自分で作ってしまうのが、最も簡単で手っ取り早い方法です。あまりにも手順が簡単なので、テーマ配布サイトで子テーマを用意しないのかもしれないですね。

これで、子テーマのないテーマも安心してお使いいただけると思います。

以上、「WordPress(ワードプレス)の、子テーマの作り方!」と題して説明しました。