tips

Image Uploader for Welcart : Welcartの商品編集ページから画像をアップロード&登録するプラグイン。

Image Uploader for Welcart

Image Uploader for Welcart

Image Uploader for Welcartwordpress.orgから最新版をダウンロードしてください。
「Image uploader for Welcart」はコルネ株式会社さんが提供されているプラグイン「Welcart e-commerce」専用のイメージアップローダーです。お使いのwordpressに「Welcart e-commerce」をインストールしてからご利用ください。最新版同士※1でのご使用を推奨しております。なお、不具合等がありましたら、ここのコメント欄かWP公式のサポートスレッドにてご報告※2ください。

※1 WordPress4.5.4からメディアのアップロード時のサニタイズ仕様が変更になりました。Ver4.5.4+で使用する場合は必ずwelcart1.9+ Image Uploader1.4+をご使用ください。
※2 Welcartのフォーラムでは当プラグインに関する質問はお答えできません。

 

Welcart専用の画像アップローダーを商品情報編集ページに設置する

welcartは画像の名前の持ち方が制限があり、[商品コード–.jpg]としなくてはならない。CSVで管理したり一気に流し込むときにはとても便利なのだけど、ちまちま手作業で更新する小規模ウェブショップだとちょっと面倒。ましてCMSとして納品する場合、ウェブショップの運営者が不慣れだったり、担当者が変更になって引き継ぎが上手くいかなかったり…、と言うのはよくある話。何はともあれ、間違いが起きにくいように「画像あげたいな→ボタンがある→こんな感じかな→よしオッケー♪」という流れにしたい。
つまり…

商品情報編集ページから画像をアップロードできるようにする

アップロードした画像のタイトルをwelcart仕様に自動リネームし商品画像として登録する

編集画面上でドラッグで表示順を並べ替えられるようにする

…でも

welcartのメディアライブラリによる一括アップロード&紐付け機能は維持

ということが実現したいわけです。

 

商品情報編集画面でのアップロード&操作方法

rfw-01

設置すると上図のように、デフォルトの商品画像ボックスが削除され新たに専用のメタボックスが表示されます。(メタボックスはサイド表示を想定していますが、ノーマル表示やタブレットなどの小さい画面などwordpressのメタボックスソートやレスポンシブデザインにも対応しています。)

 

rfw-02

画像をアップロードします。

① 画像追加ボタンを押すとアップローダーが立ち上がります。

② 画像をアップロードします。

③ 「商品画像を選択」ボタンを押します。(複数まとめてどうぞ)

④ 選択された画像がメタボックスに表示されます。

 

rfw-03

⑤ サムネイルをドラッグして並べ替えることで、welcartの画像並びに反映されます。一番上に来る画像がメイン画像として設定されます。

⑥ 画像右上のデリートボタンを押すと商品画像の登録を解除できます。
デリートした画像は、投稿に添付された状態でライブラリに残ります。これがけっこうミソで、在庫でバリエーションがあったり無かったりの時に画像をアップロードしたり削除したりしなくても、すぐに元にもどせるようになります。一時的にカラーやサイズのバリエーションなどの写真だけ隠す、というような使い方をするときに便利です。

⑦ 商品を公開/更新します。画像が自動でリネームされ、welcartに登録(または登録解除)されます。メイン画像はアイキャッチ画像にも自動的に登録されます。
上の図では、3つの画像はそれぞれTEST-PRODUCT(一番目のメイン画像), TEST-PRODUCT–1(サブ画像1), TEST-PRODUCT–2(サブ画像2)と自動でリネームされています。自動で設定されるが好ましくない場合は、以下のコードをfunctions.php等に記載することでオート機能をオフにしてください。なお、オート機能をオフにしていても、アイキャッチ画像が選択されていない時は、自動的にトップの画像が設定されます。

add_filter('iu4w_auto_thumbnail', '__return_false');

 

メディアライブラリからまとめてアップロードする

welcartの形式通りアップロードすればwelcartに反映されます

メディアライブラリの画像アップローダーから商品コード名の画像がアップされた場合、商品情報ページを開いたときに自動的に商品投稿をアップロード先として紐付けされます

SKU–数字.jpg形式のものを重複して上げてしまっても個別にインデクスされますので、形式さえ合っていれば適当なナンバリングで問題ありません。(WP4.5.4からファイルのサニタイズ仕様が変更になっているためWP4.5.4+を仕様する場合は必ずwelcart1.9+ Image Uploader1.4+を使用してください。詳細はwelcart公式の案内をご覧ください。)

