HOME  /Welcart
 /Welcart_Basicサイトの体裁を整える
2020年09月23日

Welcart_Basicサイトの体裁を整える

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。

1.ウィジェットについて

1.ウィジェットの種類とデフォルト表示

デフォルトで用意されているウィジェットは下記の5個です

ウィジェット 使われる場所 指定しない時に表示される物
ホーム ウィジェットエリア(左) ホームページの下の左 ログインと商品カテゴリ
ホーム ウィジェットエリア(中) ホームページの下の中 お勧め商品
ホーム ウィジェットエリア(右) ホームページの下の右 営業日カレンダ
サイドバー1 商品詳細ページの右 商品カテゴリと営業日カレンダ
サイドバー2 ブログページの右 営業日カレンダ

■各ウィジェットに何も指定しない場合はプログラムが勝手に所定のウィジェットを表示します。

■何も表示させたくない場合はウィジェットの「テキスト(何も入れない)」を設定すると表示されなくなります。

 

2.ウィジェットに表示させる部品

WelcartはWordPressのウィジェット部品に加えて下記のウィジェットが追加されています。

ウィジェット部品名 説明
Welcart カテゴリ

 

カテゴリの親を指定して下位のカテゴリを表示します

商品でもブログでも利用可能です。

Welcart キーワード検索 Wwelcartの検索画面を表示する。
Welcart 最近の投稿 ブログの最近の投稿を表示する。表示する投稿数はここで指定します
Welcart ページ 固定ページを表示します。

ページIDを指定しないと総ての固定ページを表示します

Welcart ポスト 投稿(商品、ブログ)のカテゴリを指定して投稿を表示します。

ディフォルトカテゴリはitemgenre

Welcart お勧め商品 カテゴリの「お勧め商品」を表示します

商品名と画像が表示されます

Welcart ベストセラー 売れている商品を表示します

商品名と画像が表示されます

Welcart 商品一覧 商品のカテゴリを指定して関連商品を表示します
Welcart ブロブ カレンダ 当月のカレンダを表示します
Welcart カレンダ 2か月の営業日カレンダを表示します
Welcart ログイン ログイン画面を表示します

■各ウィジェットに上記のウィジェットを追加します。

 

3.サンプルサイトに設定したウィジェット

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

上記のサンプルサイトには下記のウィジェットを設定しました。

ウィジェット 設定したウィジェット
ホーム ウィジェットエリア(左) Welcart ログイン
ホーム ウィジェットエリア(中) Welcart カレンダ
ホーム ウィジェットエリア(右) Welcart ベストセラー
サイドバー1 Welcart カテゴリ(カテゴリ:itemgenre)
サイドバー2 Welcart 最近の投稿

 

2.メニュについて

メニュもウィジェットと同様に作成されてない場合はプログラムが勝手に表示する仕様になっています。

1.「外観→メニュ」を実行します

■任意のメニュ名を入力し、「メニューを作成」ボタンを挿入します。

 

2.メニュの位置を決めます

■ヘッダメニュかフッタメニュかを選択して「メニュを保存」ボタンを挿入します。

 

3.メニュに配置する部品を選択します。

メニュ部品は「固定ページ」、「投稿」、「カスタムリンク」、「カテゴリ」から選択できます。

①ホームを選択する

■ホームは「固定ページ」の「すべて表示」を選択すると表示されます。

■ホームを選択して「メニューに追加」でメニュに追加されます。

ホームが追加されました

■ホームは「カスタムリンク」になっています。この中にURLが記載されています。

 カスタムリンクとは?

カスタムリンクは親子メニュを作る時にも利用します。

親を「カスタムリンクのリンク先なし」で作成し、その子供のメニュを作ると階層型のメニュになります。但しメニュの開閉はCSSまたはJqueryでコントロールする必要があります。

 

②カテゴリから選択する

カテゴリを選択するとカテゴリが表示されるので、表示したいカテゴリを選択します。

 

③私が作成したヘッダメニュは下記になります

■メニュが完成したら「メニュを保存」ボタンを挿入します。

 

④同様にフッタメニュを作成します

追加のメニュは下記をクリックしてから作ります。

■作り方はヘッダメニュと同様です。

 

3.ヘッダ画像を設定する

最後にサイトのイメージを決めるヘッダ画像を設定します。

画面の下記の「カスタマイズ」をクリックします

下記画面が表示されます。

上記の「ヘッダ画像」の所でヘッダ画像の作成ができます。

また「テーマオプション」はTOPページに表示する商品の種類と数の設定ができます。

1.このサンプルサイトのヘッダー画像は下記になっています。

■上記をランダムに表示する設定にしています。

 

2.このサンプルサイトのテーマオプションは下記になっています。

 

上記の設定のサンプルサイトは下記になります。

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

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

Welcartには、カートを空にするクラス関数が用意されています。ここでは、この関数の使い方を解説しています。

Welcartの商品一覧ページに購入ボタンを配置する為には「usces_direct_intoCart」を利用しますが、この関数は必須オプションのチェックは行ってくれません。それをうまく行える方法を解説しています。

welcartで用意されているカート投入ボタンはwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使えるカート投入ボタンを作成しました。

welcartの購入数量指定はテキスト入力です。これをボタンで数値入力ができる様にしました

welcartの中ではどれ位のポイントが付与されるのか?どれ位の金額が値引きされるか?の表示がありません。そこでこれを表示する関数を作成しました。

welcartで用意されているSKU価格の表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使えるSKU価格の表示関数を作成しました。

Welcart_basicテーマは、SKUが複数あると縦にダラダラと長く表示される問題点があります。そこでSKUを分解し、どのSKUを表示するのか?をラジオボタンやセレクトBOXで選択できる様にカスタマイズします。

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

welcart_basicのオプション表示は、入力必須をチェックしてもユーザから見て判りません。またチェックボックスやラジオボタン表示に一部、おかしい所があります。ここではこれらの修正方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcart商品を価格順に並び替える為に、WordpressのメタデータにWelcartの価格データを自動的に登録する関数の作成方法を解説しています。

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

Welcartには関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

Welcart_basicのメニュをカスタマイズする為にはどの様な仕組みで作られているか?を知る必要があります。そこでここではメニュの仕様を解説しています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

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

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

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

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています。またslickのメソッドやイベントの使い方の説明しています。

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

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

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と無償テンプレート「Welcart_basic」について解説します。