Welcartの商品登録画面を劇的に楽にするプラグイン「Image Uploader for Welcart」

Welcartをさらに便利にするプラグイン「Image Uploader for Welcart」をご紹介します。

welca

Welcartの画像登録の仕組み

Welcartの商品画像登録の仕組みは若干使いづらい部分があります。それは商品画像を商品登録画面でアップロードするのではなく、別々の場所で作成した商品コードと画像ファイル名を合わせることで内部的にマッチングさせることで、結果的に商品画像として認識されるということです。

商品登録画面から一括アップロードできるように

「Image Uploader for Welcart」は商品登録画面に「画像の追加・編集」ボタンを追加し、welcartのメディアライブラリによる一括アップロードができるようになるプラグインです。

プラグインを利用した際の商品登録画面はこのようになります。

Welcartの商品編集画面から画像アップロードする「Image Uploader for Welcart」

Welcart本来であればここで画像の追加・編集はできず、商品コードと同じファイル名の画像が既にアップロードされていればそれらがサムネイル表示されるだけなのですが、上のようにその場で「画像の追加・編集」が追加されています。
また各画像はその場でドラッグアンドドロップで順番を変えたり、×ボタンで登録解除したりすることができます。

Welcartのファイル名で紐付ける仕組みというのは、大量のデータを一気に作業するには便利な一面もあります。しかし、商品登録という意味では分かりにくいと感じる方も多いようです。
例)Tips: Welcart商品登録のコツ http://welthemes.com/2013/06/19/tips-imageupload/

このプラグインの良い所は、アップロードが劇的に分かりやすくなるというだけでなく、アップロードしたものが画像が自動でwelcartの仕組みにそって連番になるようリネームされて登録される所です。これにより画像の呼び出し方はwelcartの機能のままとなり、Welcartの将来的なアップデートで問題になる可能性も低く、テーマに手を入れる必要がないということです。

Welcartを利用している方には必須のプラグインになるのではないでしょうか。

プラグインのダウンロードはこちらから
https://wordpress.org/plugins/image-uploader-for-welcart/

作者の方のブログでも詳しく解説されています。プラグイン紹介以外にも、WordPress、Welcartのカスタマイズ記事がとても参考になるのでおすすめです。
http://web.contempo.jp/weblog/tips/p636

Welcartが「Google Analytics by Yoast」に対応

Welcart公式ブログにて「Google Analytics by Yoast」への対応が案内されています。
http://www.welcart.com/community/archives/73075

eCommerce_Dashboard_by_Yoast_-_Google_Analytics-550x487

従来、Googleユニバーサルアナリティクスに対応するためにはプラグイン「Google Analytics Dashboard for WP」の一部ファイルを差し替える方法を用意して頂けておりましたが、Welcart1.4.11以降では「Google Analytics by Yoast」をインストールし、設定を行うだけで購入情報などのEコマース情報のトラッキングが集計できるようになっています。

導入方法は公式サイトにて詳しく解説されていますので、ぜひ導入してみましょう。

http://www.welcart.com/community/archives/73075

Google Analytics by Yoastのダウンロードはこちら

WelcartがPayPalウェブペイメントプラスに対応

Welcart 1.4.9にて「PayPal ウェブペイメントプラス」に対応しました。
http://www.welcart.com/wc-settlement/

ここでは、「PayPal ウェブペイメントプラス」について簡単に解説します。

PayPal ウェブペイメントプラスとは

index_img_01

PayPal ウェブペイメントプラスは、決済画面のデザインをオリジナルのECサイトに合わせることができる仕組みです。

PayPalが最も手軽なオンライン決済であることは言うまでもありませんが、PayPalを利用した場合の画面遷移は、ショップのウェブサイトから突然全く違うPayPal専用画面に移動してしまう所。購入者の印象としては突然デザインが変わる事で不安感に繋がります。しかもそのPayPal専用画面はやや分かり辛い所があり、ウェブデザイン・ユーザー体験設計の観点からはできれば避けたいものです。

決済画面のデザインを全体と同じものに統一して画面遷移させることができれば、上記のような問題はほとんど解消できます。

実装方法はPayPalカスタマイザーによって支払いページのヘッダー、背景色、サブヘッダーのテ
キスト、支払いボタンの色、ボタンテキストの色、注文概要セクションをカスタマイ
ズする方法。そしてiframeを使って完全なオリジナルページに決済表示だけ埋め込む方法があります。

paypal
ウェブペイメントプラス サービス導入ガイド(日本語PDF)より

PayPalは昨年、買い手がペイパルアカウントを持っていない場合は強制的にアカウント作成が必要になるという仕様変更がありましたが、その後それが取り消されアカウントなしでもクレジットカード可能が可能になりました。

PayPalの弱点の1つである画面遷移、画面の分かりづらさを解消し、シームレスな決済フローを実装できそうです。

ペイパルの決済機能がご自身のECサイトの一部に
https://www.paypal.jp/jp/contents/service/web-payment-plus/

※ウェブペイメントプラスには、ビジネスアカウントの開設、審査が必要です。
https://www.paypal.jp/jp/contents/support/introduction/web-payment-plus/

WordPress スライドギャラリー実装プラグインまとめ