rfw-04
画像が反映されているはずですので、並べ替えなどを行って更新して下さい。

 

設置方法&出力方法

プラグインとして読み込んで有効化すれば、自動的に設置されます。

画像の呼び出し方はwelcartの機能のままですのでテーマに手を入れる必要はありません。

 

Change log

  • 1.4.12017/02/24レイアウトを改善するとともに代替テキストやキャプションを入力可能に。wp.media.jsで起きていたTypeErrorをfix。
  • 1.4.02016/10/01welcart1.9以降のsubimage_ruleに対応。
  • 1.3.92016/09/19バグフィクス。
  • 1.3.82016/09/11プラグインの記述をクラス対応に変更。
  • 1.3.72016/05/30テキストドメインをglotpress対応に変更。レスポンシブ時のCSSを修正。
    1.3.72016/05/30テキストドメインをglotpress対応に変更。レスポンシブ時のCSSを修正。
  • 1.3.6.12015/11/24商品多数時の保存・並び替えバグをフィクス。
  • 1.3.62015/11/20UIを変更、それに伴いJS等の処理を修正、画像無し保存時のエラーをデバッグ。
  • 1.3.52015/10/17バグフィクス。
  • 1.3.42015/09/12コンフリクト回避のためコードを変更。
  • 1.3.22015/01/18メディアライブラリから一括でアップロードした画像が重複したpost_titleを持つ場合もプラグインが認識して読み込むように変更。
  • 1.32015/01/07正式版1.3としてプラグインをリリース。極力DBを汚さないようにカスタムフィールドを使う仕様をやめました。更新の混乱を避けるためここで公開していたコードは消去。
  • 1.2.12014/12/11画像をセレクト後「商品画像を選択」ボタンを押さずにウィンドウを閉じた場合でも画像をセレクトしてしまう動作を修正。
  • 1.22014/10/08レスポンシブデザイン化。WP4.0のメディアアップローダの仕様に併せて記述変更、アップローダ内での画像削除に対応。※WP3.9以前は旧バージョン1.2をご使用ください。
  • 1.1.12014/05/24wp_update_postで商品の複製ができる問題に対処。画像アップ後にSKUを変更してもリネームされなかった問題に対処。SKU変更に応じて画像も自動リネームされるように。
  • 1.12014/04/25アップローダーの仕様を変更。よりシンプルにしました。
  • 1.02014/04/23公開。

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha

