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