【ロリポップ】子テーマを作る手順

子テーマのメリット

子テーマは親テーマをいじることなくテーマのレイアウトを変更できるので親テーマのデータを保存することができます。
また子テーマのメリットはそれだけではありません。

子テーマを制作することで親テーマがバージョンアップしてもその内容を反映しつつ子テーマで変更した内容を引き継ぐことができます。

よくある失敗として

テーマを自分流に改良していました。
あるときテーマのアップデートができるのでアップデートしました。
それにより自分流に改良したテーマが消えてしまう。

このようなことがあります。

子テーマを作っておくと改良したデータがアップデートで消えることはありませんので、テーマを編集するときは基本的に子テーマを使用することをオススメします。

子テーマを設定するために必要なもの

子テーマ最低限必要なファイルは

  • style.css
  • functions.php

この2つです。

子テーマは主にcssだけに変更を加えることが多いの

ですが、場合によってはheader.phpなどのテンプレートファイルを変更したいときもあるかと思います。

もしテンプレートファイルも変更したいなら、変更したいテンプレートファイルを子テーマのファイル内に置くといいです。

手順

親テーマの名前を確認する

wordpress管理画面の「外観」の「テーマ」をクリック。親テーマの名前を覚えておくか、コピーしておきます。

ロリポップのユーザー専用ページにログイン、子テーマフォルダを作成する

次にロリポップのユーザー専用ページの「サーバーの管理・設定」の「ロリポップ!FTP」をクリック。そこにある自分のサイトのフォルダをクリック(wordpressがルート直下の方は中身が空なので1階層戻ってください)。続いて「wp-content」をクリック。今度は「themes」をクリック。この中に子テーマのフォルダを作りますので、上方の「新規フォルダ作成(フォルダ型のボタン)」をクリック。

フォルダ名は何でも良いのですが、一般的には「親テーマ名ハイフンchild」が多いようです。入力したら「保存」をクリック。これで「themes」フォルダの中に今のフォルダが表示されます。

「style.css」ファイルを作成

「themes」フォルダの中に今のフォルダが表示されている「親テーマ名ハイフンchild」をクリック。このフォルダ内の上方の今度は「新規ファイル作成(ファイル型のボタン)」をクリック。

ファイル名のところに「style.css」と入力(カギカッコはいりません)。下方、ファイル内容を記述する枠内に、

/*
Template:Original
Theme Name:Original-child
*/

各項目については

Template:元のテーマ名
Theme Name:子テーマ名
を記述してください。これをしないと子テーマとして認識してくれないので誤字に注意してください。

「functions.php」ファイルを作成

こちらも子テーマフォルダ内にfunctions.phpを作成してください。
そして以下のコードをfunctions.php内に記述してください。

このコードを記述すると親テーマのstyle.cssも読み込むことができます。
子テーマの利用方法は親テーマのcssの改変がほとんどです。

なのでこのコードを記述しておくと変更したいcssのみを子テーマのstyle.cssに記述できるので非常に見やすいコードになります。

入力したら「保存」をクリック。

最後に子テーマを有効化します。

wordpress管理画面の「外観」から「テーマ」をクリック。そこに今作った「Original-child」というテーマが表示されているはずですので「有効化」をクリック。

以上です。