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

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

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

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

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

〈電子書籍/コミックの品揃え世界最大級〉【ebookjapan(イーブックジャパン)】

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のメンバー、及び契約ライターによる匿名寄稿を含みます。

関連する記事

ソースネクスト 4月のセール&クーポンまとめ ソフト、ツール、ユーティリティ各種割引&クーポン配布情報

ソースネクスト 4月のセール&クーポンまとめ ソフト、ツール、ユーティリティ各種割引&クーポン配布情報

ソースネクスト 11月のセール&クーポンまとめ ソフト、ツール、ユーティリティ各種割引&クーポン配布情報

ソースネクスト 11月のセール&クーポンまとめ ソフト、ツール、ユーティリティ各種割引&クーポン配布情報

ソースネクスト10月のPCソフトセールが開催中 Amazon『プライム感謝祭』でもセール開催【10月16日更新】

ソースネクスト10月のPCソフトセールが開催中 Amazon『プライム感謝祭』でもセール開催【10月16日更新】

自分のIPアドレスやユーザーエージェント、モニタ解像度 環境変数確認ツール 各種情報を数秒で計測

自分のIPアドレスやユーザーエージェント、モニタ解像度 環境変数確認ツール 各種情報を数秒で計測

可愛くて面白いカナヘイ氏の描くキャラクター ピスケ&うさぎ、小動物シリーズ…など 非公式人気投票も開催中

可愛くて面白いカナヘイ氏の描くキャラクター ピスケ&うさぎ、小動物シリーズ…など 非公式人気投票も開催中

SNSで大人気!『ちいかわ』登場キャラクターの魅力を紹介! 人気投票も開催中

SNSで大人気!『ちいかわ』登場キャラクターの魅力を紹介! 人気投票も開催中

『ナガノのくま』『もぐらコロッケ』『パグ』など、ナガノ氏の描くキャラクターとその魅力を紹介! 人気投票も開催中

『ナガノのくま』『もぐらコロッケ』『パグ』など、ナガノ氏の描くキャラクターとその魅力を紹介! 人気投票も開催中

LINEスタンプ『ヨッシースタンプ』のキャラクターとその魅力を紹介! 人気投票も開催中

LINEスタンプ『ヨッシースタンプ』のキャラクターとその魅力を紹介! 人気投票も開催中

LINEスタンプで人気の『うさまる』『うさこ』ほか、登場キャラクターまとめ! 人気投票も開催中

LINEスタンプで人気の『うさまる』『うさこ』ほか、登場キャラクターまとめ! 人気投票も開催中

鶴田謙二 直筆サイン入り複製原画2種が完全限定発売 『チャイナさん』の原画再販売も!

鶴田謙二 直筆サイン入り複製原画2種が完全限定発売 『チャイナさん』の原画再販売も!

11円で買えるKindleコミック セール情報まとめ 話題作、名作など全巻一気買いのチャンス

11円で買えるKindleコミック セール情報まとめ 話題作、名作など全巻一気買いのチャンス

WordPress広告管理プラグイン比較 アドセンス・アフィリエイト広告運用を効率化

WordPress広告管理プラグイン比較 アドセンス・アフィリエイト広告運用を効率化


page top