Welcart商品詳細ページのテンプレートをsingle.phpと分ける方法

Welcartの商品詳細ページは「投稿記事」扱いなので、テンプレートはsingle.phpが軸です。

plugins内の専用テンプレートをthemesのテーマフォルダ内に複製すると自動で読み込まれます。

まだ優先順位はsingle.phpが先なので、single-blog.phpなどに名称変更しましょう。

商品詳細ページのテンプレートを分けたい

「Welcart」プラグインで作った商品説明ページは、通常のレイアウトと変えたいなって事ありますよね。

Welcartでは商品登録をすると、投稿ページ用テンプレート（single.php）をベースとして表示されます。

ですので直接カスタマイズしてしまうと、投稿記事も同時に変更されてしまいます。

専用テンプレートを準備して管理しやすくする

出力情報が「記事」なのか「商品情報」なのかで分岐させて表示するのがスマートでしょう。

しかしそれだと高度な操作が必要になり、カスタマイズ時の管理が複雑になってしまいます。

本記事では、簡単でできるだけ手間を掛けずに商品詳細ページ専用のテンプレートを作る方法をご紹介します。

※もちろん表示される情報自体をカスタマイズする事もできます。

商品詳細ページは投稿記事と同じ

商品情報ページは「記事」に分類される

商品詳細ページは基本的には、投稿記事と同じテンプレートが使われます。

その理由として、商品の情報編集ページ下部分にパーマリンクURLの表記があります。

デフォルトでは投稿記事の様な感じで、日付＋商品名の組み合わせでURLが構成される訳ですね。

※短縮URLを使う事もできます。

記事なのでsingle.phpを使って出力される

そのため通常の投稿記事と同様に、single.phpをベースとした出力がされる訳ですね。

つまり、中に記述されているheader.phpやfooter.phpなどの読込も同じになる訳です。

single.phpはブログや新着情報向けのテンプレート

ブログや新着情報での表示と、商品情報での表示は分けた方が良いと思います。

例えば商品詳細ページならヘッダーに他の商品リストを並べるなど、違うレイアウトにしたい場合がありますよね。

そこでsingle.phpと、商品詳細ページ専用のphpファイルを最初から分けておくのです。

そうすれば投稿記事の事を気にせずに、商品詳細ページ専用のレイアウトを構成できます。

オリジナルテンプレートを複製移動

前置きが長くなりましたがさっそく進めていきましょう。

実は商品情報のページテンプレートは、「plugins」内にsingle.phpとは別のオリジナルテンプレートが存在します。

※theme内ではありません。

plugins内：Welcartのテンプレートファイルを探す

Welcartプラグインをインストールした際は、pluginsフォルダの中に「usc-e-shop」という名前のディレクトリ構成ができます。

その中で以下のディレクトリを探しましょう。

この中に「wc_item_single.php」ファイルがあります。

このphpファイルが商品詳細ページの出力テンプレートです。

ダウンロードしてwc_templatesで包む

まずはこのphpファイルのみを、PC内にダウンロードしましょう。

次に新規に「wc_templates」フォルダを作成し、先ほどのwc_item_single.phpをその中に移動させます。

テーマテンプレート内にアップ

phpファイルが入ったwc_templatesフォルダを、使用中のテーマテンプレートディレクトリ内にアップロードしましょう。

テーマファイルの「img」や「css」フォルダと同列に、wc_templatesが並んだ状態です。

何故ファイルを複製移動させるのか

繰り返しますがこのwc_item_single.phpが、商品詳細情報を出力するテンプレートです。

ですので、元々の場所「usc-e-shop/theme/welcart_default/wc_templates/」のものを直接編集すれば、変更が反映がされます。

しかしその場合、welcartのバージョンアップなどが実施されると設定が消えてしまう場合があるのです。

その度にアップロードするのは面倒なため、別の場所に移動させている訳です。

移動させるだけで自動的に読み込まれる

現在のWelcartでは、今回複製したテンプレートも自動で読み込んでくれるようになっています。

特にfunctions.phpに追記する必要すらないので、非常に便利です。

優先順位はusc-e-shop内の元ファイルが先なのですが、そのあと複製したwc_templates内のwc_item_single.phpで上書きされます。

さらにいつでもplugins側の元ファイルを引き出せる利点もあります。

single.phpと同じ状態にする

次にwc_item_single.phpの中身を、一旦現在のsingle.phpと同じレイアウトにします。

その後wc_item_single.phpに対し専用のカスタマイズをしていけば良いのです。

single.phpの内容が入ったwc_item_single.phpを作る

まずはsingle.phpを複製して、wc_templatesの中に入れましょう。

次にwc_item_single.phpをリネーム（名前変更）します。「wc_item_single_old.php」などで良いでしょう。

wc_item_single_old.phpのソースを開いて、以下のエリアを丸ごとコピーします。

※あとからこのsingle.phpを、wc_item_single.phpに名前変更して使います。

コピーする範囲

<div class="storycontent"> から </div><!-- end of storycontent --> まで

ここが商品詳細に関する情報出力を担当する部分です。

single.php内のthe_content()部分へ張り付け

コピーした情報を、single.php内の<?php the_content(); ?>の記述がある箇所に貼り付けます。

「<?php」や「?>」の部分も消える様に、そっくりそのまま張り付けましょう。

編集したsingle.phpをwc_item_single.phpに変更

上記の変更をしたsingle.phpを、あらためて「wc_item_single.php」へリネームします。

このファイルを「themes/テーマ名/wc_templates/内」に上書きします。

※最終的に残ったwc_item_single_old.phpファイルは使いません。

これでwc_item_single.phpが、あらためて商品詳細専用のテンプレートになりました。

読込の優先順位について

これでWelcartの商品詳細ページのみレイアウトを変更するには、テーマ内のwc_templates/wc_item_single.phpを更新すれば良い事になります。

これで通常のsingle.phpとテンプレートを別にする事ができた訳ですが、まだ注意が必要です。

single.phpがまだ優先

このままだと商品詳細ページの読込優先は、依然としてsingle.phpが先です。

ですのでsingle.phpはブログや新着情報向けに、single-blog.phpやsingle-news.phpなどにリネームして活用しましょう。

そうすればwc_item_single.phpの優先順位が繰り上がって、読込対象となります。

single.phpを商品詳細ページ専用にする場合

今回はwc_templetes/wc_item_single.phpを別途用意して、single.phpとすみ分けした形です。

しかしあえてsingle.phpをWelcart商品詳細専用のテンプレートにしても良いのです。

先ほど説明した様に、ブログや新着情報ならsingle-blog.phpやsingle-news.phpを別途用意すればいい訳ですからね。

single.phpのthe_content();を書き換える

<div class="storycontent"> から </div><!-- end of storycontent --> まで

以上のソースを、利用テーマ内のsingle.phpに書いてあるthe_content();部分に差し替えましょう。

これでsingle.phpが直接、商品詳細ページの専用テンプレートになります。

カスタマイズする際も元ファイルに触らずに、single.phpを更新すればよい事になります。

一押し人気コーナー紹介