WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業
WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業

WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事では、WordPress用のショッピングシステム構築用プラグインである『WooCommerce』の初期導入で必要な関連ページのカスタマイズをするための準備作業について解説しています。

WordPressの基本機能を理解している人向けの記事ですので、WooCommerceのインストール方法や、FTPの設定など基本的な部分は割愛しています。あらかじめご了承ください。

WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業

まず一番最初に行うべきで重要な作業は、有効なテーマディレクトリのfunctions.phpに下記を記載する事。

//WooCommerce サポートを宣言
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
	add_theme_support( 'woocommerce' );
}

上記記述を追記したらサーバーにアップロードすればOK。 正しく動作していれば、管理画面の[WooCommerce] > [ステータス] > [テーマ] の [WooCommerceサポート]欄ににグリーンのチェックが付いているハズです。

[WooCommerceサポート] にチェックが付いていればOK

これにより、使用しているテーマディレクトリに保存したテーマファイルを元に、WooCommerceの各ページを表示させられるようになります。

元となるテーマファイルをプラグインからコピーする

各ファイルはサーバー上のPluginディレクトリ内のWooCommerceからコピーして、テーマフォルダにアップロードしましょう。 具体的には、

  • /wp-content/plugins/woocommerce/ 内の……
    • woocommerce.php
    • /templates ディレクトリ一式

を、ダウンロードするなどして、使用しているテーマディレクトリにアップロードすればOK。

例)アップロード先の例

  • /wp-content/themes/テーマ名/ 内に……
    • /wp-content/themes/テーマ名/woocommerce.php
    • /wp-content/themes/テーマ名/templates/

をアップロード

参考:WooCommerce 6.8.2 のテーマファイル構成成
参考:WooCommerce 6.8.2 の
テーマファイル構成

これによりWooCommerceに関連したカート画面やアカウントページは、テーマ内のテーマファイルのカスタマイズが反映されるようになります。

※/wp-content/plugins/woocommerce/ 内のファイルを直接更新しても反映はされますが、WooCommerce自体のアップデートでリセットされてしまうので上記の方法が良いでしょう。

正しくアップロードされると、[WooCommerce] > [ステータス] > [テーマ] の [テンプレート] 欄に上書きされるテンプレートファイル一覧が表示されるようになります。

[WooCommerce] > [ステータス] > [テーマ] の [テンプレート]
[WooCommerce] > [ステータス] > [テーマ] の [テンプレート]

製品ページと製品アーカイブページは……

上記の方法だと、製品の詳細ページと製品アーカイブ(カテゴリページなど)は、カスタマイズできません。

  • single-product.php
  • archive-product.php

でというファイルがあるのでこれで出来そうなものですが、この場合はテーマディレクトリにアップロードした woocommerce.php を除去し、各処理別のコードをsingle-product.phparchive-product.php に記述していくという形になります。

固定ページ系は?

なお、WooCommerceのトップ、プライバシーポリシー、返品ポリシーといったWooCommerceのインストールと共に自動生成される固定ページ系は、通常の固定ページ用テーマファイルのルールが適用されます。

例) 『プライバシーポリシー』ページのスラッグが『privacy-policy』であれば 『page-privacy-policy.php』

まとめと、関連リンク

WordPressで構築したサイトへECシステムを導入するのであれば、選択肢のひとつとしてWooCommerceをおすすめします。 沢山の人達によって日本語化や日本でのショップ運用に最適化できる追加プラグインなども提供されています。 また、英語のものも含めれば、開発&カスタマイズドキュメントも非常に豊富です。

過去にはいろいろなオープンソース系ECシステムがありましたが、いずれもコミュニティの衰退により開発が止まってしまったり、実態は特定企業の独断で開発されていたり、アップデートのタイミングで追加費用が必要だったりと、結局不便なものになっていくことが多い印象です。

そういった面でも2011年から開発が続き、WordPressというプラットフォームのプラグインとして開発が続くWooCommerceを選択するメリットは大きいと思います。

WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。 webデザイン会社altstackのメンバー、及び契約ライターによる匿名寄稿を含みます。


page top