Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

画面共有をかけているため、 Zoomの画面が全画面表示になっております。 そのため、タスクバーや別ウィンドウの表示がされない場合がございます。 その際は、下図を参考に全画面表示の終了を行ってください。 次に、参加者スペースとチャットスペースを開いて下さい。

Slide 3

Slide 3 text

①チャット セミナー中に疑問や質問がございましたら、チャットスペースにてメッ セージをお願いいたします。 ②テキストの表示 事前送付のセミナーテキストを同時に見られるようにしておいていた だけるとより分かりやすいです。 セミナー中には以下のアクションを行うことができます。

Slide 4

Slide 4 text

Welcart セミナー 2020 「ECサイト構築と運用のノウハウ」 コルネ株式会社

Slide 5

Slide 5 text

テーマについて

Slide 6

Slide 6 text

テーマ制作の3つの手法 完全オリジナル 既製のテーマにWelcartの機能を追加 Welcart専用テーマをカスタマイズする

Slide 7

Slide 7 text

完全オリジナル レイアウト・デザインを設計し、全てのテンプレートを自前で制作 機能設計が自由 テンプレート構造の把 握が必要 クライアントの要求に 対応しやすい → 難易度高め →

Slide 8

Slide 8 text

Welcart 専用テーマ以外の既製のテーマに組み込み 既製のテーマ 既に公開しているコーポレートサイトでも EC機能を導入可能 既製のテーマ利用のため予算が安め 不具合の特定が難しい 制作費を安くあげるため に、Welcart とは関係の ない既製のテーマを使うと いう考えは危険！

Slide 9

Slide 9 text

コルネ社が制作した Welcart 専用テーマを利用 Welcart 専用テーマ テーマカスタマイザーの知識が必要な 場合がある 全ての Welcart 拡張プラグインが 利用可能

Slide 10

Slide 10 text

効率の良いテーマの制作とは

Slide 11

Slide 11 text

子テーマの製作工数は親テーマ次第 テーマ制作コスト ＝ 子テーマ制作工数 テーマ制作の基本：親テーマを決めて子テーマ展開 メンテナンス上、 親テーマの上書きアップグレードが必須

Slide 12

Slide 12 text

100％オリジナルのテーマも子テーマ展開する必要があるのか？ 子テーマ展開にする場合 ◉ 共通部分をフレームワーク感覚で親テーマにすれば、 　 最小の工数で的確な修正が可能になる 100%オリジナルテーマの場合 ◉ 不具合が起こってもアップグレードは出来ない為、　 多く のテーマを制作していた場合、修正作業は 　 大変な負担になる

Slide 13

Slide 13 text

テーマ制作における SEO と UX

Slide 14

Slide 14 text

SEO のポイント 質の高いコンテンツ 信頼性、独自性、専門性、キーワード 表示スピード クローラビリティ

Slide 15

Slide 15 text

質の高いコンテンツをサポート ◉テーマ制作としての役割 　ユーザーやライターが作った 　コンテンツを正しいHTML構造で、 　かつ、有効性を100％引き出し、 　テンプレートを作る

Slide 16

Slide 16 text

表示スピード CSS や JavaScript に注意！ 重要!! ファーストビューのスピードを損なわない 無駄な CSS のオーバーライド クオリティーの低いプラグインの使用

Slide 17

Slide 17 text

UXのポイント 見た目のインパクトと分かり易さ 操作性 表示スピード ユーザビリティ

Slide 18

Slide 18 text

Welcart 専用テーマとは

Slide 19

Slide 19 text

Welcart専用テーマの特徴 Welcart専用テンプレート

Slide 20

Slide 20 text

拡張プラグイン対応　① 専用テンプレートが必要な拡張プラグイン 別途テンプレートタグ設置・レイアウト修正の必要があるプラグイン ★ WCEX DL Seller
 ★ WCEX SKU Select
 ★ WCEX Auto Delivery
 ★ WCEX Multiple Shipping
 ★ WCEX Coupon
 ★ WCEX Widget Cart
 
 ダウンロードコンテンツ＆サービス販売
 バリエーション表示切替
 定期購入サポート
 複数配送先設定
 クーポン発行ツール
 どこでもカートウィジェット
 
 （2020/02時点）

Slide 21

Slide 21 text

拡張プラグイン対応　② 他社製 Welcart 専用テーマ（対応テーマ） 　　　　　　拡張プラグインの対応 ↑ WCEX Auto Delivery、WCEX Multiple Shipping、WCEX Coupon等未対応

Slide 22

Slide 22 text

テーマの可能性 ◉ コーポレートサイト組み込み 　 トップがコーポレートサイトでショップページにリンクしている ◉ カタログサイトへの応用 　 カート投稿ボタンを削除

Slide 23

Slide 23 text

テーマを作ってみる 1　親テーマに Welcart Basic を使用する理由 2　子テーマの作り方 3　親テーマの継承方法 4　スタイルシートの種類と役割 5　テンプレート構造 6　JavaScriptの注意点（ありがちな失敗）

Slide 24

Slide 24 text

子テーマの作り方 CSS PP 最低限必要なファイルは次の通り。
 ● style.css
 ● functions.php
 
 functions.php

Slide 25

Slide 25 text

親テーマの継承方法

Slide 26

Slide 26 text

テーマを作ってみる 1　親テーマに Welcart Basic を使用する理由 2　子テーマの作り方 3　親テーマの継承方法 4　スタイルシートの種類と役割 5　テンプレート構造 6　JavaScriptの注意点（ありがちな失敗）

