サイト検索
検索
サイトメニュー
Menu
RTB SoftLab ラテベ ソフトラボ (ラテベラボ)
私の知っているソフトの操作を解りやすく、解説していきます。
サイト検索
検索
サイトメニュー
Menu

投稿日:2021年10月7日

更新日:2021年10月2日

ECサイト (通販サイト) Welcart Basicのテーマ設定について

前回で、ほぼ管理サイトECサイト設定や商品設定が完了しました。
前回までを見ていない方は、下記のリンクにて参照が出来ますので、ご覧下さい。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
( 基本設定・ショップ設定
(メール設定)
今までで設定を行った機能(メニュー)
ECサイトのおすすめ

今回からは、徐々にデザインの変更を行っていきます。
CSSとかPHPなどのカスタマイズは行いません。
まずは、 Welcart Basic にどんな設定機能があるかが重要になります。
では、さっそくテーマを見てみます。

皆様方の参考に出来たら、嬉しく思います♪
もし参考になったら、広告を1回でいいので、クリックして下さい♪

WelCart(Welcart Basic)のテーマ設定

まず、WordPressの管理画面からテーマのカスタマイズを見ていきたいと思います。
(外観 ➡ カスタマイズ)

Welcart Basic カスタマイズ画面
Welcart Basic カスタマイズ画面

上記がカスタマイズ画面(変更前)のなると思います。
早々一つ一つ見ていきましょう!

サイトの基本情報

ECサイト Welcart Basic カスタマイズ画面 サイト基本情報
ECサイト Welcart Basic カスタマイズ画面 サイト基本情報

あまり、大したものはありませんね(笑)。
サイトアイコン(ファビアイコン)は、追加して下さいね。

ヘッダー画像

ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像
ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像

こちらにて、ヘッダーの画像が変更出来るみたいです。
早々に適当な画像に変えてみますが、お店にあった画像を用意して変えて見て下さい。
ここで大事なのは、推奨サイズが1000×400になっています。
後で切抜きが出来ますので、それ以上のサイズの画像を用意して下さい。

「新規画像を追加」を押して進みます。

画像をアップすると、右下に「選択して切り抜く」が出ていると思います。
こちらを押して、画像の切抜きを行いたいと思います。

ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像の切抜き
ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像の切抜き

ヘッダー画像を設定すると、サイトのイメージが、大幅に変わりますので、写真は慎重に選ぶ必要があります。

ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像設定後
ECサイト Welcart Basic カスタマイズ画面 ヘッダー画像設定後

まだ、テーマの変更が出来ていませんので、「公開」ボタンを押して保存します。
尚、画像は複数追加することが出来るみたいです。

ちなみに、ここまでは、全てWordPrssのテーマの標準機能になります。
但し、テーマによっては対応していないテーマもあります。

メニュー

これはWordPrssの機能と完全に同じになりますので、説明は省きます。

又、ここから操作すると、プレビューが動いて遅いので、別メニューから見ることをお勧めします。
(外観 ➡ メニュー)

テーマオプション

ECサイト Welcart Basic カスタマイズ画面 テーマオプション設定
ECサイト Welcart Basic カスタマイズ画面 テーマオプション設定

そのままでも問題はありませんが、どこの何を表示しているかということは解っていなければいけませんので、説明します。
これは、トップページについて、お勧め商品のカテゴリの商品をMAX10件表示する設定になります。
画像で説明しますと、下記の部分がそれになります。

ECサイト Welcart Basic カスタマイズ画面 テーマオプションの設定場所
ECサイト Welcart Basic カスタマイズ画面 テーマオプションの設定場所

ウイジェット

ここから操作すると、プレビューが動いて遅いので、別メニューから見る事とし、後回しにします。

その他

その他は特に見る必要がありませんので、説明は省きます。

Welcart Basicのウィジェットエリア

ウィジェットは、WordPressの基本機能になります。
但し、テーマによって、どこの場所に設定されているか全く違います。
その為、このテーマはどこに設定されているかの確認が必要になるということになります。
(外観 ➡ ウィジェット)

ECサイト Welcart Basic のウィジェットエリア
ECサイト Welcart Basic のウィジェットエリア

上記を見る限りでは、ホームと商品系と投稿系の3つに大きく分かれています。
詳細は、下記になっていると思います。

ホームウィジェットエリア(左)

ボトム(テール)が3列になっていますので、その左に表示されます。

ホームウィジェットエリア(中)

ボトム(テール)が3列になっていますので、その中央に表示されます。

ホームウィジェットエリア(右)

ボトム(テール)が3列になっていますので、その右に表示されます。

サイドバー1

商品詳細ページやカテゴリページなどの時、右側にに表示されます。

サイドバー2

固定ページや投稿(右)ページなどの時、右側にに表示されます。

このレイアウト位置は、重要になります。

ウィジェットは、 ブロックエディタに変わりました。

話は少しはずれますが、ウィジェットは、ブロックエディタに変わりました。
ただ、色々問題点があります。

  • 無茶苦茶遅い!
  • WordPressのプラグイン等でまだ対応していないものも多々ある。(2021/09/27日現在)
  • 下手すると、下記のようなエラーが出てくる場合がある。(後で詳しく)
    • 「custom_html」ブロックはエラーの影響を・・・

なのでまったくメリットはない!って思っています。

「custom_html」ブロックはエラーの影響を受けており・が出た場合は!

「custom_html」ブロックはエラーの影響を受けており、正しく機能しない可能性があります。詳細は開発ツールを確認してください。 」が出て場合は!

「custom_html」ブロックはエラーの影響を受けており、正しく機能しない可能性があります。詳細は開発ツールを確認してください
「custom_html」ブロックはエラーの影響を受けており、正しく機能しない可能性があります。詳細は開発ツールを確認してください
無条件で、 プラグイン「Classic Widgets」を入れれが問題が解決します。

プラグイン Classic Widgets
プラグイン Classic Widgets
プラグイン「Classic Widgets」適用後は、以下になります。
プラグイン Classic Widgets 適用後
プラグイン Classic Widgets 適用後

Welcart Basicのウィジェット

WelCart用の無条件でウィジェットが追加されているようです。

WelCaer用のウィジェットがいろいろ追加されています。

ECサイトWelCart用 のウィジェット
ECサイトWelCart用 のウィジェット

結構沢山ありますので、ウィジェットエリアに配置して使ってみることをお勧めします。

まとめ

これで、サイトのテーマ設定が完了しました。
デザインは、これでとりあえずOKの人は、そのままECサイトの運用が可能になります♪

必ず、バックバックを取りながら行っていただくようにお願いします。

今まで行った設定は、以下になると思います。

設定名(メニュー名)設定完了
ECサイト概要
インスール
(システム設定 )
( 基本設定 )
( 配送設定 )
(投稿 ➡ カテゴリ)
(新規商品追加)
キャンペーンの設定
(営業日設定)
( 基本設定・ショップ設定
(メール設定)
(外観 ➡ テーマ)
(外観 ➡ ウィジェット)
今までで設定を行った機能(メニュー)

ここから、さらにカスタマイズしていきたいと思っていますが、ここから先は、どうしてもテーマのアップデート等を考慮しなければなりません。
なるべく簡単にカスタマイズの勘所を伝えていければと思っています。

最後までお読みくださいまして、ありがとうございます。
もし参考になったら、広告を1回でいいので、クリックして下さいね♪

RTB カレンダー

25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
通販サイト(ECサイト)デモへ
ラテベラボブログへ
ナノシスへ

RTBアーカイブ(旧 Widget 版)

RTB ポストランキング (旧)

RTBアーカイブ(旧 Widget 版)