ECサイト構築と運用のノウハウ（Welcart セミナー 2020/5/22）

Welcart セミナー 2020/5/22
開催日：2020年5月22日（金）13:30〜15:30

Transcript

2. 画面共有をかけているため、 Zoomの画面が全画面表示になっております。 そのため、タスクバーや別ウィンドウの表示がされない場合がございます。 その際は、下図を参考に全画面表示の終了を行ってください。 次に、参加者スペースとチャットスペースを開いて下さい。
3. ①手を挙げる 質問に答えるときや、質疑応答中に発言したいときに使用してくださ い。 「手を挙げる」ボタンを押すと参加者スペースに挙手を 知らせるアイコンが表示されます。 「手を下げる」ボタンを押すと挙手アイコンが消えます。 ※初期設定で参加者の方々はミュートが解除できないようになっております。 ②チャット セミナー中に疑問や質問がございましたら、チャットスペースにてメッ セージをお願いいたします。 ③テキストの表示 事前送付のセミナーテキストを同時に見られるようにしておいていた だけるとより分かりやすいです。 セミナー中には以下のアクションを行うことができます。
4. Welcart セミナー 2020 「ECサイト構築と運用のノウハウ」 コルネ株式会社
5. テーマについて
6. テーマ制作の3つの手法 完全オリジナル 既製のテーマにWelcartの機能を追加 Welcart専用テーマをカスタマイズする
7. 完全オリジナル レイアウト・デザインを設計し、全てのテンプレートを自前で制作 機能設計が自由 テンプレート構造の把 握が必要 クライアントの要求に 対応しやすい → 難易度高め →
8. Welcart 専用テーマ以外の既製のテーマに組み込み 既製のテーマ 既に公開しているコーポレートサイトでも EC機能を導入可能 既製のテーマ利用のため予算が安め 不具合の特定が難しい 制作費を安くあげるため に、Welcart とは関係の ない既製のテーマを使うと いう考えは危険！
9. コルネ社が制作した Welcart 専用テーマを利用 Welcart 専用テーマ テーマカスタマイザーの知識が必要な 場合がある 全ての Welcart 拡張プラグインが 利用可能
10. 効率の良いテーマの制作とは
11. 子テーマの製作工数は親テーマ次第 テーマ制作コスト ＝ 子テーマ制作工数 テーマ制作の基本：親テーマを決めて子テーマ展開 メンテナンス上、 親テーマの上書きアップグレードが必須
12. 100％オリジナルのテーマも子テーマ展開する必要があるのか？ 子テーマ展開にする場合 ◉ 共通部分をフレームワーク感覚で親テーマにすれば、 　 最小の工数で的確な修正が可能になる 100%オリジナルテーマの場合 ◉ 不具合が起こってもアップグレードは出来ない為、　 多く のテーマを制作していた場合、修正作業は 　 大変な負担になる
13. テーマ制作における SEO と UX
14. SEO のポイント 質の高いコンテンツ 信頼性、独自性、専門性、キーワード 表示スピード クローラビリティ
15. 質の高いコンテンツをサポート ◉テーマ制作としての役割 　ユーザーやライターが作った 　コンテンツを正しいHTML構造で、 　かつ、有効性を100％引き出し、 　テンプレートを作る
16. 表示スピード CSS や JavaScript に注意！ 重要!! ファーストビューのスピードを損なわない 無駄な CSS のオーバーライド クオリティーの低いプラグインの使用
17. UXのポイント 見た目のインパクトと分かり易さ 操作性 表示スピード ユーザビリティ
18. Welcart 専用テーマとは
19. Welcart専用テーマの特徴 Welcart専用テンプレート
20. 拡張プラグイン対応　① 専用テンプレートが必要な拡張プラグイン 別途テンプレートタグ設置・レイアウト修正の必要があるプラグイン ★ WCEX DL Seller
 ★ WCEX SKU Select
 ★ WCEX Auto Delivery
 ★ WCEX Multiple Shipping
 ★ WCEX Coupon
 ★ WCEX Widget Cart
 
 ダウンロードコンテンツ＆サービス販売
 バリエーション表示切替
 定期購入サポート
 複数配送先設定
 クーポン発行ツール
 どこでもカートウィジェット
 
 （2020/02時点）
21. 拡張プラグイン対応　② 他社製 Welcart 専用テーマ（対応テーマ） 　　　　　　拡張プラグインの対応 ↑ WCEX Auto Delivery、WCEX Multiple Shipping、WCEX Coupon等未対応
22. テーマの可能性 ◉ コーポレートサイト組み込み 　 トップがコーポレートサイトでショップページにリンクしている ◉ カタログサイトへの応用 　 カート投稿ボタンを削除
23. テーマを作ってみる 1　親テーマに Welcart Basic を使用する理由 2　子テーマの作り方 3　親テーマの継承方法 4　スタイルシートの種類と役割 5　テンプレート構造 6　JavaScriptの注意点（ありがちな失敗）
24. 子テーマの作り方 CSS PP 最低限必要なファイルは次の通り。
 • style.css
 • functions.php
 
 functions.php
25. 親テーマの継承方法
26. テーマを作ってみる 1　親テーマに Welcart Basic を使用する理由 2　子テーマの作り方 3　親テーマの継承方法 4　スタイルシートの種類と役割 5　テンプレート構造 6　JavaScriptの注意点（ありがちな失敗）
27. JavaScriptの注意点① 1. header.php（footer.php） テンプレートに、jsファイル読み込み 用の script タグを直接書かない。 2. jQuery は、WordPress にバンドルされている バージョンを使用する。 3. 3系を使ってしまったときの応急処置として jquery-migrate-3.0.1.min.js を読み込む。
28. JavaScriptの注意点② •ページを限定して読み込む。
 条件分岐タグ（WordPress Codex） 

