HOME  /Welcart
2020年11月10日

WelcartはWordPressを使った無償のe-Commerceシステムです。

ここでは「Welcart_Basic」という無償のテンプレートを使って

①カスタマイズ無しで、どこまでできるのか?

②カスタマイズすると、何処までできるのか?

を解説していきます。

 

1.Welcartをカスタマイズ無しで利用する方法

1.Welcartのインストール

ここでは「Welcartのインストール」と「無償テンプレート(Welcart_Basic)」の入手方法について解説しています。

 Welcartのインストールと利用テーマ

 

2.商品登録の前に

ここではWelcartで商品登録を行う前にやる事

①Welcart Shop設定

②商品カテゴリの登録

を解説しています。

 商品登録の前に行う事

 

3.商品画像について

ここではWelcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

 商品画像の準備とメディアへの登録方法

 

4.商品の登録

ここでは、具体的な商品登録項目の解説をしています。

 商品の登録

 

5.サイトの体裁を整える

①体裁を整える

Welcart_Basicの「メニュ」、「ウィジェット」及び「トップ画像」を設定する事によりサイトの体裁を整えます。

 Welcart_Basicサイトの体裁を整える

 

②商品オプション、カスタムフィールド

Welcart_Basicの個別商品ページに「商品オプション」や「カスタムフィールド」を追加する事ができます。

 商品オプション、カスタムフィールドの使い方

 

以上で下記の様なサンプルサイトが完成しました。

サンプルサイトWelcart Basicの機能だけのサンプルサイト

しかし、デフォルトで作成できるのはこれが限界です。

これ以降は本格的にWelcart_Basicをカスタマイズする方法を解説していきます。

 

2.Welcart_Basicの子テーマの作成と基本構造を知る

Welcart_Basicをカスタマイズする為にはまずは構造を理解する所から始まります。

1.子テーマの作成

まず始めは「Welcart_Basic」の子テーマを作成します。

 Welcart_Basicの子テーマを作成する

 

2.投稿ページの構造と検索機能制限

Welcartは投稿ページで「商品」や「ブログ」を管理する仕組みになっています。

また独自の検索機能が「functions.php」に記述されており、商品しか検索できない仕様になっています。
本稿ではこれらの構造がどの様になっているか?を解説しています。

 投稿ページの構造と検索機能制限

 

3.ホームページ、固定ページの構造とお問い合わせページ

WelcartはEC固有の固定ページが事前に作成されています。
本稿ではページ構造がどの様になっているか?またこれらのページを判断する関数について解説しています。

 ホーム、カート、メンバ、お問い合わせページ

 

4.Welcartのファンクション構造とホームページの商品表示設定

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

 ファンクション構造とホームページの商品表示設定

 

5.Welcartで利用している関数と注意事項

このサイトで利用しているWelcart関数、環境情報の取得方法及びIDに関する制限を解説しています。

 Welcartで利用している関数と注意事項

 

3.カスタマイズを行う前に準備する事

1.制限の解除を必要関数の作成

ここでは下記の事を行っています。

①検索機能の制限を解除する

②総ての「Font Awesome」アイコンフォントを利用可能にする

③カテゴリが製品か否かの判断関数の作成

④最上位カテゴリの取得関数の作成

⑤商品カテゴリの取得関数の作成

 Welcart_basicの制限解除と必要な関数の作成

 

2.カテゴリ表示プログラムのカスタマイズ

カテゴリ表示は「商品」と「ブログ」等を表示するプログラムになっていますが、ウィジェットは「サイドバー1(商品用)」が表示されるスペックになっています。

これをカテゴリに応じたウィジェットを表示できる様にカスタマイズします。

またこのカスタマイズにより「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の「検索フォーム」がどの様に設計されているのか?を確認します。

 検索BOXの仕組みとは?

検索をカテゴリに応じた検索ができる様にカスタマイズします。

 検索BOXをカテゴリ別に検索できる様にする

 

②会員システム

Welcart_basicの「会員システム」がどの様に設計されているか?を確認します。

 会員システムの仕組みとは?

会員システムに保有ポイントを表示する様にカスタマイズします。

 会員メニュに保有ポイントを表示させる

 

③カートボタン

Welcart_basicの「カートボタン」がどの様に設計されているか?を確認します。

 カートボタンの仕組みとは?

カートボタンの色と表示文字を変更できる様にカスタマイズします。

 カートボタンの色と表示文字を変更可能にします

 

④メニュ

Welcart_Basicの「メニュ」がどの様に設計されているのか?を確認します。

 メニュの仕組みとは?

今の段階では、メニュのカスタマイズは行っていません。

 

⑤ヘッダ画像

ここでは「カスタマイズ→ヘッダ画像」で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

 ヘッダー画像を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の商品詳細画面には何ポイントが追加されるのか?の表示がありません。

そこでこれを表示する関数を追加します。

 商品詳細画面に獲得ポイントや値引き金額を表示させる

 

5.カートへの追加ボタン

Welcartのカート投入ボタンの仕組みと、ボタンの色変更を可能にする方法を解説しています

 カートへの追加ボタンをカスタマイズします

 

skuを1つだけ表示する改造(foreach編)

Welcart_basicテーマは、SKUが複数あると縦にダラダラと長く表示される問題点があります。

そこでSKUを分解し、どのSKUを表示するのか?をラジオボタンやセレクトBOXで選択できる様にカスタマイズします。

 商品個別ページで表示するSKUを1つだけにする方法

 

以下の関数は「SKUを1つだけ表示する」関数の中で使われている関数です。

 foreachループの中で利用できる業務パック割引を作成する

 foreachループの中で使える、SKU価格の表示

 foreachループの中で使える、獲得ポイントや値引き情報を表示

 foreachループの中で使える、カウンタ形式の購入数量入力

 foreachループの中で使える、カートへの投入ボタン

 

7.カートのカスタマイズ

1.カートの中の業務パック割引マーク

カート内に表示される業務パックの割引マークとメッセージを変更します。

 カートの中の業務パックマークの変更

 

2.カートの中の商品名

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードが商品名として登録されます。これをカスタマイズする方法を解説します。

 カートの中の商品名をカスタマイズします