ショップサイトを作成するために必要になる、子テーマを作ってみましょう。
子テーマディレクトリ作成
既存のテーマをカスタマイズするための子テーマも、 通常のテーマと同じくWordPressのテーマディレクトリ内に配置します。
早速、新規フォルダを作ってみましょう。 分かりやすいようにフォルダ名は「storefront-child」にします。
フォルダを作成したら、中に ・style.css ・functions.php の２ファイルを新規に作成してください。 この時点ではどちらも空のファイルです。
style.cssを設定する
作成したstyle.cssに「このテーマはstorefrontの子テーマである」という情報を記述します。 WordPressに子テーマと認識してもらうために必要な記述は下記２項目です。
/*
Theme Name: 子テーマの名前
Template: 親テーマの名前
*/
①Theme Name 子テーマの名前を入れます。 任意で設定できますが、分かりやすいようにテーマディレクトリ名や「テーマ名 Child」などに設定することが多いです。
② Template 親テーマのフォルダ名を入力します。 スペルミスがあると認識しません。
style.cssに書いてみましょう。 入力したら上書き保存してください。
子テーマを有効化してみよう
では、作成したフォルダが子テーマとして認識されているか確認してみましょう。
Wordpress、サイトネットワーク管理の管理画面にログインします。 左メニューから インストールされているテーマ のページを開いてください。
作成したStorefront Childが表示されています。 「サイトネットワークで有効化」をクリックしてテーマを有効化してください。
上図のようにStorefront自体も有効化されていない場合は、 こちらもサイトネットワークで有効に設定しておきます。
次に、ショップサイトの管理画面に移動します。 外観 > テーマの画面を開いて下さい。
Storefront Childを有効化します。
これで管理画面での操作は終わりです。 管理バーの「サイトを表示」から、サイトの見え方を確認してみましょう。
cssも何も設定していないので、今まで通りの表示ですね。
子テーマのstyle.cssが効いているかどうか試してみましょう。 bodyに背景色を指定してみます。
ストアページをリロードします。
style.cssの設定が反映されました。
これで子テーマディレクトリの作成は完了です。 子テーマディレクトリ（storefront-child）のstyle.cssに記述を加えることで、ショップサイトの見た目を変更していくことが可能になりました。変更したいテンプレートファイルを子テーマディレクトリ内に加えることで上書きも可能ですよ。