WelcartはWordPressを使った無償のe-Commerceシステムです。
ここでは「Welcart_Basic」という無償のテンプレートを使って
①カスタマイズ無しで、どこまでできるのか？
②カスタマイズすると、何処までできるのか？
を解説していきます。
1.Welcartをカスタマイズ無しで利用する方法
1.Welcartのインストール
ここでは「Welcartのインストール」と「無償テンプレート（Welcart_Basic）」の入手方法について解説しています。
2.商品登録の前に
ここではWelcartで商品登録を行う前にやる事
①Welcart Shop設定
②商品カテゴリの登録
を解説しています。
3.商品画像について
ここではWelcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。
4.商品の登録
ここでは、具体的な商品登録項目の解説をしています。
5.サイトの体裁を整える
①体裁を整える
Welcart_Basicの「メニュ」、「ウィジェット」及び「トップ画像」を設定する事によりサイトの体裁を整えます。
②商品オプション、カスタムフィールド
Welcart_Basicの個別商品ページに「商品オプション」や「カスタムフィールド」を追加する事ができます。
以上で下記の様なサンプルサイトが完成しました。
サンプルサイトWelcart Basicの機能だけのサンプルサイト
しかし、デフォルトで作成できるのはこれが限界です。
これ以降は本格的にWelcart_Basicをカスタマイズする方法を解説していきます。
2.Welcart_Basicの子テーマの作成と基本構造を知る
Welcart_Basicをカスタマイズする為にはまずは構造を理解する所から始まります。
1.子テーマの作成
まず始めは「Welcart_Basic」の子テーマを作成します。
2.投稿ページの構造と検索機能制限
Welcartは投稿ページで「商品」や「ブログ」を管理する仕組みになっています。
また独自の検索機能が「functions.php」に記述されており、商品しか検索できない仕様になっています。
本稿ではこれらの構造がどの様になっているか？を解説しています。
3.ホームページ、固定ページの構造とお問い合わせページ
WelcartはEC固有の固定ページが事前に作成されています。
本稿ではページ構造がどの様になっているか？またこれらのページを判断する関数について解説しています。
4.Welcartのファンクション構造とホームページの商品表示設定
Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。
5.Welcartで利用している関数と注意事項
このサイトで利用しているWelcart関数、環境情報の取得方法及びIDに関する制限を解説しています。
3.カスタマイズを行う前に準備する事
1.制限の解除を必要関数の作成
ここでは下記の事を行っています。
①検索機能の制限を解除する
②総ての「Font Awesome」アイコンフォントを利用可能にする
③カテゴリが製品か否かの判断関数の作成
④最上位カテゴリの取得関数の作成
⑤商品カテゴリの取得関数の作成
2.カテゴリ表示プログラムのカスタマイズ
カテゴリ表示は「商品」と「ブログ」等を表示するプログラムになっていますが、ウィジェットは「サイドバー１(商品用)」が表示されるスペックになっています。
これをカテゴリに応じたウィジェットを表示できる様にカスタマイズします。
またこのカスタマイズにより「welcart_basic」がどの様な作りになっているのか？も理解する事ができます。
Welcart_basicのcategory.phpのカスタマイズ
3.スライダプラグインの導入
Welcart_Basicにはスライダ機能はバンドルされていません。よってスライダ機能で有名な「slick.js」を利用していきます。
ここでは「slick.js」の導入から用意されているオプションを解説しています
Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方
4.商品リストの並び順
Welcartの基本構造では、抽出した商品を価格順に表示させる事ができません。
そこでWelcartが持っている価格情報をWordPressのカスタムフィールドにも書き込むことにより価格順に並び替えることができる様に変更します。
4.ヘッダ部分のカスタマイズ
ここでは「header.php」に表示する部品に関するカスタマイズ方法を解説します。
①検索BOX
Welcart_basicの「検索フォーム」がどの様に設計されているのか？を確認します。
検索をカテゴリに応じた検索ができる様にカスタマイズします。
②会員システム
Welcart_basicの「会員システム」がどの様に設計されているか？を確認します。
会員システムに保有ポイントを表示する様にカスタマイズします。
③カートボタン
Welcart_basicの「カートボタン」がどの様に設計されているか？を確認します。
カートボタンの色と表示文字を変更できる様にカスタマイズします。
④メニュ
Welcart_Basicの「メニュ」がどの様に設計されているのか？を確認します。
今の段階では、メニュのカスタマイズは行っていません。
⑤ヘッダ画像
ここでは「カスタマイズ→ヘッダ画像」で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。
5.フロントページのカスタマイズ
ここでは「front-page.php」や固定ページに使われる部品を作成します。
Welcart_basicでは商品リストの表示関数は提供されていませんので商品リストを表示する関数を作成しました。
①カテゴリを指定した商品リスト
商品カテゴリを指定して商品リストを表示する関数
「全商品」、「おすすめ商品」、「新製品」及び「商品カテゴリ」の商品リスト表示が対象です。
②売上順の商品リスト
売れている商品（金額でなく個数）順に商品リストを表示する関数
③キャンペーン対象商品リスト
現在、キャンペーン中の商品を表示する関数
6.個別商品画面のカスタマイズ
ここでは個別商品を表示する「wc_item_single.php」に使われる部品や画面のカスタマイズについて解説していきます。
1.商品マスターへのリンク
Welcartで個別商品画面から商品マスタにジャンプする事ができるとコンテンツ作成が飛躍的に楽になります。しかしWelcartではこの関数がサポートされていません。
そこでこれが可能になる関数を作成します。
2.関連商品リスト
Welcart_basicでは関連商品の概念はありません。
そこで表示している商品と同じカテゴリの商品を関連商品として表示させる関数を作成します
3.商品画像のスライド表示
ここでは商品画像を「slick」でスライド表示させる方法を解説しています。
skuデータ表示の不具合の改善(While編)
下記関数は「while(usces_have_skus())」ループの中でSKU関連の不具合を修正する関数です。
1.オプション表示
Welcartでは熨斗の有無や包装の有無等の商品を購入する上での、条件等を指定するオプション機能があります。
しかしこのオプション機能には幾つかの問題点があり、これらを改善する方法を解説しています。
2.業務パック割引
Welcartでは業務パック割引(購入数量割引)という機能があります。
これは指定した数量以上を購入した場合、価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。
業務パック割引(itemGpExp)メッセージの不具合を改善する
3.購入数量
Welcart_Basicの購入数量は数値入力です。
しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様にします。
4.獲得ポイントや値引き金額の表示
WelCartにはポイントを利用する仕掛けがありますが、Welcart_Basicの商品詳細画面には何ポイントが追加されるのか？の表示がありません。
そこでこれを表示する関数を追加します。
５.カートへの追加ボタン
Welcartのカート投入ボタンの仕組みと、ボタンの色変更を可能にする方法を解説しています
skuを１つだけ表示する改造(foreach編)
Welcart_basicテーマは、SKUが複数あると縦にダラダラと長く表示される問題点があります。
そこでSKUを分解し、どのSKUを表示するのか？をラジオボタンやセレクトBOXで選択できる様にカスタマイズします。
以下の関数は「SKUを1つだけ表示する」関数の中で使われている関数です。
foreachループの中で利用できる業務パック割引を作成する
foreachループの中で使える、獲得ポイントや値引き情報を表示
foreachループの中で使える、カウンタ形式の購入数量入力
7.カートのカスタマイズ
1.カートの中の業務パック割引マーク
カート内に表示される業務パックの割引マークとメッセージを変更します。
2.カートの中の商品名
カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードが商品名として登録されます。これをカスタマイズする方法を解説します。
8.その他情報
1.カートへの投入ボタン
カートへの投入ボタンには商品詳細ページに表示するカートボタン以外に、商品一覧ページからカートに投入できる「usces_direct_intoCart」という機能もあります。
「usces_direct_intoCart」の使い方と問題点
2.カート情報の強制削除