Slide 27

Slide 27 text

JavaScriptの注意点① 1. header.php（footer.php） テンプレートに、jsファイル読み込み 用の script タグを直接書かない。 2. jQuery は、WordPress にバンドルされている バージョンを使用する。 3. 3系を使ってしまったときの応急処置として jquery-migrate-3.0.1.min.js を読み込む。

Slide 28

Slide 28 text

JavaScriptの注意点② ●ページを限定して読み込む。
 条件分岐タグ（WordPress Codex） 


Slide 29

Slide 29 text

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


Slide 30

Slide 30 text

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


Slide 31

Slide 31 text

カスタマイズについて

Slide 32

Slide 32 text

カスタマイズの仕方

Slide 33

Slide 33 text

アップグレード可能なカスタマイズ① やってはいけない金メッキカスタマイズ Welcart本体を改変カスタマイズ アップグレードの更新通知を無くす アップグレードでメッキが剥がれる

Slide 34

Slide 34 text

アップグレード可能なカスタマイズ② 正しいカスタマイズ法は フックAPIを使用

Slide 35

Slide 35 text

リファレンスの活 用 Welcart.com Reference https://www.welcart.com/documents/reference

Slide 36

Slide 36 text

アクションフックのタイミング テーマのカスタマイズから usces_construct のフックには掛けられない。 Welcart に働きかけるのは init （優先順位20）以降でないといけない。 フロントと管理画面の共通フックを使用するときは、どちらで実行するか条件分岐を 忘れない。 is_single() などの条件判断関数は parse_query から有効となるので、カスタマイ ズで利用する場合はそのタイミングより遅いフックを使用する必要がある。 リダイレクト処理を行う場合は wp_head よりも速いタイミングでないといけない。 コンバージョンタグを埋める際、 wp_print_footer_scripts では 購入情報はクリアさ れてしまっている。

Slide 37

Slide 37 text

カスタマイズの設置方法 ◉ プラグインとして開発 ◉ テーマにカスタマイズを設置

Slide 38

Slide 38 text

メンテナンスを考えたファイル構成 見通しの良い構成 ◉ カスタマイズファイルを作成 ◉ フォルダにまとめる ◉ 読み込みは「_loader.php」 ◉ functions.php に追加するのは1行のみ

Slide 39

Slide 39 text

カスタマイズの実例 ◉ セキュリティーに留意する ◉ アフィリエイトタグの挿入 ◉ カートページで「あと○円で送料無料」のメッセージを表示する ◉ フリガナを必須入力にする ◉ 「カートへ入れる」ボタンを固定ページで使う ◉ gettext を使ったラベルの書き換え 詳細はテキストに て

Slide 40

Slide 40 text

Welcart の新機能について

Slide 41

Slide 41 text

会員登録メルアド認証機能 バージョン1.9.23 以降で搭載 会員新規登録 ⇒　認証メール送信 ⇒　メール内リンクをクリック ⇒　本登録完了

Slide 42

Slide 42 text

会員データ共有機能 バージョン1.9.26以降で搭載 データベース サイトB 会員情報 サイトA 会員情報 お客さん ログイン可能

Slide 43

Slide 43 text

拡張プラグインの自動更新通知機能 バージョン1.9.30以降で搭載

Slide 44

Slide 44 text

環境と運用について

Slide 45

Slide 45 text

サーバー選びのポイント 推奨サーバー WelHost、CPI、XServerビジネス 推奨以外で実績の多いサーバー XServer、さくらサーバー 非推奨のサーバー お名前.com、ロリポップ（クレジット決済ができない）

Slide 46

Slide 46 text

ショップによって異なるサーバースペック 専用サーバーにすべきショップの目安 ◉ 新規立ち上げのショップ 　 商品点数（SKU数）＞ 5000点 ◉ Welcart に乗り換えの場合 　 アクセス数（GoogleAnalyticsでいうPV数）＞ 月間10万

Slide 47

Slide 47 text

サーバーのセッティング 必要に応じてphp.ini の編集が必要 PHPの実行時間の制限　⇒　max_execution_time SKU数の制限　　　　　⇒　max_input_vars メモリーの消費制限　　⇒　memory_limit

Slide 48

Slide 48 text

保守の必要性 ◉ ショップ運営者への周知が必要 　　・WordPressの運用ではメンテナンスが必須 　　　ープラグインアップデート・サーバ・SSL・バックアップ etc ◉ 保守を積極的に請け負うべき ◉ WelHostの利用

Slide 49

Slide 49 text

他のプラグインとの連携 推奨プラグイン 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 詳細はテキストに て

Slide 50

Slide 50 text

その他注意点

Slide 51

Slide 51 text

メールの送信について スパム認定の原因 ◉ サイトのドメインと送信元のメールアドレスのドメインが異なる ◉ SPFレコードが適切に設定されていない ◉ 送信先と送信元のアドレスが同じ

Slide 52

Slide 52 text

利用制限について ◉ 利用できない環境 　・マルチサイト 　・多言語化 ◉ 運用制限 　・カートページとメンバーページの削除・スラッグ変更不可

Slide 53

Slide 53 text

開発状況の確認 ◉ Mantisの公開情報を確認 ◉ Welcart本体／拡張プラグインの開発状況 ◉ 不具合の対応状況 ◉ フロントのレスポンスが悪くなる 原因とその対策

Slide 54

Slide 54 text

Welcart セミナー 2020 スライド ECサイト構築と運用のノウハウ　→ 　https://bit.ly/3i2aa07 コルネ株式会社