Welthemesでは全てのテーマにおいて、トップページにレスポンシブ対応スライドギャラリーを表示できるようになっています。(minimum等の基本テーマでは煩わしく動くのを嫌い、デモサイトではスライドではなく固定表示にしていますが、必要に応じてスライド化できるようにコードを埋め込んであります。)

Novel-Responsive-Screen

これらはWordPressの外観メニュー>ヘッダーと連動していて、他のプラグインなしですぐに利用できるシンプルかつ必要最小限なものとなります。コード内に直接記述してある数値を変更することで、切り替わりのスピードやエフェクトを変更することも可能です。

より細かい設定ができるギャラリーとして、各バナーに個別のリンク先を設定したいというカスタマイズのご質問が時々ありますので、今回はそのような場合におすすめの便利なスライダープラグインご紹介します。

プラグインだと管理画面にてスライダー用に登録インターフェイスが表示され、それぞれ細かい設定をすることができます。

1. Soliloquy Lite

soliloquy

レスポンシブ対応、簡単設置、軽量、ともっともお勧めしたいプラグインの1つです。無料版と有料版がありますが、無料のライトバージョンでも十分な機能を揃えています。スライド毎にメタ情報を登録することもできるので、SEO面でも効果的と言えるかもしれません。

http://wordpress.org/plugins/soliloquy-lite

2. Meta Slider

meta-slider

スライダー、豊富なトランジション、アニメーション、エフェクト、シンプルな操作性とバランスのとれたプラグイン。より高度な設定は有料バージョンが容易されています。

http://wordpress.org/plugins/ml-slider/

3. Meteor Slides

meteor-slider

シンプルさが特徴のプラグイン。レスポンシブでモバイルフレンドリー。多機能な設定はいらないシンプルさを求める人へ。

http://wordpress.org/plugins/meteor-slides/

4. Cyclone Slider 2

cyclone-slider

こちらもシンプルさが特徴のプラグイン。シンプルながらトランジションやスピードを設定することができます。

http://wordpress.org/plugins/cyclone-slider-2/

その他

その他次のようなプラグインもあります。

プラグインはサイトごとの用途に合っているかどうか、操作性の好みが人それぞれありますので、いくつかを試してみて一番使いやすそうなものを採用することをオススメします。

プラグインをインストール、homeとなるページにタグを埋め込むだけの簡単設置ですぐに実装できますので、ぜひお試しください!

参考記事:http://www.wpbeginner.com/showcase/9-most-popular-free-responsive-wordpress-slider-plugins/

Welcartテーマのショップロゴをカスタマイズする

Welthemesのテーマでは、ショップロゴにそれぞれデザインの雰囲気に合ったWebフォントにしています。(Webフォントについてはこちら

分かりやすい例としては「Espresso」テーマでは特徴的なWebフォントを読み込んでいます。
http://demo.welthemes.com/?themedemo=welcart_espresso
screen 2013-06-23 at 18.22.20

Webフォントを利用している理由は明確で、ダウンロードして使って頂くテーマなので「最初から固定のロゴ画像を入れる訳にもいかず」かといって「一般的なPCフォントではデザインができない」からです。

ですが、実際に利用する際にはまず最初にカスタマイズしたくなる部分だと思います。
ここでは、具体的にどのようにカスタマイズするとよいかを解説します。

お店のロゴ画像にする場合

customizer_logo

お店のロゴが決まっていたり、画像でしか表現できない場合(特殊なフォントやマーク等)は画像ロゴを設定します。

付属のマニュアルファイルにある通り、
Wordpress管理画面 > 外観 > 現在のテーマの所にある「カスタマイズ」 
をクリックしてカスタマイズモードに入ります。

そこで、「ショップロゴ」という部分に画像をドラッグ・アンド・ドロップして完了です。

シンプルにフォントで済ませたい場合

例えば、

  • 既存店舗として統一ロゴがあるわけではない
  • 全く新しく立ち上げるオンラインショップ

のような場合はロゴ画像はまだないかもしれません。

その場合、最初から設定してあるフォントのままでよしとするか、あるいは自分でWebフォントを選んでみましょう。

Google Webフォントから選ぶ

本格的なWebフォントのサービスは有料ですが、Googleが提供しているGoogle Fonts は無償で利用することができます。

GoogleFonts

  1. http://www.google.com/fonts/ から好みのフォントを選ぶ
  2. Quick-use をクリック
  3. 「Add this code to your website:」とある部分のコードをコピーし、テーマファイル header.php のの直前にペースト(そこにはデフォルトで選択したフォントのコードがあるので、それは削除しておきます)
  4. 「 Integrate the fonts into your CSS:」にある「font-family: xxxxxxxx;」というCSSをコピーし、「テーマ名.css」の「h1#site-title」という部分に貼り付けます。(ここでも初期設定状態のfont-family 指定は削除しておきます)

これで、ショップのタイトルが先ほど選択したフォントで表示されていると思います。

有償になりますが、Typekitのように本格的な物もあります。
https://typekit.com/

シンプルなテーマでは、ロゴとトップページの写真、商品写真が、そのショップの印象のほとんどを占めることになります。
つまりそれらをちゃんと自分のブランドイメージに合ったものに入れ替えていくだけで、他にはない個性を出すことができます。

シンプル系テーマ

Next Posts