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

Welcart_Basicサイトの体裁を整える

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

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

2.メニュについて

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

2-1.メニュを作成する。

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

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

 

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

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

 

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

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

①ホームを選択する

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

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

ホームが追加されました

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

 カスタムリンクの使い方

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

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

 

②カテゴリから選択する

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

 

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

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


<関連記事一覧>

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

ここではWelcart商品を価格順に並び替える方法を解説しています

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

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

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

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

ここではWelcart_basicのメニュのCSS制御の解説をしています。

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

ここではWelCart_Basicのカートの仕様がどうなっているか?を解説しています。

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

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

welcart_basicは製品だけしか検索対象としていませんが、ここではページの情報を読み込んで、何を検索させるのかを自動で判断させる方法を解説しています。

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

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

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

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

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

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

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

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

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

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

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

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

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

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