Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ECサイト構築と運用のノウハウ(Welcart セミナー 2020/7/3)

Collne
July 03, 2020

ECサイト構築と運用のノウハウ(Welcart セミナー 2020/7/3)

Welcart セミナー 2020/7/3
開催日:2020年7月3日(金)13:30〜15:30

Collne

July 03, 2020
Tweet

More Decks by Collne

Other Decks in Business

Transcript

  1. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. テーマについて

    View Slide

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

    View Slide

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

    難易度高め

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. Welcart 専用テーマとは

    View Slide

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

    View Slide

  20. 拡張プラグイン対応 ①
    専用テンプレートが必要な拡張プラグイン
    別途テンプレートタグ設置・レイアウト修正の必要があるプラグイン
    ★ WCEX DL Seller

    ★ WCEX SKU Select

    ★ WCEX Auto Delivery

    ★ WCEX Multiple Shipping

    ★ WCEX Coupon

    ★ WCEX Widget Cart


    ダウンロードコンテンツ&サービス販売

    バリエーション表示切替

    定期購入サポート

    複数配送先設定

    クーポン発行ツール

    どこでもカートウィジェット


    (2020/02時点)

    View Slide

  21. 拡張プラグイン対応 ②
    他社製 Welcart 専用テーマ(対応テーマ)
          拡張プラグインの対応

    WCEX Auto Delivery、WCEX Multiple Shipping、WCEX Coupon等未対応

    View Slide

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

    View Slide

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

    View Slide

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

    ● style.css

    ● functions.php


    functions.php

    View Slide

  25. 親テーマの継承方法

    View Slide

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

    View Slide

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

    View Slide

  28. JavaScriptの注意点②
    ●ページを限定して読み込む。

    条件分岐タグ(WordPress Codex) 


    View Slide

  29. JavaScriptの注意点③
    ●ブラウザの検証機能を使って、JavaScript のエラーが出ていないかを

     チェックする


    View Slide

  30. ありがちな失敗
    1. header.php には wp_head()、footer.php には 

    wp_footer() 関数を忘れない


    2. ファイルの最後に無駄な改行を置かない

    ⇒?> がある場合、それ以降に改行を2つ以上置かない


    3. ファイルは UTF8(BOMなし)で保存する


    4. エラーの見逃し

    PHP のエラーが出ていないかを確認するために、

    デバッグモードにする


    View Slide

  31. カスタマイズについて

    View Slide

  32. カスタマイズの仕方

    View Slide

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

    View Slide

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

    View Slide

  35. リファレンスの活

    Welcart.com
    Reference
    https://www.welcart.com/documents/reference

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Welcart の新機能について

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. 環境と運用について

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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
    詳細はテキストに

    View Slide

  50. その他注意点

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide