Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Welcartを使ってショップサイトを作る!              ナターシャ ∼hana∼
ナターシャ@twit_natashaTokumoto Nahoko限りなくフリーターに近いフリーランスWebデザイナー
目次Welcartを有効化してみる。子テーマの作成ウィジェットについて管理画面からの設定
Welcartプラグインを有効化すると起こること デフォルトテーマ カテゴリー 固定ページ 固定ページのテンプレート データベース ダッシュボードのメニュー ウィジェット
Welcartデフォルト用のテーマ 「Welcart Default Theme」というテー マがインストールされます。 このテーマを有効化するか、独自に テーマを作成しないとWelcartは使え ません。
Welcartのデフォルトテーマを適用してみた
カテゴリー以下のカテゴリーが追加されます。 商品・・・・・item ┣お勧め商品・・・・・・itemreco ┣新着商品・・・・・・itemnew ┗商品ジャンル・・・・・・itemgenre商品登録時にこのカテゴリーを使用します。カテゴリーを...
固定ページ以下のページが追加されます。 カート・・・・・usces-cart メンバー・・・・・usces-member空白のページですが削除すると正常に動かなくなります。
固定ページのテンプレート以下のテンプレートが用意されています。 Inquiry     お名前・メールアドレス・内容だけのシンプルなお問     い合わせフォーム     SSLの設定の仕方(次ページ) Item Category Templa...
InquiryのSSL設定管理画面∼「Welcart Shop」∼システム設定∼「お問い合わせフォームのページID」にInquiryを設定したページIDを入れる。パーマリンクを手動設定にしている場合は固定ページのパーマリンクを”usces-in...
データベース以下のテーブルが追加されます。 usces_order・・・・・・受注データ usces_order_meta・・・・・・受注用カスタムデータ usces_member・・・・・・会員データ usces_member_meta・・・...
ダッシュボードのメニューメニューが追加されます。(あとで説明)        Welcart Shop     Welcart Management     が追加されます。
ウィジェット以下のWelcart専用のウィジェットが追加されます。(あとで説明)      Welcart ログイン                                  Welcart専用のではない「カテゴリー」      Wel...
デフォルトテーマの子テーマを作る 「親テーマ修正」や「フルスクラッチ制 作」より「子テーマ」で制作するメリット  子テーマが補いきれないことは親にお  任せ    Welcartオリジナルのテンプレートタグやテンプレート            ...
子テーマの作り方子テーマを作るのに必要なもの  最小構成は style.css ファイルのみでも可能です。最大では通常のテー  マと同じファイルを持つこともできます:  1. style.css (必須)  2. functions.php (...
子テーマstyle.css編集/*Theme Name:      KidAuthor:          Demetris        テーマ名でTemplate:        twentyten       はない!*/     ※Te...
子テーマ独自のテンプレートファイル 子テーマのテンプレート は style.css と同じように親テーマの 同名ファイ ルを上書きします 。 親テーマを変更する必要がなければ、子テーマ側にテンプレートを用意し なくても親テーマのテンプレートファ...
子テーマfunctions.php編集親テーマfunctions.phpの直前に子テーマのfunctions.phpが読み込まれるので子テーマのfunctions.phpが優先される  子テーマに必要な関数だけ記述する  親テーマでいらない関数...
親テーマの画像を使用したい時など     子テーマ制作の時しか使わないテンプレートタグ<?php bloginfo(template_url); ?>親テーマのフォルダURLを返すテンプレートタグ例)<img src="<?php echo g...
Welcartのテーマによく出てくる言葉 ”usces”から始まる文言はWelcartオリ ジナルのテンプレートタグか関数か 変数 よく出てくる__(), _e() は多言語対応 のためのWordPressの関数
sidebar-xxx.phpデフォルトテーマには4つのsidebar-xxx.phpがある。                         ホームの時ウィジェットの「Homesidebar-home.php         Left」及び「...
ウィジェットのアイコン管理画面から表示・非表示の切り替えが可能変更したい場合はオリジナルテーマのimagesフォルダの画像を上書き  Welcart カテゴリー ・・・ category.png  Welcart キーワード検索 ・・・ sea...
最初に設定すること1. クレジット決済設定2. 基本設定*(次ページ)3. 配送設定*(次ページ)4. メール設定5. 商品登録など(次ページ) *は必ず商品登録より先に行う。
基本設定「営業設定」  表示モード:  「Welcart Shop」∼「営業日設定」でキャンペーン期間に設定した期  間は「キャンペーン中」になる。(→はずなのになってない!(バグ?)  キャンペーン対象の「商品ジャンル」はカテゴリーで「商品ジ...
配送設定登録のUIが少しわかりづらい・・・(以下に注意) 「配送方法」の「送料固定」:下の「送料」 を先に設定しないと「送料を固定しない」し か選択できない。同じ配送方法でも商品によって送料が違う場合は「送料を固定しない」を選択すると商品登録時...
商品登録SKUって何?---商品コードに紐付く枝番のようなもの。サイズやカラーなど一商品に複数登録することができる。メイン画像は商品追加画面からは登録できない。管理画面の「メディア」から登録する。【命名ルール】「タイトル」に商品コードをつける。...
(私の中で)よくある質問受注データや会員データをダウンロードできますか?⇒できます。(デモ)会員ページ・カートページ・ログインページのデザインを変えたい。⇒できます。(次のページ)商品データのアップロードはできますか⇒できます。(http://...
会員ページ・カートページ・ログインページの              デザインを変えるphpファイルはデフォルトテーマの中の「wc_templates」フォルダ内にあります。プラグインフォルダ内の「usc-e-shop>css>usces_ca...
Upcoming SlideShare
Loading in …5
×

Welcartを使ってみた

19,962 views

Published on

2012年7月のWordBenchKyotoで発表した資料です。

Published in: Education
  • Be the first to comment

Welcartを使ってみた

  1. 1. Welcartを使ってショップサイトを作る! ナターシャ ∼hana∼
  2. 2. ナターシャ@twit_natashaTokumoto Nahoko限りなくフリーターに近いフリーランスWebデザイナー
  3. 3. 目次Welcartを有効化してみる。子テーマの作成ウィジェットについて管理画面からの設定
  4. 4. Welcartプラグインを有効化すると起こること デフォルトテーマ カテゴリー 固定ページ 固定ページのテンプレート データベース ダッシュボードのメニュー ウィジェット
  5. 5. Welcartデフォルト用のテーマ 「Welcart Default Theme」というテー マがインストールされます。 このテーマを有効化するか、独自に テーマを作成しないとWelcartは使え ません。
  6. 6. Welcartのデフォルトテーマを適用してみた
  7. 7. カテゴリー以下のカテゴリーが追加されます。 商品・・・・・item ┣お勧め商品・・・・・・itemreco ┣新着商品・・・・・・itemnew ┗商品ジャンル・・・・・・itemgenre商品登録時にこのカテゴリーを使用します。カテゴリーを削除すると正常に動かなくなります。
  8. 8. 固定ページ以下のページが追加されます。 カート・・・・・usces-cart メンバー・・・・・usces-member空白のページですが削除すると正常に動かなくなります。
  9. 9. 固定ページのテンプレート以下のテンプレートが用意されています。 Inquiry お名前・メールアドレス・内容だけのシンプルなお問 い合わせフォーム SSLの設定の仕方(次ページ) Item Category Template 全記事の一覧表示 商品以外の記事の表示が不完全で使い道は思い浮かば ない・・・。
  10. 10. InquiryのSSL設定管理画面∼「Welcart Shop」∼システム設定∼「お問い合わせフォームのページID」にInquiryを設定したページIDを入れる。パーマリンクを手動設定にしている場合は固定ページのパーマリンクを”usces-inquiry”に設定する。
  11. 11. データベース以下のテーブルが追加されます。 usces_order・・・・・・受注データ usces_order_meta・・・・・・受注用カスタムデータ usces_member・・・・・・会員データ usces_member_meta・・・・・会員用カスタムデータ usces_access・・・・・・集計用データ
  12. 12. ダッシュボードのメニューメニューが追加されます。(あとで説明) Welcart Shop Welcart Management が追加されます。
  13. 13. ウィジェット以下のWelcart専用のウィジェットが追加されます。(あとで説明) Welcart ログイン Welcart専用のではない「カテゴリー」 Welcart お勧め ウィジェットを使うと商品カテゴリー以外の カテゴリーのみが表示される。 Welcart カテゴリー Welcart カレンダー 自動で最も売れているものを表示することも 手動で登録したものを表示することも可能 Welcart キーワード検索 Welcart ベストセラー 商品も含む最新の記事(カテゴリー指定可能) Welcart ページ を指定件数表示 Welcart ポスト Welcart Recent Posts →new! 商品以外の最新の記事(カテゴリー指定不可) を指定件数表示 Welcart Blog Calendar →new!マニュアル: http://www.welcart.com/documents/manual-2/ucart%E5%B0%82%E7%94%A8%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%81%AE
  14. 14. デフォルトテーマの子テーマを作る 「親テーマ修正」や「フルスクラッチ制 作」より「子テーマ」で制作するメリット 子テーマが補いきれないことは親にお 任せ Welcartオリジナルのテンプレートタグやテンプレート ファイルの勉強が格段にしやすい 好きに作りたいところは親を参考にガ リガリ作れる。
  15. 15. 子テーマの作り方子テーマを作るのに必要なもの 最小構成は style.css ファイルのみでも可能です。最大では通常のテー マと同じファイルを持つこともできます: 1. style.css (必須) 2. functions.php (任意) 3. テンプレートファイル (任意、複数ファイル可) 4. 他のファイル (任意)http://wpdocs.sourceforge.jp/Child_Themes
  16. 16. 子テーマstyle.css編集/*Theme Name: KidAuthor: Demetris テーマ名でTemplate: twentyten はない!*/ ※Template:に親のテーマのディレクトリ名を書く@import url(../twentyten/style.css); @import:に親のスタイルシートを書く(任意)#site-title a { color: #009900;} 親との差異分のCSSを追記する
  17. 17. 子テーマ独自のテンプレートファイル 子テーマのテンプレート は style.css と同じように親テーマの 同名ファイ ルを上書きします 。 親テーマを変更する必要がなければ、子テーマ側にテンプレートを用意し なくても親テーマのテンプレートファイルが動いてくれます。 子テーマ 親テーマ 動くファイル oya.php oya.php home.php home.php home.php kids.php kids.php
  18. 18. 子テーマfunctions.php編集親テーマfunctions.phpの直前に子テーマのfunctions.phpが読み込まれるので子テーマのfunctions.phpが優先される 子テーマに必要な関数だけ記述する 親テーマでいらない関数(あっては困る関 数)は、先に子テーマで空の関数として定 義してしまう
  19. 19. 親テーマの画像を使用したい時など 子テーマ制作の時しか使わないテンプレートタグ<?php bloginfo(template_url); ?>親テーマのフォルダURLを返すテンプレートタグ例)<img src="<?php echo get_stylesheet_directory_uri() ?>/images/image_top.jpg" ><img src="<?php bloginfo(template_url); ?>/images/image_top.jpg" />
  20. 20. Welcartのテーマによく出てくる言葉 ”usces”から始まる文言はWelcartオリ ジナルのテンプレートタグか関数か 変数 よく出てくる__(), _e() は多言語対応 のためのWordPressの関数
  21. 21. sidebar-xxx.phpデフォルトテーマには4つのsidebar-xxx.phpがある。 ホームの時ウィジェットの「Homesidebar-home.php Left」及び「Home Right」を表示 固定ページが「カート」「メンsidebar-cartmember.php バー」の時用のウィジェットの表示 それ以外の時はウィジェットのsidebar-other.php 「Other Left」の内容を表示 ウィジェットの設定があればウィsidebar.php ジェットの表示 (デフォルトでは呼ばれない)ウィジェットの設定がされていなければ各sidebar-xxx.phpの中で記述されているウィジェットが表示される。
  22. 22. ウィジェットのアイコン管理画面から表示・非表示の切り替えが可能変更したい場合はオリジナルテーマのimagesフォルダの画像を上書き Welcart カテゴリー ・・・ category.png Welcart キーワード検索 ・・・ search.png Welcart ページ ・・・ page.png Welcart ログイン ・・・ login.png Welcart お勧め商品 ・・・ osusume.png Welcart カレンダー ・・・ calendar.png Welcart ベストセラー ・・・ bestseller.png Welcart ポスト ・・・ post.png
  23. 23. 最初に設定すること1. クレジット決済設定2. 基本設定*(次ページ)3. 配送設定*(次ページ)4. メール設定5. 商品登録など(次ページ) *は必ず商品登録より先に行う。
  24. 24. 基本設定「営業設定」 表示モード: 「Welcart Shop」∼「営業日設定」でキャンペーン期間に設定した期 間は「キャンペーン中」になる。(→はずなのになってない!(バグ?) キャンペーン対象の「商品ジャンル」はカテゴリーで「商品ジャン ル」の子カテゴリーに設定されたものがプルダウンに表示される。「ショップ設定」 送料無料条件:送料が無料になる「金額」を入れる。 項目名に「初期値」とついているものは商品ごとにも登録できる。 「コピーライト」フッターに表示されるだけっぽい。
  25. 25. 配送設定登録のUIが少しわかりづらい・・・(以下に注意) 「配送方法」の「送料固定」:下の「送料」 を先に設定しないと「送料を固定しない」し か選択できない。同じ配送方法でも商品によって送料が違う場合は「送料を固定しない」を選択すると商品登録時に送料を設定できるようになる。
  26. 26. 商品登録SKUって何?---商品コードに紐付く枝番のようなもの。サイズやカラーなど一商品に複数登録することができる。メイン画像は商品追加画面からは登録できない。管理画面の「メディア」から登録する。【命名ルール】「タイトル」に商品コードをつける。サブ画像は商品コード−001 のようにハイフンをつける。カスタムフィールドやスラッグなども追加できる。(基本ポストと同じ扱い。「表示オプション」から表示させる。)商品追加時に選択できるカテゴリーは親カテゴリーが「商品」のカテゴリーだけ。Welcartのバージョン 1.1.6はWPが3.4の場合表示が崩れて商品登録ができないので1.17にバージョンアップすること。
  27. 27. (私の中で)よくある質問受注データや会員データをダウンロードできますか?⇒できます。(デモ)会員ページ・カートページ・ログインページのデザインを変えたい。⇒できます。(次のページ)商品データのアップロードはできますか⇒できます。(http://www.welcart.com/documents/manual-2/%E5%95%86%E5%93%81%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC/%E5%95%86%E5%93%81%E4%B8%80%E6%8B%AC%E7%99%BB%E9%8C%B2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88 )
  28. 28. 会員ページ・カートページ・ログインページの デザインを変えるphpファイルはデフォルトテーマの中の「wc_templates」フォルダ内にあります。プラグインフォルダ内の「usc-e-shop>css>usces_cart.css」を、テーマフォルダにコピーしてから編集してください。 その際「usces_cart.css」というファイル名を変えないでください。【注意】 デフォルトテーマ のusces_cart.cssをコピーしても動かなかった です。。。 プラグイン内のcssを直接編集しないこと。バージョンアップ時 に消えてしまう。

×