WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業 WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業 UZUREA編集部 公開:2022年8月27日(2年前) / 更新:2022年9月1日 コメント 0件 Web技術ECphpWooCommerceWordPressショッピングプラグイン SNS X Facebook B! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 当記事では、WordPress用のショッピングシステム構築用プラグインである『WooCommerce』の初期導入で必要な関連ページのカスタマイズをするための準備作業について解説しています。 WordPressの基本機能を理解している人向けの記事ですので、WooCommerceのインストール方法や、FTPの設定など基本的な部分は割愛しています。あらかじめご了承ください。 記事の索引1 WPプラグイン『WooCommerce』各ページデザインをカスタマイズするために必要な記述と作業1.1 元となるテーマファイルをプラグインからコピーする1.2 製品ページと製品アーカイブページは……1.3 固定ページ系は?2 まとめと、関連リンク 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に関連したカート画面やアカウントページは、テーマ内のテーマファイルのカスタマイズが反映されるようになります。 ※/wp-content/plugins/woocommerce/ 内のファイルを直接更新しても反映はされますが、WooCommerce自体のアップデートでリセットされてしまうので上記の方法が良いでしょう。 正しくアップロードされると、[WooCommerce] > [ステータス] > [テーマ] の [テンプレート] 欄に上書きされるテンプレートファイル一覧が表示されるようになります。 [WooCommerce] > [ステータス] > [テーマ] の [テンプレート] テンプレートの更新と変更 公式ドキュメント 『Fixing Outdated WooCommerce Templates』 製品ページと製品アーカイブページは…… 上記の方法だと、製品の詳細ページと製品アーカイブ(カテゴリページなど)は、カスタマイズできません。 single-product.phparchive-product.php でというファイルがあるのでこれで出来そうなものですが、この場合はテーマディレクトリにアップロードした woocommerce.php を除去し、各処理別のコードをsingle-product.php、archive-product.php に記述していくという形になります。 固定ページ系は? なお、WooCommerceのトップ、プライバシーポリシー、返品ポリシーといったWooCommerceのインストールと共に自動生成される固定ページ系は、通常の固定ページ用テーマファイルのルールが適用されます。 例) 『プライバシーポリシー』ページのスラッグが『privacy-policy』であれば 『page-privacy-policy.php』 まとめと、関連リンク WordPressで構築したサイトへECシステムを導入するのであれば、選択肢のひとつとしてWooCommerceをおすすめします。 沢山の人達によって日本語化や日本でのショップ運用に最適化できる追加プラグインなども提供されています。 また、英語のものも含めれば、開発&カスタマイズドキュメントも非常に豊富です。 過去にはいろいろなオープンソース系ECシステムがありましたが、いずれもコミュニティの衰退により開発が止まってしまったり、実態は特定企業の独断で開発されていたり、アップデートのタイミングで追加費用が必要だったりと、結局不便なものになっていくことが多い印象です。 そういった面でも2011年から開発が続き、WordPressというプラットフォームのプラグインとして開発が続くWooCommerceを選択するメリットは大きいと思います。 WooCommerce 公式サイト(English)WooCommerce WordPress公式プラグインディレクトリWooCommerce 日本環境最適化 追加プラグイン『Japanized For WooCommerce』 WordPress公式プラグインディレクトリ職人工房 (WooCommerce用決済プラグインなどを開発・提供) WordPress 本格Webサイト構築パーフェクトマスター [第2版] (Perfect Master 185) ¥220 (2024/11/21 22:57:35時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す WordPress はじめてのデザイン&カスタマイズ入門 ブログ・サイトの改善方法がわかる ¥2,838 (2024/11/21 22:57:34時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す