27 comments

  1. kasuke

    Feb 22, 2017

    こんにちは。このプラグイン、とても重宝しています。

    商品マスターから各商品の編集画面を開くと、すでにアイテム画像が登録されている場合メイン画像はアイキャッチ画像にも自動的に登録されますよね。
    これは良いのですが、さてその画像を別のものに変えようとするとうまく行きません。
    「編集または更新する画像をクリック」でメディアライブラリから画像を指定しても、編集画面では反映されずメイン画像がアイキャッチ画像として残っています。
    また、「アイキャッチ画像を削除」を押してから「更新」しても同じです。これは自動的にメイン画像が再指定されているのかもしれないと思い、色々順番を変えて押してみますがうまく行きません。どのようにすればアイキャッチ画像の変更ができるか教えていただけると嬉しいです。WPは4.7.2、Welcartとプラグインは今日時点の最新版です。

    返信する
    • Mizuho Ogino

      Feb 22, 2017

      おっしゃっているのは、アイキャッチ画像とメイン画像を別々に指定したいができない、ということでしょうか??

      現状は、メイン画像が常に自動的にアイキャッチ画像に設定されるようになっています。幾つかのテーマを使う場合にはその方が都合が良いからです。ただ、運用方法によってはアイキャッチ画像とメイン画像は別物とした方が良いかもしれませんね。近い将来に設定画面を実装するときにオプションとして設置しますね。

    • kasuke

      Feb 22, 2017

      その通りです。

      メイン画像がアイキャッチ画像という設定は変えられないのですね。納得しました。
      「編集または更新する画像をクリック」「アイキャッチ画像を削除」などのボタンがあったので可能と思ったのですが、これらはImage Uploader for Welcartで用意されたものでは無いということですね。
      私の場合はグリッドプラグインを使って独自のフィルター付き商品選択画面を用意しようとしていたので、そこはそこで別プロポーションのアイキャッチ画像を使いたかったのです。とりあえず、他のプラグインとの組み合わせでできないか試してみます。有難うございました。

    • Mizuho Ogino

      Feb 22, 2017

      デベロップメントバージョン1.4.0.2にフィルターを設置しました。

      functions.phpに書き込めば、アイキャッチ画像を自由に設置できるようになります。

      add_filter('iu4w_auto_thumbnail', '__return_false');

      もうご覧になってないと思いますが、同じ事を探される方のために、書いておきますね。

    • kasuke

      Feb 23, 2017

      早速のアップデートありがとうございます。

      functions.phpに書き込み、デベロップメントバージョン1.4.0.2にアップデートしましたが挙動が変わりません。どのような原因が考えられますでしょうか。
      アイキャッチ画像をメディアライブラリで指定し直しても、商品情報編集画面に戻ってくるとメイン画像のままです。グリッドプラグイン側から見ても同じです。

    • kasuke

      Feb 23, 2017

      インストールするバージョンを間違えていました。

      「1.4.0.2」を インストールしていました。「デベロップメントバージョン1.4.0.2」 であるべきだったのですね。
      編集画面ではアイキャッチ画像を変更(もしくは削除)することができ、一旦はメディアライブラリーから指定した画像がアイキャッチ画像として表示されるのですが、ページの更新ボタンを押すと元に戻ってしまうようです。

    • Mizuho Ogino

      Feb 23, 2017

      いえ、デベロップメントバージョンも両方1.4.0.2です。

      念のため、再インストールしてください。
      ご報告の挙動についてですが、こちらの幾つかの環境で確かめてみたのですが、問題を発見できませんでした。
      フィルター名を再度確認してください。

      add_filter('iu4w_auto_thumbnail', '__return_false'); 

      それでダメな場合、どこかでコンフリクトでも起こしているか、debugをして頂くなど詳しく調べる必要があると思います。

      追記:
      image uploaderプラグインをオフにしても動作上の問題はないはずなので、一旦オフにして、本当にサムネイルの自動設定がこのプラグインによるものなのか確認してください。

      ●もしimage uploaderをオフにすると症状が治まる場合、どこかでコンフリクトしている可能性が高いです。ご自身で調査いただくか、そうでなければ、こちらで見せていただかなくては、これ以上のことは申し上げられません。

      ●もしimage uploaderをオフにしても症状が出る場合、自動的にサムネイルを設定するプラグインが入っていないか、あるいはお使いのテーマのfunctions.phpとそこから読み込まれているphpファイルの中に該当するコード(update_post_meta)等がないかお探しください。

    • kasuke

      Feb 23, 2017

      進捗状況です。ご迷惑おかけします。

      ●再インストール > しました。dev.versionにした時の違いは、編集画面ではアイキャッチ画像の削除・変更ができるようになるということです。が、「更新」ボタンを押した時に元のメイン画像に戻ってしまいます。
      ●フィルター名確認 > OKです。
      ●image uploaderをオフ > 症状は納まり、アイキャッチ画像は自動指定されなくなります。アイキャッチ画像は自由に指定できます。
      ●唯一アイキャッチ画像を使うプラグイン(Essential Grid)をオフにしてみる > 特に症状変わりません。アイキャッチ画像は自動指定され、削除も変更もできません。

      本当に申し訳ありません。お時間ある時で結構ですので、回答いただけたらと思います。必要であれば構築中のサイトPW等お送りします。

    • Mizuho Ogino

      Feb 25, 2017

      数カ所で確認させていただきましたが、同様の症状は確認できませんでしたので、おそらくプラグイン単体ではなく、何かが干渉しているのでしょう。

      functions.php内の記述が怪しいですね。もし調査が必要ならメールをしてください。

  2. ryoei

    Jan 14, 2016

    便利なプラグインをありがとうございます。

    商品コードが「56」「5601」「5602」とあった時に、「56」のところに「5601」「5602」の画像も表示されてしまい、更新ボタンを押すと、「5601」「5602」の画像が表示されなくなってしまいます。
    何か対処方法はありますでしょうか。

    返信する
    • Mizuho Ogino

      Jan 14, 2016

      このプラグイン内ではコードの重複を回避することは可能かもしれませんが、welcartでの出力時に支障が出る可能性が高いです。

      (できるだけ公式の設定に従いたいので、あまり変えない方向で開発しています。)

      以下、welcart 公式より抜粋。
      >現在のところ、商品コードが別の商品コードに完全に含まれるような場合、商品画像の表示に支障が出ます。
      >例)商品Aのコード(A001)、商品Bのコード(A00123)
      >このようなコードにならないように注意が必要です。
      http://www.welcart.com/documents/manual-2/%E6%96%B0%E8%A6%8F%E5%95%86%E5%93%81%E8%BF%BD%E5%8A%A0/%E5%95%86%E5%93%81%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1

    • Mizuho Ogino

      Jan 15, 2016

      p.s.
      welcart公式より引用

      >商品サブ画像適用ルール(v1.1以降)
      >商品コードの問題で、サブ画像の適用に支障が出ている場合は「新しいルールを適用する」を選択してください。そしてサブ画像のメディアタイトルを「(商品コードと連番の間に「-(ハイフン)」を2つ置く【例:a001–01】)」のルールに変更してください。

      このプラグインでもこちらの処置で問題は解決します。ただし、すでに登録しているサブ画像を全てハイフン2つにリネームしないと表示されなくなりますのでご注意ください。

    • ryoei

      Jan 15, 2016

      スーパーありがとうございます。
      助かりました。

      勉強不足でした。。。

  3. hm

    Sep 11, 2015

    すばらしいプラグインありがとうございます!

    こんなプラグインを探していました、とても助かります!

    稼働中のWelcartサイトにこちらのプラグインを追加後、
    「新規商品登録」をクリックすると
    商品画像アップローダにメディア内のすべての画像が表示されてしまいます。
    新規商品登録の都度、いったん画像をすべて削除してから
    商品を登録しないといけない感じです。

    手動で商品登録をしたWelcartサイトに
    後から貴プラグインを導入することはできないのでしょうか?

    こちらの設定に不足があるのかもしれないのですが、
    対策などあればご教示いただけると幸いです!

    Welcart Version 1.4.21
    WordPress 4.3

    返信する
    • Mizuho Ogino

      Sep 11, 2015

      >手動で商品登録をしたWelcartサイトに

      >後から貴プラグインを導入することはできないのでしょうか?
      可能です。特に何か処理をしていただく必要はありません。

      少し込み入っているようなので、状態を確認させてください。

      「商品画像アップローダにメディア内のすべての画像が表示され」とありますが、それは「画像の追加・編集」ボタンのクリック後に現れるアップローダウィンドウのことでしょうか。左上のタブは「メディアライブラリ」セレクトボックスは「この投稿へのアップロード」が選択されていますか?

      それとも新規商品追加画面のメタボックス内にいきなり画像が羅列されている状態でしょうか。

    • hm

      Sep 12, 2015

      ご返信ありがとうございます。

      プラグインを有効化すると、
      「新規商品追加画面のメタボックス内にいきなり画像が羅列されている状態」になります。
      画像はメディア内の全ての画像が表示されます。
      こんな感じです→http://bit.ly/1gfO9JZ

      あと、
      プラグイン有効化後に新規商品追加を行ったところ(メタボックスに表示されたメディア内の全画像は削除後に商品画像を登録)、追加した商品以外の全ての商品画像がリンク切れになってしまいました。
      リンク切れになった商品画像はメディア内には残っていたので、
      商品画像を登録し直してからは新規商品追加後の他の商品画像のリンク切れは再現しておりません。
      こちらの環境が何かおかしいのでしょうか??

      念のため、他に使用しているプラグインをお知らせいたします。
      All In One SEO Pack 2.2.7.2
      BackWPup 3.1.4
      Breadcrumb NavXT 5.2.2
      Contact Form 7 4.2.2
      WCEX Auto Delivery 1.0.8
      WCEX Mobile 1.2.1
      WordPress インポートツール 0.6.1

    • Mizuho Ogino

      Sep 12, 2015

      どこかでコンフリクトしているのでしょうかね。

      いずれにせよ、新規投稿(商品)には本来存在しないはずの$postや_itemcodeが取得されてしまっているのだと思います。global $postなど怪しい表記を訂正して1.3.4にアップデートしました。そちらをお試しください。それで改善しない場合は、実際に拝見させていただかないとちょっと分からないです。

    • hm

      Sep 12, 2015

      早々にご対応いただきありがとうございました!

      最新版に更新したところ、修正されました!

  4. せばすちゃん

    Jul 8, 2015

    Image Uploader for Welcartを使わせていただいています。

    便利なプラグインをありがとうございます。
    Welcart Version 1.4.17.1506224、WordPress 4.2.2において、画像の並び替えが上手く反映されないように思えるのですがこちらの環境だけでしょうか?
    あと、画像の追加編集ボタンをクリック後の「この投稿へのアップロード」が選択されている状態で全ての画像が表示されているように見えます。
    もし不具合が確認出来ましたら修正していただけると助かります。こちらの勘違いでしたらすみません。

    返信する
    • Mizuho Ogino

      Jul 8, 2015

      とり急ぎWelcart Version 1.4.17にアップロードして動作させて見ましたが、不具合は再現できませんでした。

      当方では複数件のwelcartを異なる環境で運用していますが、おっしゃる問題は今の所把握していません。

      ひとまず考えられる不具合の可能性は以下のとおりです。

      ○ご使用テーマ内でのfunctionとの不具合の可能性
      ○ブラウザ依存の問題の可能性
      ○他のプラグインとのコンフリクトの可能性

      何か分かりましたら、ご報告頂けましたら助かります。

    • せばすちゃん

      Jul 8, 2015

      早速のお返事ありがとうございます。

      頂いたアドバイスを元に調べてみます。

    • Mizuho Ogino

      Jul 8, 2015

      並べ替えも「この投稿へのアップロード」の指定も、いずれもjQuery/javascriptを使った動作ですので、テーマかプラグイン内でJSを使用している箇所とコンフリクトしている可能性が高いように思います。

    • せばすちゃん

      Jul 8, 2015

      JSは使用していますので関係ありそうですね。

      現時点で気がついた事ですが、Image Uploader for Welcartを有効にしていると「商品サブ画像適用ルール」でハイフンを2つにしていますがそれが無視されていました。他に何かわかりましたらご報告いたします。

    • せばすちゃん

      Jul 8, 2015

      すみません、先ほどのは仕様でした。

    • oichi

      Nov 24, 2015

      はじめまして。横から失礼いたします。

      同じく並べ替えが反映されない不具合があり解決策がないか探しておりましたらこちらへたどりつきました。
      以後解決されましたでしょうか。

      このたびネットショップの構築をすべくWP4.3.1(現時点で最新}を新規インストールし「welcart」をインストールしました。
      取説どおりに商品コードや画像ファイル名、ハイフンなどを設定しても商品サブ画像が表示ならず悩んでいたところ「Image Uploader for Welcart」を見つけ、使用したら商品サブ画像の登録ができました。
      登録、表示はできたのですが順番がおかしく並べ替えを行い更新をしても順番が崩れてしまいます。
      画像が数枚程度で並べ替えると問題ないのですが数十枚になると崩れてしまいます。
      並べ替えを行わず更新を押すとその都度位置が入れ替わるようです。

      環境
      サーバー:ロリポップ
      PHP:5.4
      WP:4.3.1
      Image Uploader for Welcart:1.3.4
      テーマ:Blanc

      以下試してもダメでした。
      WP:4.1.5
      Image Uploader for Welcart:1.3.4
      ブラウザ:クローム、IE
      プラグイン必要以外全て無効
      WPは特にいじっていない
      試したテーマ:Blanc、Welcart Default Theme、WPのデフォルトtwenty系全て

      なにか解決策があれば教えていただきたいです。
      便利なプラグインをありがとうございます。

    • Mizuho Ogino

      Nov 24, 2015

      ご報告ありがとうございます。

      同様の症状を確認しました。
      多数の商品リネームに対応するように変更しました。1.3.6.1に更新しましたので、アップデートしてください。

      >取説どおりに商品コードや画像ファイル名、ハイフンなどを設定しても商品サブ画像が表示ならず
      「Image Uploader for Welcart」はリネームを代行するだけですので、このプラグインを使用するだけで表示されるようなら、リネーム方法のどこかに間違いがあったのだと思います。今後ライブラリからまとめてアップする機会などもあるかもしれませんので、「システム設定」内の「商品サブ画像適用ルール 」など、改めてチェックされておくことをお勧めします。

    • oichi

      Nov 24, 2015

      おはようございます。

      早速のバグフィクスありがとうございます。
      正常に並び替えができました。

      「Image Uploader for Welcart」を使わないでのサブ画像の登録ですが私の勘違いのようでございました。
      welcartマニュアルには
      —–
      メイン画像:商品コードをファイル名とします。例えば商品コードがpp-001 の場合 例)pp-001.jpg
      サブ画像:サブ画像のファイル名は商品コードに連番を付け足します。 例)pp-001-01、pp-001-02、pp-001-03
      —–
      とあり、画像ファイル名をハイフン連番にし、さらに商品コードにもpp-001-01、pp-001-02、pp-001-03とサブ画像のファイル名全てを入力しておりました。

      大変お手数おかけいたしまして申し訳ございませんでした。
      これからも便利に活用させていただきます。
      ありがとうございました。