テーマをカスタマイズして、ショップページにオリジナル感を加えていきます。
WooCommerceテーマについて
ポートフォリオサイト課題ではWordPressタグを書いてオリジナルのテーマを作成しました。この方法のレベルアップ版としてWooCommerce用のテーマを作ることも出来なくはありませんが、難易度が相当に上がります。
ショップ機能を正常に動かすためにはphpの知識も必要となりますし、 WooCommerceでは使用しているテンプレートの数も桁違いに多いのです。
プラグインフォルダ内にあるWooCommerceフォルダを見てみましょう。 この中のフォルダにも、テンプレートとして利用されるphpファイルがそれぞれ入っています。すごい量ですよね。
WooCommerce用のテーマを使用していても、ブログなどWordpressに元々備わっている機能はすべて使えます。ショップサイト側の管理画面やフロントページを見てお察しの方もいらっしゃることでしょう。
今回、WordPressをマルチサイト化してショップサイト・ポートフォリオサイトの２構成にしたのは、こうしたテーマファイルを全て作成せずに必要箇所だけ変更できるようにするためでもあります。 分けた方が、商品管理や発送などショップの運営・管理も楽ですしね。
Storefrontについて
WooCommerceのインストール時にセットで導入し、現在ショップサイトに適用されているテーマは「Storefront」というものです。
Wordpressテーマの公式ページでは下記のように紹介されています。
Storefront は WooCommerce サイト作成にぴったりのテーマです。 WooCommerce のコア開発者がデザインし開発しています。販売されている WooCommerce プラグインと統合しやすくなっています。
「Storefront」のテンプレート構成は、上で触れたWooCommerce（プラグイン）で用意されているテンプレートファイルを再構成・アレンジしたような形となっています。
今回の制作ではこの「Storefront」テーマを、WordPressの子テーマという機能を使って、変更したい箇所のみ上書きする方法でカスタマイズしていきます。
子テーマとは
子テーマは親テーマ（既存のテーマ）を必要箇所のみ上書きすることが出来るテーマの事を指します。レンタルブログなどで“デザインスキン”と呼ばれている機能のイメージに近いです。
子テーマに最低限必要なファイルはstyle.cssとfunctions.phpの２つ。 他にheader.phpなど変更したいファイルがある場合は加えます。
基本的には子テーマのフォルダ内にあるコードの方が優先されます。 親テーマの構成を基盤にして、子テーマで設定した箇所が上書きされる形です。
子テーマを使用する場合、style.cssとfunctions.phpの２ファイルのみ親テーマ・子テーマ両方のファイルが読み込まれます。それ以外のテンプレートファイルは子テーマに入っているファイルのみが読み込まれる仕組みになっています。
子テーマを作る理由
既存のテーマをエディターで直接編集することも出来ます。
それをせずに「子テーマ」という形で別フォルダを作成するのには理由があります。 Wordpress Codexでは子テーマの利点として代表的な３点が紹介されています。
- テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
- 子テーマを使用することで開発時間を短縮できます。
- 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
今回カスタマイズするWooCommerce - storefront のテーマでは、
<?php do_action( 'storefront_content_top' ); ?>
などアクションフックと呼ばれる方法が大量に使われています。
こうした書き方に慣れるためにも、まずは子テーマを使ったカスタマイズから行ってみましょう。次回はstorefrontの子テーマの作成方法を紹介します。