29. JavaScriptの注意点③ •ブラウザの検証機能を使って、JavaScript のエラーが出ていないかを
 　チェックする

30. ありがちな失敗 1. header.php には wp_head()、footer.php には 
 wp_footer() 関数を忘れない
 
 2. ファイルの最後に無駄な改行を置かない
 ⇒?> がある場合、それ以降に改行を2つ以上置かない
 
 3. ファイルは UTF8（BOMなし）で保存する
 
 4. エラーの見逃し
 PHP のエラーが出ていないかを確認するために、
 デバッグモードにする

31. カスタマイズについて
32. カスタマイズの仕方
33. アップグレード可能なカスタマイズ① やってはいけない金メッキカスタマイズ Welcart本体を改変カスタマイズ アップグレードの更新通知を無くす アップグレードでメッキが剥がれる
34. アップグレード可能なカスタマイズ② 正しいカスタマイズ法は フックAPIを使用
35. リファレンスの活 用 Welcart.com Reference https://www.welcart.com/documents/reference
36. アクションフックのタイミング テーマのカスタマイズから usces_construct のフックには掛けられない。 Welcart に働きかけるのは init （優先順位20）以降でないといけない。 フロントと管理画面の共通フックを使用するときは、どちらで実行するか条件分岐を 忘れない。 is_single() などの条件判断関数は parse_query から有効となるので、カスタマイ ズで利用する場合はそのタイミングより遅いフックを使用する必要がある。 リダイレクト処理を行う場合は wp_head よりも速いタイミングでないといけない。 コンバージョンタグを埋める際、 wp_print_footer_scripts では 購入情報はクリアさ れてしまっている。
37. カスタマイズの設置方法 ◉ プラグインとして開発 ◉ テーマにカスタマイズを設置
38. メンテナンスを考えたファイル構成 見通しの良い構成 ◉ カスタマイズファイルを作成 ◉ フォルダにまとめる ◉ 読み込みは「_loader.php」 ◉ functions.php に追加するのは1行のみ
39. カスタマイズの実例 ◉ セキュリティーに留意する ◉ アフィリエイトタグの挿入 ◉ カートページで「あと◦円で送料無料」のメッセージを表示する ◉ フリガナを必須入力にする ◉ 「カートへ入れる」ボタンを固定ページで使う ◉ gettext を使ったラベルの書き換え 詳細はテキストに て
40. Welcart の新機能について
41. 会員登録メルアド認証機能 バージョン1.9.23 以降で搭載 会員新規登録 ⇒　認証メール送信 ⇒　メール内リンクをクリック ⇒　本登録完了
42. 会員データ共有機能 バージョン1.9.26以降で搭載 データベース サイトB 会員情報 サイトA 会員情報 お客さん ログイン可能
43. 拡張プラグインの自動更新通知機能 バージョン1.9.30以降で搭載
44. 環境と運用について
45. サーバー選びのポイント 推奨サーバー WelHost、CPI 推奨以外で実績の多いサーバー XServer、さくらサーバー 非推奨のサーバー お名前.com、ロリポップ（クレジット決済ができない）
46. ショップによって異なるサーバースペック 専用サーバーにすべきショップの目安 ◉ 新規立ち上げのショップ 　 商品点数（SKU数）＞ 5000点 ◉ Welcart に乗り換えの場合 　 アクセス数（GoogleAnalyticsでいうPV数）＞ 月間10万
47. サーバーのセッティング 必要に応じてphp.ini の編集が必要 PHPの実行時間の制限　⇒　max_execution_time SKU数の制限　　　　　⇒　max_input_vars メモリーの消費制限　　⇒　memory_limit
48. 保守の必要性 ◉ ショップ運営者への周知が必要 　　・WordPressの運用ではメンテナンスが必須 　　　ープラグインアップデート・サーバ・SSL・バックアップ etc ◉ 保守を積極的に請け負うべき ◉ WelHostの利用
49. 他のプラグインとの連携 推奨プラグイン SiteGuard WP Plugin / UpdraftPlus / WP Maintenance Mode / Google Analytics for WordPress by MonsterInsights / Contact Form 7 便利なプラグイン Autoptimize / Advanced Custom Fields / リビジョンコントロール / WP Mail SMTP / Breadcrumb NavXT / Category Checklist Tree 非推奨プラグイン WPML化 / Really Simple SSL / WP Super Cache 詳細はテキストに て
50. その他注意点
51. メールの送信について スパム認定の原因 ◉ サイトのドメインと送信元のメールアドレスのドメインが異なる ◉ SPFレコードが適切に設定されていない ◉ 送信先と送信元のアドレスが同じ
52. 利用制限について ◉ 利用できない環境 　・マルチサイト 　・多言語化 ◉ 運用制限 　・カートページとメンバーページの削除・スラッグ変更不可
53. 開発状況の確認 ◉ Mantisの公開情報を確認 ◉ Welcart本体／拡張プラグインの開発状況 ◉ 不具合の対応状況 ◉ フロントのレスポンスが悪くなる 原因とその対策
54. Welcart セミナー 2020 スライド ECサイト構築と運用のノウハウ　→ 　https://bitly.com/3geGigo 10周年セミナースライド 実践に見るテーマの制作方法 　→　https://bitly.com/39tliy9 実践に見るカスタマイズの手法 　→　https://bitly.com/31KIEws コルネ株式会社