HOME  /Welcart
2020年08月14日

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

また利用しているテンプレートは「Welcart_Basic」という無償のテンプレートを使っています。

このテンプレートを利用して、

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

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

を解説していきます。

 

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

1-1.Welcartのインストール

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

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

 

1-2.商品登録の前の準備

ここではWelcartで商品登録を行う前にやらなければならない下記項目を解説しています。

■Welcart Shop設定

■商品カテゴリの登録

 商品登録の前に行う事

 

1-3.商品画像について

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

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

 

1-4.商品の登録

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

 商品の登録

 

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

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

 Welcart_Basicサイトの体裁を整える

 

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

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

このサンプルサイトの商品画像の著作権について

このサンプルサイトではトヨタの車画像を利用させて頂いています。

トヨタのサイトの著作権情報は下記になります。

https://global.toyota/jp/terms-of-use/

この中で「当ウェブサイトのコンテンツのご利用は個人使用(非商用)のみに限ります。」の表現があるので、使わせて頂きました。

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

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

 

2.Welcartのカスタマイズして利用する方法

これからは下記URLのWelcartをカスタマイズしていきます。

Welcart Basicをカスタマイズしたサンプルサイト

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

1-1.子テーマの作成

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

 Welcart_Basicの子テーマを作成する

 

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

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

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

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

 

1-3.Welcartのホームページ、固定ページの構造と判断関数

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

 Welcartのホームページ、固定ページの構造と判断関数

 

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

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

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

 

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

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

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

 

2.スライダ機能の追加

Welcart_Basic」にはスライダ機能はバンドルされていません。

そこでスライダ機能で有名な「slick.js」を利用していきます。

2-1.「slick.js」の導入

カスタマイズサイトではスライダー機能として「slick.js」を利用しました。

 ここでは「slick.js」の導入から用意されているオプションを解説しています

 Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方

 

2-2.ヘッダ画像をスライドさせる

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

 カスタマイズのヘッダ画像で設定した画像をslickでスライドさせる方法

 

2-3.商品詳細画像をスライドさせる

ここではWelcartの商品詳細画像を「slick」でスライド表示させる方法を解説しています。

 Welcartの商品画像をslickでスライドさせる方法

 

2-4.商品リストをスライドさせる

ここではWelcartの商品リスト(お勧め、関連商品、ベストセラ等々)を「slick」でスライド表示させる方法を解説しています。

 商品リストを価格順に並べる方法

<作成リストの種類>

 「関連商品リストの抽出とslickによるスライド

 「ベストセラー商品リストの抽出とslickによるスライド

 「カテゴリーの商品リストの抽出とslickによるスライド

 「キャンペーン商品の設定と商品リスト

 

3.検索、会員、カートのカスタマイズ

3-1.検索、会員、カートのカスタマイズ前に行う事

①ここではWelcartの色々な制限を解除する方法と、投稿文書の中で製品ドキュメントか否か?を判断する関数の作り方を説明しています。

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

 

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

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

またこのカスタマイズにより「welcart_basic」がどの様な作りになっているのか?も理解する事ができます。

 Welcart_basicのcategory.phpのカスタマイズ

 

3-2.検索、会員、カート及びメニュの仕様の確認

①Welcart_basicの「検索フォーム」がどの様に設計されているのか?を確認します。

 検索フォームの仕様

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

 会員システムの仕様

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

 カートシステムの仕様

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

 メニュの仕様

 

3-3.検索、会員、カートのカスタマイズー①ー

ここでは、Welcart_basicのスタイルを保ったままで各ツールをカスタマイズする事例です。

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

 Welcart_basicの検索フォームのカスタマイズ

 

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

 Welcart_Basicの会員システムのカスタマイズ

 

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

 Welcart_Basicのカートボタンのカスタマイズ