ダミー

【WooCommerce】自作テーマが参照するテンプレートは?

2020年4月2日

WordPressでECサイトが作れる無料プラグインWooCommerce。子テーマを自作したり、既存のテーマをWooCommerceに適用させる方も増えているようです。当記事ではWooCommerceの商品ページやカテゴリ一覧ページがどのテンプレートを参照するかについて解説します。

当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

WooCommerce対応テーマの作り方

WooCommerce対応テーマを自作する、または既存テーマをWooCommerce対応にする方法はWooCommerce公式のドキュメントで説明されています。
Third party / custom / non-WC theme compatibility(英語)
日本語でも多くの方が記事を書いてくださっています。「Woocommerce 自作テーマ」で検索すると日本語の記事がたくさんヒットします。
そこで紹介されている方法は大体以下のような手順です。

  1. page.phpをコピーしてwoocommerce.phpというテンプレートを作る
  2. woocommerce.phpを開き以下の記述を削除し、
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <?php endwhile; endif; ?>
    

    以下の1行を挿入する。

    <?php woocommerce_content(); ?>
    
  3. WooCommerceサポートを宣言する。
    具体的にはfunctions.phpに以下のコードを追加する。(add_actionとfunctionの上下が逆の場合もあります。)
    add_action( 'after_setup_theme', 'woocommerce_support' );
    function woocommerce_support() {
        add_theme_support( 'woocommerce' );
    }
    
  4. woocommerce.phpとfunctions.phpをテーマディレクトリにアップロードする。

以上で、あなたのテーマがWooCommerceのテーマになりました。

WooCommerceサポート宣言の確認方法

WooCommerceサポート宣言とは「このテーマはWooCommerceをサポートしています」という宣言です。管理画面の WooCommerce > ステータス から確認できます。ステータス画面のかなり下の方に「テーマ」という項目があります。
WooCommerceステータス

もし、現在のテーマがWooCommerceサポート宣言されていなければ赤字で「宣言されていません」と表示されます。
WooCommerceサポート宣言されていない

上記手順3のようにサポート宣言をすると以下のような表示になります。
WooCommerceサポート宣言されている

参照されるテンプレートを変えたい

以上ご紹介した手順をおこなうと、WooCommerceで作られるページはを商品一覧ページもカテゴリ一覧ページも商品詳細ページも、みんなwoocommerce.phpが参照されます。
そんなのイヤだ!私はどうしても商品一覧ページと商品詳細ページのテンプレートを分けたい!
という場合は、woocommerce.phpの代わりに、single-product.phpとarchive-product.phpを作成します。方法は上記手順の1と同じです。その後single-product.phpとarchive-product.phpをお好みに編集します。

WooCommerce関係テンプレートまとめ

本記事でご紹介した内容を表にまとめました。

ページ種類 URL woocommerce.phpがあるとき woocommerce.phpがないとき
ショップのトップページ https://yoursite/shop/ woocommerce.php archive-product.php
カテゴリ一覧ページ https://yoursite/product-category/カテゴリスラッグ/ woocommerce.php taxonomy-product_cat.php
archive-product.php
タグ一覧ページ https://yoursite/product-tag/タグスラッグ/ woocommerce.php taxonomy-product_tag.php
archive-product.php
商品詳細ページ https://yoursite/product/商品ID/ woocommerce.php single-product.php

※複数のテンプレートがある場合は上が優先されます。
※そのテンプレートが無い場合はplugins/woocommerce/template 内のテンプレートが参照されます。

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
Third party / custom / non-WC theme compatibility(英語)
WooCommerceのショップページを既存テーマでカスタマイズする最も簡単な方法

最近の記事

Business News