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

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

分かりやすい例としては「Espresso」テーマでは特徴的なWebフォントを読み込んでいます。
https://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/

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

シンプル系テーマ

Welcartでカート内の商品数・合計金額を表示する

Welthemesのテーマでは、ヘッダーにあるカートアイコンの部分に「現在のカート内商品数」がアイコンと同化して表示されるようなデザインになっています。

この商品数合計は、<?php usces_totalquantity_in_cart(); > というタグで出力できます。

Novel というテーマでは「合計額」を表示しています。

novel01
Novelのライブデモ

商品金額合計は、<?php usces_totalprice_in_cart(); > というタグで出力されますので、お好みの場所にタグを挿入してCSSでスタイリングするだけで簡単に実装が可能です。

このようにショッピングサイトで必要になりがちなタグがちゃんと個別に用意されている所が、Welcartの良いところですね。

ここでよりスタイリッシュなショッピングサイトのためのアドバイスです。

古風なサイトでは、よく「只今カートに2点入っています」とか「現在の合計金額は00000円です。」とか、文章で表示されたりします。またサイドバーにカート画面が常に表示されていて、「現在はどれどどれがカートにありいくら」ということが表示されていたりします。

親切といえば親切なのかもしれませんが、それって買い物中にどうしても必要な情報でしょうか?カートにいれながら買い物を継続しているということは、やはり商品をちゃんと見せることが重要であり、「たった今どれだけカートに入れたか」なんてことは普通の人であれば覚えていますし、カート画面に行けばすぐに分かることです。

1度の購入点数が1点、2点といったショップであれば、余計なお世話な表示かもしれません。

逆に、卸販売サイトや細々とした資材屋さんのような「1度に沢山の物を購入することが多い」というショップであれば、サイドバーに大きく買い物カゴの中身を表示するのは便利かもしれませんね。

テーマデザイン全てに共通することですが、本当に必要と断言できないような要素は思い切って削ってしまうこと。それを徹底することで、本当に重要な情報がしっかりと浮き出てきます。

「ECサイトっぽいかどうか、ECシステムに機能が備わっているかどうか」ではなく、「自分のお店の利用者にとって必要かどうか?」を常に考えて最適化しましょう。

Tips: トップページをスライドギャラリーにする

Welthemesのテーマでは、いずれもトップページにショップのヴィジュアルイメージとなる写真が掲載できるようになっています。

minimum01

画像の変更方法

トップの画像は管理画面の

「外観」>「ヘッダー」>「カスタムヘッダー」

からアップロードして管理できます。アップロードと同時に適正サイズに切り抜きするクロップ機能が付いていますので、デジカメで撮ったままの写真でもそのままアップロードしてすぐにトップページに貼り付けることが可能です。

  1. もし何もアップロードされていなければテーマ内にある「default_header.jpg」を表示
  2. もし管理画面から何かアップロードされればそちらを表示

という仕組みになっていますので、お好みの方法で管理してみてください。

複数写真のスライドギャラリーにする

全てのテーマには、トップページの写真を静止画ではなく「複数写真のスライドギャラリー」にするためのソースコードも準備しています。
付属のマニュアルにあるように home.php のコードを修正した後、管理画面の「カスタムヘッダー」にてお好みの写真をアップロードしてみてください。

デモサイト( minimum LiveDemo )では静止画にしてありますが、ここがフェードイン・フェードアウトのスライドギャラリーになるだけで、ずっとお洒落で素敵な印象のショップになります。

ショップのイメージ付け、また一時的なセール用バナーなどにご活用ください。

Welcartで関連する商品を表示する

ある商品の詳細画面の下に、「こちらもおすすめ」「この商品を見た人はこんな商品も見ています」のようなおすすめ表示があります。

Welcartで関連商品が表示させる方法を見てみましょう。

1.タグを使った関連商品指定

