HOME  /Welcart
 /welcart 商品画像の準備とメディアへの登録方法
2020年09月23日

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

ここでは下記の事を解説しています。

1.welcartの商品画像に関する知識

2.メディアへ商品画像を取り込む前に

3.メディアの管理方法の種類

4.「Media Library Assistant」のインストールと使い方

1.welcartの商品画像に関する知識

1.商品を表す単位

解説
商品コード 商品を管理する為の基本コード。半角英数が推奨されています。
商品名 商品コードに付けられる名前
SKUコード SKU(Stock Keeping Unit )は在庫管理の単位です

商品コードと同じでも良いです。また、これが購入単位となります。

色やサイズ違い及びオプションの有無により在庫管理単位や価格が異なる場合は、SKUで個々の商品を識別します。

■基本キーは「商品コード」です。

 

2.商品画像の命名ルール

商品画像はメディアに登録されている商品画像を探して、自動で表示します。

Welcart Shop→システム設定」を開いて下さい。

下記の様な画像に関する設定があります

商品画像管理「新しいルール」とは

例えば商品コードが「DS115」と商品画像の関係は下記になります。

①DS115.png(メイン画像)

②DS115__001.png(サブ画像1)

③DS115__002.png(サブ画像2)

④DS115__003.png(サブ画像3)

商品コードと連番が明確に区別されているのが特徴です。

 昔の商品画像管理

例えば商品コードが「DS115」の場合

①DS115.png(メイン画像)

②DS115001.png(サブ画像1)

③DS115002.png(サブ画像2)

④DS115003.png(サブ画像3)

上記が昔の商品画像の管理方法で、何処までが商品コードなのか?は気にしていませんでした。

この管理方法の場合、新たに「DS115J」という商品を追加すると、「DS115」の商品画像は「DS115J」の画像も含まれるという問題が発生していました。

そこで、商品コードはここまでですよ!を明確したのが「新しいルールです

 

3.商品画像のサイズ

画像が表示される場所は2つあります。

①商品一覧

■上記は綺麗に全体が表示されていますが「設定→メディア」の設定によってはトリミングされ、全体画像が表示されない事があります。何処に気を付ければ良いかは2項で解説します。

②商品画像の中

■左のハリアのサブ画像の大きさはほぼ同じですが、右のアルファードのサブ画像の大きさがかなり異なります。

サブ画像作成のポイントは、画像サイズの大きさを同じにする事です。ハリアのサブ画像サイズは同一にしてあります。

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

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

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

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

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

 

2.メディアへ商品画像を取り込む前に

メディアを読み込む前に、WordPressの「メディアの設定」と「パーマリンクの変更」を行います。

1.「設定→メディア」の変更

ダッシュボードメニュの「設定→メディア」を開きます。

メディアの基本設定は下記の様になっています。

■「サムネールを実寸法にトリミングする」のチェックを外して下さい

これが付いているとTOPページ等に表示される商品画像がトリミングされて商品の全体像が表示されません。

■中サイズ、大サイズの値は0にして下さい。

これは複数サイズのサムネールを作っておく機能ですがあまり使われません。

■「変更を保存」ボタンを挿入して下さい。

 

2.「設定→パーマリンクの設定」の変更

ダッシュボードメニュの「設定→パーマリンクの設定」を開きます。

基本設定は下記の様になっています。

■ブログなら上記でも良いのですが、ECサイトなのでカテゴリと商品名等のURLの方が良いです。

■「/%category%/%postname%/」を指定して、「変更を保存」ボタンを挿入して下さい。

以上で画像を読み込む準備ができました。

 

3.メディアの管理方法の種類

Welcartの商品画像の管理方法が判ってもメディアをそのまま登録してしまうと、ECサイト構築後に、この画像を変更したい等の商品画像管理がうまく行えません。

 

ECショップに於いて商品画像は最も重要な情報になり、画像の更新等が簡単に出来ないと困ります。

そこでプラグインが登場するのですが、プラグインには下記の物があります。

①画像をカテゴリで管理する

Media Library Assistant(日本語化されてないが、機能が高い上に安定性が良い)

・Enhanced Media Library(日本語化されているが、Welcartのカスタマイズの画像操作ができない)

②画像が保管されるフォルダを分類する

・Media File Manager

ここでは「Media Library Assistant」の使い方を紹介します。

 

4.「Media Library Assistant」のインストールと使い方

1.「Media Library Assistant」のインストール

プラグイン→新規追加で「Media Library Assistant」を検索します。

■「今すぐインストール」を実行後、「有効化」を実行します。

メディアメニュに下記メニューが追加されます。

Att. Categories:カテゴリ編集メニュ

Att. Tags         :タグ編集メニュ

Assistant         :画像にカテゴリやタグを付ける事ができるメニュ

 

2.カテゴリを登録

メディア→Att. Categories」を実行します

カテゴリの登録方法は投稿のカテゴリーと同様です。

商品画像のカテゴリ分けは商品画像が選択できる分け方が良いと思います。

<サンプル>

■セダンの下にカムリ、クラウン、センチュリー、ミライに分けました。

■カテゴリの名前を商品分類と商品名、スラグを商品コードにしました。

 

 

3.新規画像を取り込み方

メディア→新規追加」を開きます。

■「Open Bulk Edit area(一括編集エリアを開く)」をクリックします。

表示された編集エリアのカテゴリ欄でカテゴリを指定します。

■上記はSUVのハリアを指定しています。

この状態でファイルをアップロードすると上記カテゴリが付与されます。

 

4.登録済みの画像にカテゴリを付与する方法

メディア→Assistant 」を実行します。

①表示オプションを変更する

画面の右上にある「表示オプション▼」を開きます

■カラムの「ID/Parent」、「Title/Name」、「Att. Categories」、「Att. Tags」に✔を付けます。

指定したカラムが表示されます。

■「Att. Categories」欄に指定したカテゴリが表示されます。

 

②カテゴリが無い画像を指定します。

■「No Att. Categories」を選択します。(カテゴリが設定されてない画像を指定します)

■赤枠の「Filter」をクリックします。

 

③カテゴリが設定されてない画像にカテゴリを追加する。

■画像の近くにカーソルを持っていくとメニュが表示されます。

■「Quick Edit」を実行します。

 

④カテゴリを指定します

下記が「Quick Edit」画面のカテゴリの所です。

■カテゴリ欄でカテゴリを指定します。

■「Update」ボタンを挿入するとカテゴリが付与されます。

 

以上でカテゴリが付与されてない画像にカテゴリを付与する事ができました。

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

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

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

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


<関連記事一覧>

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

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

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

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

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