Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/7/17)
Search
Welcart
July 17, 2020
Business
0
180
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/7/17)
Welcart セミナー 2020/7/17
開催日:2020年7月17日(金)13:30〜15:30
Welcart
July 17, 2020
Tweet
Share
More Decks by Welcart
See All by Welcart
オンライン勉強会接続時のZoom設定方法
welcart
0
47
Welcart が実現するWordPress ECの世界(Welcart セミナー 2020/12/9)
welcart
1
110
Welcart が実現するWordPress ECの世界(Welcart セミナー 2020/11/12)
welcart
0
89
Welcart が実現するWordPress ECの世界(Welcart セミナー 2020/10/16)
welcart
0
69
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/7/3)
welcart
0
160
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/6/19)
welcart
0
120
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/6/5)
welcart
0
110
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/5/22)
welcart
0
64
ECサイト構築と運用のノウハウ(Welcart セミナー 2020/4/24)
welcart
0
69
Other Decks in Business
See All in Business
Enito_with_Omiai_company_info
enito
PRO
0
27k
ブレインパッドXaaSユニット紹介資料(キャリア採用向けweb公開版 )
brainpadpr
0
14k
Theoria technologies:About Us
theoriatec2024
1
900
El Mercado cuartohorario de electricidad
neuroenergia
PRO
0
140
伝わる「壁面グラフィック」の構成方法/展示会ブースの壁面デザイン手法
superpenguin
PRO
0
130
ポートフォリオEC「ENRAI」_概要資料
booklista_nakaya
1
920
LINEヤフー新卒採用 プロダクトプランナー職種説明資料
lycorp_recruit_jp
0
1.6k
Cobe Associe: Who we are? /コンサル・市場調査・人材紹介のCobe Associe
nozomi
6
18k
VISASQ: ABOUT US
eikohashiba
15
460k
新卒エンジニア向け dely会社説明資料 / New Grad Engineers
delyinc
0
710
LINEヤフー新卒採用 ビジネスコンサルタント職種説明資料
lycorp_recruit_jp
0
1.5k
GLP_SustainabilityReport_2023
glp_jp
1
370
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
The Language of Interfaces
destraynor
154
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Why Our Code Smells
bkeepers
PRO
334
57k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What's in a price? How to price your products and services
michaelherold
243
12k
Transcript
None
画面共有をかけているため、 Zoomの画面が全画面表示になっております。 そのため、タスクバーや別ウィンドウの表示がされない場合がございます。 その際は、下図を参考に全画面表示の終了を行ってください。 次に、参加者スペースとチャットスペースを開いて下さい。
①チャット セミナー中に疑問や質問がございましたら、チャットスペースにてメッ セージをお願いいたします。 ②テキストの表示 事前送付のセミナーテキストを同時に見られるようにしておいていた だけるとより分かりやすいです。 セミナー中には以下のアクションを行うことができます。
Welcart セミナー 2020 「ECサイト構築と運用のノウハウ」 コルネ株式会社
テーマについて
テーマ制作の3つの手法 完全オリジナル 既製のテーマにWelcartの機能を追加 Welcart専用テーマをカスタマイズする
完全オリジナル レイアウト・デザインを設計し、全てのテンプレートを自前で制作 機能設計が自由 テンプレート構造の把 握が必要 クライアントの要求に 対応しやすい → 難易度高め →
Welcart 専用テーマ以外の既製のテーマに組み込み 既製のテーマ 既に公開しているコーポレートサイトでも EC機能を導入可能 既製のテーマ利用のため予算が安め 不具合の特定が難しい 制作費を安くあげるため に、Welcart とは関係の
ない既製のテーマを使うと いう考えは危険!
コルネ社が制作した Welcart 専用テーマを利用 Welcart 専用テーマ テーマカスタマイザーの知識が必要な 場合がある 全ての Welcart 拡張プラグインが
利用可能
効率の良いテーマの制作とは
子テーマの製作工数は親テーマ次第 テーマ制作コスト = 子テーマ制作工数 テーマ制作の基本:親テーマを決めて子テーマ展開 メンテナンス上、 親テーマの上書きアップグレードが必須
100%オリジナルのテーマも子テーマ展開する必要があるのか? 子テーマ展開にする場合 ◉ 共通部分をフレームワーク感覚で親テーマにすれば、 最小の工数で的確な修正が可能になる 100%オリジナルテーマの場合 ◉ 不具合が起こってもアップグレードは出来ない為、 多く
のテーマを制作していた場合、修正作業は 大変な負担になる
テーマ制作における SEO と UX
SEO のポイント 質の高いコンテンツ 信頼性、独自性、専門性、キーワード 表示スピード クローラビリティ
質の高いコンテンツをサポート ◉テーマ制作としての役割 ユーザーやライターが作った コンテンツを正しいHTML構造で、 かつ、有効性を100%引き出し、 テンプレートを作る
表示スピード CSS や JavaScript に注意! 重要!! ファーストビューのスピードを損なわない 無駄な CSS のオーバーライド
クオリティーの低いプラグインの使用
UXのポイント 見た目のインパクトと分かり易さ 操作性 表示スピード ユーザビリティ
Welcart 専用テーマとは
Welcart専用テーマの特徴 Welcart専用テンプレート
拡張プラグイン対応 ① 専用テンプレートが必要な拡張プラグイン 別途テンプレートタグ設置・レイアウト修正の必要があるプラグイン ★ WCEX DL Seller ★ WCEX SKU
Select ★ WCEX Auto Delivery ★ WCEX Multiple Shipping ★ WCEX Coupon ★ WCEX Widget Cart ダウンロードコンテンツ&サービス販売 バリエーション表示切替 定期購入サポート 複数配送先設定 クーポン発行ツール どこでもカートウィジェット (2020/02時点)
拡張プラグイン対応 ② 他社製 Welcart 専用テーマ(対応テーマ) 拡張プラグインの対応 ↑ WCEX Auto Delivery、WCEX Multiple
Shipping、WCEX Coupon等未対応
テーマの可能性 ◉ コーポレートサイト組み込み トップがコーポレートサイトでショップページにリンクしている ◉ カタログサイトへの応用 カート投稿ボタンを削除
テーマを作ってみる 1 親テーマに Welcart Basic を使用する理由 2 子テーマの作り方 3 親テーマの継承方法 4 スタイルシートの種類と役割 5 テンプレート構造 6 JavaScriptの注意点(ありがちな失敗)
子テーマの作り方 CSS PP 最低限必要なファイルは次の通り。 • style.css • functions.php functions.php
親テーマの継承方法
テーマを作ってみる 1 親テーマに Welcart Basic を使用する理由 2 子テーマの作り方 3 親テーマの継承方法 4 スタイルシートの種類と役割 5 テンプレート構造 6 JavaScriptの注意点(ありがちな失敗)
JavaScriptの注意点① 1. header.php(footer.php) テンプレートに、jsファイル読み込み 用の script タグを直接書かない。 2. jQuery は、WordPress
にバンドルされている バージョンを使用する。 3. 3系を使ってしまったときの応急処置として jquery-migrate-3.0.1.min.js を読み込む。
JavaScriptの注意点② •ページを限定して読み込む。 条件分岐タグ(WordPress Codex)
JavaScriptの注意点③ •ブラウザの検証機能を使って、JavaScript のエラーが出ていないかを チェックする
ありがちな失敗 1. header.php には wp_head()、footer.php には wp_footer() 関数を忘れない
2. ファイルの最後に無駄な改行を置かない ⇒?> がある場合、それ以降に改行を2つ以上置かない 3. ファイルは UTF8(BOMなし)で保存する 4. エラーの見逃し PHP のエラーが出ていないかを確認するために、 デバッグモードにする
カスタマイズについて
カスタマイズの仕方
アップグレード可能なカスタマイズ① やってはいけない金メッキカスタマイズ Welcart本体を改変カスタマイズ アップグレードの更新通知を無くす アップグレードでメッキが剥がれる
アップグレード可能なカスタマイズ② 正しいカスタマイズ法は フックAPIを使用
リファレンスの活 用 Welcart.com Reference https://www.welcart.com/documents/reference
アクションフックのタイミング テーマのカスタマイズから usces_construct のフックには掛けられない。 Welcart に働きかけるのは init (優先順位20)以降でないといけない。 フロントと管理画面の共通フックを使用するときは、どちらで実行するか条件分岐を 忘れない。
is_single() などの条件判断関数は parse_query から有効となるので、カスタマイ ズで利用する場合はそのタイミングより遅いフックを使用する必要がある。 リダイレクト処理を行う場合は wp_head よりも速いタイミングでないといけない。 コンバージョンタグを埋める際、 wp_print_footer_scripts では 購入情報はクリアさ れてしまっている。
カスタマイズの設置方法 ◉ プラグインとして開発 ◉ テーマにカスタマイズを設置
メンテナンスを考えたファイル構成 見通しの良い構成 ◉ カスタマイズファイルを作成 ◉ フォルダにまとめる ◉ 読み込みは「_loader.php」 ◉ functions.php
に追加するのは1行のみ
カスタマイズの実例 ◉ セキュリティーに留意する ◉ アフィリエイトタグの挿入 ◉ カートページで「あと◦円で送料無料」のメッセージを表示する ◉ フリガナを必須入力にする ◉
「カートへ入れる」ボタンを固定ページで使う ◉ gettext を使ったラベルの書き換え 詳細はテキストに て
Welcart の新機能について
会員登録メルアド認証機能 バージョン1.9.23 以降で搭載 会員新規登録 ⇒ 認証メール送信 ⇒ メール内リンクをクリック ⇒ 本登録完了
会員データ共有機能 バージョン1.9.26以降で搭載 データベース サイトB 会員情報 サイトA 会員情報 お客さん ログイン可能
拡張プラグインの自動更新通知機能 バージョン1.9.30以降で搭載
環境と運用について
サーバー選びのポイント 推奨サーバー WelHost、CPI、XServerビジネス 推奨以外で実績の多いサーバー XServer、さくらサーバー 非推奨のサーバー お名前.com、ロリポップ(クレジット決済ができない)
ショップによって異なるサーバースペック 専用サーバーにすべきショップの目安 ◉ 新規立ち上げのショップ 商品点数(SKU数)> 5000点 ◉ Welcart に乗り換えの場合
アクセス数(GoogleAnalyticsでいうPV数)> 月間10万
サーバーのセッティング 必要に応じてphp.ini の編集が必要 PHPの実行時間の制限 ⇒ max_execution_time SKU数の制限 ⇒ max_input_vars メモリーの消費制限 ⇒ memory_limit
保守の必要性 ◉ ショップ運営者への周知が必要 ・WordPressの運用ではメンテナンスが必須 ープラグインアップデート・サーバ・SSL・バックアップ etc ◉ 保守を積極的に請け負うべき ◉ WelHostの利用
他のプラグインとの連携 推奨プラグイン 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 詳細はテキストに て
その他注意点
メールの送信について スパム認定の原因 ◉ サイトのドメインと送信元のメールアドレスのドメインが異なる ◉ SPFレコードが適切に設定されていない ◉ 送信先と送信元のアドレスが同じ
利用制限について ◉ 利用できない環境 ・マルチサイト ・多言語化 ◉ 運用制限 ・カートページとメンバーページの削除・スラッグ変更不可
開発状況の確認 ◉ Mantisの公開情報を確認 ◉ Welcart本体/拡張プラグインの開発状況 ◉ 不具合の対応状況 ◉ フロントのレスポンスが悪くなる 原因とその対策
Welcart セミナー 2020 スライド ECサイト構築と運用のノウハウ → https://bit.ly/2CiqAS4 コルネ株式会社