Welcartの使い方まとめ(WordPressで作るECサイト)

※この記事は2012年2月の記事です。2018年2月に一部情報を更新しています。

今回は最安値かつ汎用性の高いECサイトを構築できる、WordPressとWelcartによるECサイト構築方法をご紹介します。

純粋なECサイトを構築できるEC CUBEやZen Cartなどがありますが、Welcartの導入メリットはWordPressを通してカートを様々な種類のサイトに導入できる点ですね。

何かと情報が少なく調べ回っていたので
導入検討中の方や、同じような事に悩まれてる方のご参考になれば幸いです＾＾

下記は実際に導入したクライアント様サイトです。

Welcartとは

ショッピング機能をWordPress内に組み込むことのできる純国産のWordPressの専用プラグインです。
商用無料で利用でき、機能拡張のプラグイン(有償)で拡張可能です。

基本機能を知るには「Welcartの主な機能」をご覧ください。不足している機能については「拡張プラグイン」から探すことができます。

有償でホスティングやサポート対応もあります。

https://www.welcart.com/

目的

導入環境

他に悩んだショッピングカートシステム

Welcart導入前準備

レンタルサーバーを借りてから気づいたことですが、Welcartの対応SSL環境と、レンタルサーバの共有SSLで相性があるようです。

ロリポでは、Welcartの共有SSLはできないといった書き込みもあり焦りましたが‥結局ロリポの共有SSLで利用できました。後ほどご紹介しますね！

確認事項としては下記などがあります。

• スマホ専用サイトは自分でレイアウトを設計 (スマホでの購入は可能です)
• 携帯サイトは未対応。(※2012年1月時点 間もなく対応予定) – 参考URL
• 送料でサイズ/重量別指定が不可。(※2012年1月時点)
  地域と配送方法別単位で指定。サイズ差がある商品を扱う際には送料負担。
• クレジットカード決済は、ゼウス / ルミーズ / J-Payment / PayPalに対応。
• セールスをする際は%割引指定か、ポイント何倍いずれかを選択。
  特定のフォルダを指定し該当のみがセールスになる仕様です。
  ○%OFF表示不可。またセールスアイコン等の表示不可。

Welcartのインストール

WordPressに慣れている方はお馴染みの手順になります。

WordPressをサーバーにインストールしてある状態で
管理画面内 > プラグイン > 新規追加　よりwelcartと検索してインストール
もしくは公式サイトからダウンロード後、FTPより
wp-content > plugins 内に直接アップロードすれば完了ですね＾＾

共通設定

テンプレートをカスタマイズする前に、Welcart共通の初期設定をする必要があります。
サンプル商品を1,2点登録しておくと、カートの動作を確認しながら進められるため
少々面倒ですが最初に設定を行います。

Welcart公式サイトに書かれている通り、(→導入フロー)
「基本設定」
「配送設定」
「メール設定」
それぞれ情報を入力します。下記は補足です＾＾

基本設定

配送設定

メール設定

商品登録

商品と写真を関連付けるには新規商品追加に一通りの説明がありますが、商品登録が少し理解しずらいので、いくつか設定のポイントをまとめます。

WordPress上でブログを書く際に管理画面の「メディア」を使い画像を登録しますが‥、Welcartの商品画像でもこのメディアを毎度開いて商品画像を登録します。

「商品情報」と、「該当商品画像」は別途2段階で登録をする感じですね。

この際、商品情報と画像は別々登録のため、それぞれを紐付ける必要があります。

アップした写真(半角英数字)が「gm-001.jpg」とした場合、商品登録のほうの「商品コード」名に「gm-001」とするとやっと商品と写真が関連付けられます。

また該当商品のサブ写真も登録したいことも多いかと思います。
この際にもルールがあり、
メイン写真を「a00001.jpg」とした場合、
サブ写真は「a00001-01.jpg」「a-00001-02.jpg」と名称を登録すると関連付けられます。

配送方法が表示されていない場合

配送方法と送料については、「配送設定」で設定した項目が反映されます。
表示されていない場合には配送設定を確認します。

カテゴリーについて

またカテゴリーですが、Welcartの商品はWordPressデフォルトのループと一緒に扱われ処理されています。
その為WP内でブログを作り、商品販売をしようとすると‥カテゴリが混合になります。
クライアントワークでは商品登録の際にブログのカテゴリが一緒にあっても気持ち悪いので、今回制作の際に、

でそれぞれ分けることで、商品登録の際は商品カテゴリのみ表示されるようにしました。

カスタム投稿タイプとは？という方は分かりやすく解説されている高橋のりさんの紹介記事をご覧下さい。

テンプレートカスタマイズ

またWelcartをインストールすると、Welcartデフォルトのテーマがあります。

すると公式にあるような下記レイアウトになります。
公式ショップライブデモ

