WooCommerceのテンプレート構造

WooCommerceはWordPressの開発元Automattic社が公開しているECサイト構築のプラグインで知名度はピカイチです。
ECサイトの機能、決済のセットアップや商品登録は当然重要なのですが、それ以前に基本的なテンプレート構造がつかめず、どうやって構築していくか難解なように思います。
この記事では、その点にフォーカスして解説したいと思います。

基本構成

ECとしての基本カート機能、銀行振り込みや代引きでの旧来の決済だけであれば、無料で使えます。
実際には、カード決済や定期購入などの支払い方法やそのほか機能拡張はそれなりのサブスクリプションで用意されているという、よくできたビジネスモデルでもあります（笑

インストール

とくに一般的なプラグインと変わりません。
インストール後はそのままセットアップウィザードでショップの基本情報、使用通貨や決済方法などを設定できますが、スキップして後程セットアップすることも可能です。
詳しい解説はここでは割愛します。

テーマ

わたしがインストールした際は同社のWooCommerce用テーマStoreFrontが同時にインストール可能でした。
見た目のデザイン的要素だけ整えるのであれば、こういったテーマを使うと楽そうです。
専用テーマも有償無償で多数存在しますが、汎用、つまり、自前テーマでも使えます。

サポート宣言

まず、functions.phpでWooCommerceの対応を宣言します。

<?php
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
  add_theme_support( 'woocommerce' );
}
;?>

これにより、表示の際のWooCommerce用各種テンプレートの割り当てやレビュー機能など、はじめてプラグインが正常に動作します。

正常に宣言できているかはWooCommerce/ステータス/システム状況→テーマで確認できます。

商品管理の投稿タイプ

商品管理はproductという名称のカスタム投稿で行われます。
入力項目は「カスタムフィールド」が使われており、WooCommerceの関数ではなくても、WordPressの標準関数のget_post_meta関数でも直接呼び出せそうです。
カテゴリ・タグも通常投稿とは独立したタクソノミー内の分類です。
商品個別ページ：single-product.php
カテゴリページ：taxonomy-product_cat.php
表示テンプレートは上記のようになりますが、当然、テーマフォルダではなく、プラグインフォルダであるwp-content/plugins/woocommerce/templates/から読み込まれます。

表示テンプレート

WooCommerce用のテーマでない場合は表示テンプレートを用意します。
自前テーマにおいても、サポート宣言がなされた時点で必要に応じて、プラグインのテンプレートが適用されるのですが、ほんとんどの場合、HTML構造が一致しません。
このため、HTML構造を合わせるために、woocommerce.phpを作成します、
この際には、アクティブテーマのpage.phpやsingle.phpをベースにします。
設置階層はテーマフォルダのルートでなければなりません。

<?php
/*
Template Name: woocommerce
*/
?>
<<?php get_header(); ?>
<div class="content">
  <article>
    <section>
      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h2><?php the_title(); ?></h2>
        <?php woocommerce_breadcrumb(); ?>
        <?php woocommerce_content(); ?>
      </div>
      <div class="clear"></div>
    </section>
  </article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

通常のWordPressループは必要ありませんので削除します。
テーマやプラグインの通常のテーマではパンくずは実装していると思いますが、WooCommerceとの整合性を取る必要があります。

ようはHTML構造をテーマと同一にして、通常ループではなく、WooCommerceの関数でコンテンツを読み込みます。

テンプレートのオーバーライド

上記のwoocommerce.phpは基本的にWooCommerceでの表示すべてを兼ねます。
表示には複数のテンプレートが使われており、例えば、商品ページのメインテンプレートはsingle-product.phpでさらに詳細情報の部分を表示しているのは、content-single-product.phpです。
woocommerce.phpが存在しない場合はプラグインフォルダのsingle-product.phpがメインのテンプレートとなりますが、同じく商品情報の表示はcontent-single-product.phpが使われています。

つまり、商品表示部分を自由に変更したければ、content-single-product.phpとそのテンプレート内の構造を理解してカスタマイズする必要があります。

このcontent-single-product.phpを認識するパスは次の箇所です。
1.本来のプラグインフォルダ内
wp-content/plugins/woocommerce/templates/content-single-product.php
2.テーマ内にwoocommerceフォルダを作って配置
wp-content/themes/アクティブテーマ/woocommerce/content-single-product.php
3.テーマ内に直接配置
wp-content/themes/アクティブテーマ/content-single-product.php
※すべて存在する場合は3>2>1という優先順位でオーバーライドされます。

1で直接編集してもプラグインのアップデートで上書きされてしまうため、カスタマイズでは2～3のようにテーマフォルダへ配置すべきでしょう。

実際に該当テンプレートのヘッダ部分にはオーバーライドしたい場合に設置するべくパスが記されています。

/**
* Product Loop Start
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.3.0
*/

使われているテンプレートを確認する

つまるところ、実際のコンテンツ表示にどのテンプレートが使用されているか把握しておくと柔軟にカスタマイズしやすいです。
少々、難解ですが、プラグイン「Confirm theme structure」では、これを確認することができます。

商品ページに使われているテンプレートの一覧で20個ものテンプレートがプラグインフォルダから読み込まれているのが確認できると思います。

こちらではプラグインフォルダではなく、テーマ内のsingle-product.phpテンプレートにオーバライドされているのが確認できます。

Confirm Theme Structure

これに出力されているセレクタなどを複数ファイルからGrep検索することで、ある程度、カスタマイズしていけるのではないでしょうか。
Windowsならサクラエディタなどが使えますね。

執筆:R3098

WEBサービス構築・監修が生業です。WordPress 関連では Aurora Heatmap などのプラグイン開発も行っています。サイト運営者の力になりたいと考えます。