Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

180315 ppug

82 vues

Publié le

WordPress x PayPalで カンタンに決済機能付きECサイトを建ててみよう! (WooCommerceによる決済)

Publié dans : Ingénierie
  • Soyez le premier à commenter

180315 ppug

  1. 1. WordPress x PayPalで カンタンに決済機能付きECサイトを建ててみよう! (WooCommerceによる決済) PPUG #5
  2. 2. 自己紹介 中村 圭介 株式会社カジヤ ・Webサイトの制作/コンサルティング ・越境ECサイトの運営
  3. 3. ・WordPressについて ・WooCommerceについて ・デモとハンズオン お話する内容
  4. 4. WordPressとは?
  5. 5. WordPressとは? WordPress(ワードプレス)とは、もともとブログを作成するために開発 されたオープンソースのCMSです。何度もバージョンアップを重ねた WordPressは単なるブログソフトとしてだけでなく、CMSとして利用 されるようになりました。テーマでデザインを簡単に着せ替えられ、プラ グインで必要な機能を簡単に追加できます。 世界で利用されているCMSの60%のシェアを持っています
  6. 6. WooCommerceとは?
  7. 7. WordPressにEC機能を追加してくれるWordPressのプラグインです。 発送を伴うような物販から、データの販売など様々なものを販売できます。 世界で多くのショップオーナーや開発者から支持されている人気のある ECシステムです。 WooCommerceを機能拡張するWordPress プラグインも多数あり、 世界の42%のオンラインショップがWooCommerce を採用されています WooCommerceとは?
  8. 8. PayPal 200+の国と地域 100の通貨での決済 25の口座に対応 WordPress 世界で利用されているCMSの 60%のシェアを持っている WooCommerce 世界で利用されているECサイトの 42%のシェアを持っている
  9. 9. PayPal 200+の国と地域 100の通貨での決済 25の口座に対応 WordPress 世界で利用されているCMSの 60%のシェアを持っている WooCommerce 世界で利用されているECサイトの 42%のシェアを持っている この3つでECサイト作るのはめっちゃグローバルスタンダード
  10. 10. 実際にやってみましょう!
  11. 11. ハンズオンでやる内容 ① WooCommerce for Japanese インストール ② WooCommerce インストール & 初期設定 ③ PayPal設定の有効化 ④ WooCommerce 対応テーマ(Storefront)ダウンロード ⑤ 商品の追加 ⑥ 購入テスト 前提として、ローカル環境にWordPressをインストールした 段階からのスタートになります。
  12. 12. ① WooCommerce for Japanese インストール プラグインの追加をしますので、 「プラグイン>新規追加」をクリック WooCommerce for Japaneseは、 日本向けに入力フォームの並び替えや、 読み仮名の入力欄を追加してくれるプラグインです
  13. 13. WooCommerce for Japaneseで検索 有効化をクリック ① WooCommerce for Japanese インストール
  14. 14. WooCommerce で検索 有効化をクリック ② WooCommerce インストール & 初期設定
  15. 15. 必要な情報を入力して次へ ② WooCommerce インストール & 初期設定
  16. 16. WooCommerceで実装できるPayPal決済には Express CheckoutとStandard の2種類がある のですが、今回は Standard を使います。 この項目は Express Checkout なので チェックを外します。 ② WooCommerce インストール & 初期設定
  17. 17. 送料の設定です ハンズオンでは「全て無料」にします お好みで大丈夫です 以降の「特別」「有効化」の設定は スキップしてください ② WooCommerce インストール & 初期設定
  18. 18. ③ PayPal設定の有効化 PayPal Standard の設定を行います 「WooCommerce>設定」
  19. 19. ③ PayPal設定の有効化 「購入手続き>PayPal」をクリックしてください
  20. 20. https://developer.paypal.com/developer/accounts/ ③ PayPal設定の有効化 PayPal Developer からサンドボックスの アカウント情報を取得します。
  21. 21. ③ PayPal設定の有効化 下記にチェックします ☑ PayPal Standard を有効化 ☑ PayPal サンドボックスを有効化 APIユーザー名 / APIパスワード / API署(signature) を入力し、「変更を保存」します
  22. 22. ④WooCommerce 対応テーマ(Storefront)ダウンロード テーマ、Storefront のインストール 「外観 > テーマ」をクリック
  23. 23. ④WooCommerce 対応テーマ(Storefront)ダウンロード
  24. 24. ④WooCommerce 対応テーマ(Storefront)ダウンロード Storefront で検索 インストールし、有効化します
  25. 25. ④WooCommerce 対応テーマ(Storefront)ダウンロード Storefront では、カンタンにEコマースのサイトを 立ち上げられるように、プリセットのテーマ設定と サンプル商品を追加することができます
  26. 26. ④WooCommerce 対応テーマ(Storefront)ダウンロード 「公開」を押して設定を保存します
  27. 27. ④WooCommerce 対応テーマ(Storefront)ダウンロード サンプル商品が自動で追加されています
  28. 28. ⑥購入テスト
  29. 29. ⑥購入テスト
  30. 30. サンドボックスモードなのを確認の上、 PayPal Developer からバイヤーアカウントでログイン https://developer.paypal.com/developer/accounts/ ⑥購入テスト
  31. 31. これで注文が完了になります ショッピングサイトに戻ると注文受付画面に戻ります ⑥購入テスト
  32. 32. ⑥購入テスト
  33. 33. まとめ ECサイトを実際にオープンする場合は、特商法の表記や メール設定、PCIDSSへの配慮であったりなどが必要ですが それでもかなり手軽にECサイトを作れる時代 PayPalやWooCommerceも、今後はぜひ選択肢にどうぞ

×