標準的なECサイトを作るならこのテンプレートをカスタマイズするのが良さげですが、WPの醍醐味、オリジナルデザインに適応するには通常テンプレのTwentyEleven(WPデフォルトテーマ)等を利用するほうがよさそうです。

Welcartのカートを他テーマに取り付ける

まず始めに、Welcartのデフォルトテーマ外でカートを導入するには、TwentyEleven等のテーマ内に、Welcartのカートテンプレートをコピーします。

「welcart_default」テーマを開き、「wc_templates」フォルダを丸ごとコピーします。

この中に一式「ログインページ」「カートページ」などが入っています。
横幅等相対で作られているので、レイアウト崩れもなくそのまま利用できるのは便利ですね＾＾

会員管理、商品購入ページを編集する際には下記該当テンプレを編集します。管理画面のテーマ編集からは操作できない為、変更の際にはローカルで修正をします。

オリジナルテーマに商品を表示する

次に基本的な導入方法として公式に下記のように紹介されています。
・既存のテーマを利用したショップの作り方　その1
・既存のテーマを利用したショップの作り方　その2
・既存のテーマを利用したショップの作り方　その3

要点としては、
通常のWordPressのループにWelcartの商品情報も混入してしまう為、商品だけのループを作ります。

投稿のカテゴリーを開くと「商品」「お勧め商品」などが登録されています。

カテゴリ名「商品」を開きURL名を見てみると・・

http://WPのURL/edit-tags.php?action=edit&taxonomy=category&tag_ID=11&post_type=post

となっていますので、商品だけの一覧を表示するには下記で取得できます。(トップページ表示例)

<?php query_posts('cat=11&status=post&orderby=date'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); usces_the_item(); ?>
<a href="<?php the_permalink() ?>"><?php usces_the_itemName(); ?></a>
<?php endwhile; else: ?>
商品が空です
<?php endif; ?>

上記は商品名だけのループを表示させています。

のようになりますね。

<?php usces_the_itemName(); ?>は見慣れないタグですが、
Welcartでは専用のタグが設けられているので値を取得するには専用タグを利用します。

専用タグには下記のものがあります。

その他、「買い物かごに商品が入っているかを判別」や「ログイン状態の判別」など
カスタマイズに便利な専用のループが用意されています。

場所がわかりづらいですが、ヘッダーのカスタマイズに書かれています。

またカテゴリ別一覧ページには「category.php」を、商品詳細ページには「wc_item_single.php」テンプレートを利用して表示させます。

カテゴリ別ページを作る

クライアントサイトのハンドメイド一覧(一覧ページ)、ヘアゴム(カテゴリ別)、お花ヘアゴム(サブカテゴリ別)などが該当します。

<?php if (is_category('11')) { //カテゴリトップ ?>
カテゴリ別トップのコンテンツを記述
<?php } elseif (is_category('12')) { //ヘアゴム ?>
ヘアゴムのコンテンツを記述
<?php } elseif (is_category('13')) { //お花ヘアゴム ?>
お花ヘアゴムのコンテンツを記述
<?php } ?>

のようにしてコンテンツを分岐します。その直下に

<ul class="goodsListUl cf">
<?php if (have_posts()) : while (have_posts()) : the_post(); usces_the_item(); ?>
<?php if (usces_have_skus()) : ?>
<li>
<dl>
<dt><a href="<?php the_permalink() ?>"><?php usces_the_itemImage(0, 212, 178 ); ?></a></dt>
<dd><p class="itemName"><a href="<?php the_permalink() ?>"><?php usces_the_itemName(); ?></a></p><p class="price"><span>&yen;<?php usces_the_firstPrice(); ?><?php usces_guid_tax(); ?></span><?php usces_the_itemZaiko(); ?></p></dd>
</dl>
</li>
<?php endif; ?>
<?php endwhile; else: ?>
商品は現在ございません。
<?php endif; ?>
</ul>

のように表示させています。

備考としては、それぞれの該当ループを表示させるため、例えばカテゴリトップでは分岐の中に

<?php query_posts('cat=11&posts_per_page=10&paged='.$paged); ?>

のように指定をしています。カテゴリ別では

<?php query_posts('cat=21&posts_per_page=1000'); ?>

のようにしてループを指定しています。
（query_postsとは→WordPressCodex: query posts)

その他本題とは逸れますが・・、例えばページ内の画像URLで

<img src="https://サイトURL/imgs/cont_itemtop_list_t_hairgom.gif">

これはカテゴリスラッグを取得することで、それぞれに該当の画像名を取得しています。

<img src="<?php echo home_url(); ?>/imgs/cont_itemtop_list_t_<?php $cat_info = get_category( $cat ); ?><?php echo wp_specialchars( $cat_info->slug ); ?>.gif" />

使える場所で利用すると分岐の数も減らせられそうですね！

もう１点、ECサイトではあちこちに商品写真を掲載しますよね、
WordPressのメディアで指定した３種類のサイズのサムネイルを自動で生成してくれますが、ブログ等でも利用する為、もっとバリエーションを増やしたいですよね。