03_itemnew_08Welcartにはデフォルトで関連商品表示の機能が付いています。
これは商品登録ページで「タグ」を入力するようにすることで商品同士の紐付けを行います。しかしキーワードではなく「商品コード」による仕組みのため、「ある商品に直接的に関連する商品を決め打ちで指定する」という考え方になります。

管理画面マニュアル > 商品編集画面 > タグ

マニュアルにもある通り、おすすめというよりは「専用付属品」というような表現になります。ある商品と一緒に購入しやすいオプション品や付属品が複数ある場合には、こちらのタグ機能で決め打ち指定していく方が思い通りのおすすめができそうです。

 

2. 沢山の商品からプログラムによって自動表示する方法

プラグインを使って自動的におすすめ表示することも可能です。元々Wordpressではブログの関連記事表示のための沢山のプラグインが存在していますので、それを応用して商品表示を行います。

「Yet Another Related Posts Plugin」はブログ用の関連記事表示システムでも最もポピュラーなプラグインの1つですが、こちらを使った方法がおすすめです。こちらの記事が参考になりますのでぜひご覧ください。
http://riyomaru.minibird.jp/wordpress/185/

何をもって紐付けを行なうか、などが事細かに設定した上で全て自動で表示させることができるというのは非常に便利ですね。

ワンポイント

実店舗での買物を想像しても、ある商品を見に来たのにその他のいろいろな商品をどんどん紹介されるとちょっと引いてしまいます。おすすめ表示というのはあくまでお店側からの働きかけですので、やり過ぎないことが大切です。
お店は親切心だとしても、お客さんがどう感じるかはその人次第。慇懃無礼という言葉がありますが、おすすめの仕方をあまり押し付けがましくしないことです。如何にスマートにさり気なく気付いてもらうかという所が重要だと思います。

それは表示される物が適切であることはもちろん、デザイン的にはしっかりと分離されてさり気なく見えること。そして見出しのライティングも重要です。「あなたはこれも興味あるに違いありませんね」のようなニュアンスは避けましょう。

おすすめ表示はショッピングサイトには非常に重要な機能で、あるとないとではページビューが大きく変わってきます。
「このお店に来るといろいろな商品を知ることが出来て楽しい」というようなユーザー体験の提供に繋がりますので、自分にあった方法を選んでぜひ実装しましょう!

Facebook OGPの画像サイズ変更への対応

Welcartは最近のバージョンアップで商品ページのみFacebook OGPへの対応が完了しています。

商品ページをFacebookでシェアしたりすると、ちゃんと商品タイトルや説明、画像サムネイルが表示されますね。

1つの問題として、Facebook自身がOGPの画像サイズを頻繁に仕様変更するということです。どんどん大きくなるという状況ですが、つい最近まで200pxが推奨でしたが 2013年4月9日に「最低200px、できれば1500pxがいい」という大きな仕様変更がなされました。

https://developers.facebook.com/docs/opengraph/creating-object-types/#properties

 

Welcartでは、テーマファイルではなくプラグインのコアファイル(esc-e-shop/functions/filstes.php )にてOGPが実装されており、画像にはメディアアップロード時に自動生成される「サムネイル」が指定されています。

WordPressのサムネイルのサイズはデフォルトで150pxになっているので、そのままでは仕様に満たないサイズとなってしまいます。設定 > メディア からサムネイルサイズを200px以上に設定しておくのがよいでしょう。

1500pxとなると常識的にサムネイルではないので、このサムネイルサイズを無理に大きくしておくよりは、実装側でサムネイルではなく「画像の元ファイルを読む」ようにしておくのが妥当かもしれません。

ただWelcartのコアファイルを触ってまで今やる必要があるかというと、それほど緊急の問題でもないと思いますので、とりあえずサムネイルサイズを200px以上にしておくのをオススメします。

尚、サムネイルサイズを変更しても過去にアップロードした画像には反映されません。全てのサムネイルを一気に再生成するプラグインRegenerate Thumbnailsを使って生成し直しておきましょう!

 

Previous Posts