そんな時に便利なプラグインが「Additional Image Sizes」(シロさんの紹介記事)
お好みのサイズでサムネイルを無数に出力できるのでオススメです。

商品詳細ページを作る

今回導入にあたり、通常商品ページと、オーダーページを作っています。
通常ページ：　お花ゴム／トリプル　(リンク切れの場合はこちらから)
オーダーページ：　オーダーメイドバッグ
分岐により、通常とオーダー商品のコンテンツを分けています。

<?php if (have_posts()) : the_post(); ?>
<?php usces_remove_filter(); ?>
<?php usces_the_item(); ?>
<?php if(usces_sku_num() === 1) : usces_have_skus(); //SKUコードが1つの場合 ?>
<?php if (is_single('3126')) { //SKUが1つ&オーダーの場合 ?>
オーダーのコンテンツ
<?php } else { //SKUが1つ&通常商品の場合 ?>
通常のコンテンツ
<?php } ?>
<?php elseif(usces_sku_num() > 1) : usces_have_skus(); //SKUコードが複数の場合 ?>
<?php if (is_single('3126')) { //SKUが複数&通常商品の場合 ?>
オーダーのコンテンツ
<?php } else { //SKUが複数&通常商品の場合 ?>
通常のコンテンツ
<?php } ?>
<?php endif; //SKUコードの分岐終わり ?>
<?php endif; ?>

商品ループの中に、SKUが1つの場合、複数の場合で分岐をしています。
その中に、特定の投稿(この場合はオーダー)があるか否かで分岐をしています。
あとは必要に応じてタグ等を入れれば詳細ページの完成ですね！

SKUについてですが、ECサイトに慣れていないと聞きなれない言葉ですね‥。
SKUとは、「在庫管理を行う場合の最小の分類単位。最小在庫管理単位のこと。」だそうです。出典

このSKUですが、管理画面で新規商品登録の際に登録をした「SKU価格」が１つだけの場合、複数登録のいずれかで、上記のように分岐を行うことができます。

出力がおかしくなる場合、上記の分岐の中身が正しく記述されていない可能性があります。

SSLを利用する

データの盗用や改ざん防止の為、ECサイトとしては必要不可欠なSSLですが、WelcartでもSSLを利用することができます。

SSLを利用するには、「システム設定」から
・Use SSLにチェック
・WordPress のアドレス (SSL)
・ブログのアドレス (SSL)
をそれぞれチェック、入力します。

以下は導入したロリポップでの設定方法です。

環境としてロリポのサブドメイン取得後、独自ドメインを取得してロリポに設定済みの状態です。
ロリポップのユーザー専用ページにログインをし、下記SSLのURLを確認します。

※画像はサンプルです。
この場合は、https://lolipop.sample-ssl-lolipop.jp/を控えます。
WPの「システム設定」から下記のように入力。

この際「一般設定」のアドレスには下記のように独自ドメインを入力してあります。

次に「パーマリンク」設定ですが、「デフォルト」でSSLが動くことを確認します。
ここで動かない場合はプラグインが悪さをしている可能性がありそうです、
（入れすぎて）忘れてしまいましたが、ぶつかることを確認してます。

パーマリンク構造が特定の構造下ではSSLがどうやら動かないようです。
「/%category%/%postname%/」等では動きませんでした。

/site/%postname%/%post_id%/

妥協して上記が無事動作しているURL構造になります＾＾；
パーマリンク系をリダイレクトして変更するプラグインを入れると、SSLページはエラーが起きていました。

SSLは動くものの、ブラウザでエラーが出る場合にはおまじないがサイトに紹介されています。
・SSLセキュリティー警告をつぶす @2011年6月9日
・SSL でエラーを出さないおまじない @2010年10月16日

利用しての感想

WordPressのメリットを十分に活かして、EC機能を取り込めるので大変便利でした。

専用プラグインなのでWordPressに最適化する必要もないので、すぐに動作させることができるのは楽ですね。
デザイン自体のカスタマイズ性は高く、商品の表示場所や、表示内容は自由にコントロールできます。

一部、不自由な箇所としては商品詳細ページで商品にオプションをつける場合には自動で出力されるので例えば画像を入れたい・注釈を入れたい場合には枠外でないと記述できません。

また価格の割引周りも、APIと比べると表示方法に制限があり、不便さはあります。

ですが、無償ということ、国産ということ、一通りECとしての機能を備えているので安心して導入は出来るかと思います。

近々携帯プラグインも販売されるようなので、これはEC運営としては大きいと思います。
困ったことがあれば、開発フォーラムで質問するとよさそうですね＾＾

長々となりましたがご参考までに！

WordPress | 日本語
Welcart公式サイト
ハンドメイド販売のspoooon(スプーン)公式通販サイト

最後までお読み頂きありがとうございます！