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

1. WordPress x PayPalで
カンタンに決済機能付きECサイトを建ててみよう！
（WooCommerceによる決済）
PPUG #5

2. 自己紹介
中村 圭介
株式会社カジヤ
・Webサイトの制作／コンサルティング
・越境ECサイトの運営

3. ・WordPressについて
・WooCommerceについて
・デモとハンズオン
お話する内容

4. WordPressとは？

5. WordPressとは？
WordPress(ワードプレス)とは、もともとブログを作成するために開発
されたオープンソースのCMSです。何度もバージョンアップを重ねた
WordPressは単なるブログソフトとしてだけでなく、CMSとして利用
されるようになりました。テーマでデザインを簡単に着せ替えられ、プラ
グインで必要な機能を簡単に追加できます。
世界で利用されているCMSの60%のシェアを持っています

6. WooCommerceとは？

7. WordPressにEC機能を追加してくれるWordPressのプラグインです。
発送を伴うような物販から、データの販売など様々なものを販売できます。
世界で多くのショップオーナーや開発者から支持されている人気のある
ECシステムです。
WooCommerceを機能拡張するWordPress プラグインも多数あり、
世界の42%のオンラインショップがWooCommerce を採用されています
WooCommerceとは？

8. PayPal
200+の国と地域
100の通貨での決済
25の口座に対応
WordPress
世界で利用されているCMSの
60%のシェアを持っている
WooCommerce
世界で利用されているECサイトの
42%のシェアを持っている

9. PayPal
200+の国と地域
100の通貨での決済
25の口座に対応
WordPress
世界で利用されているCMSの
60%のシェアを持っている
WooCommerce
世界で利用されているECサイトの
42%のシェアを持っている
この３つでECサイト作るのはめっちゃグローバルスタンダード

10. 実際にやってみましょう！

11. ハンズオンでやる内容
① WooCommerce for Japanese インストール
② WooCommerce インストール ＆ 初期設定
③ PayPal設定の有効化
④ WooCommerce 対応テーマ(Storefront)ダウンロード
⑤ 商品の追加
⑥ 購入テスト
前提として、ローカル環境にWordPressをインストールした
段階からのスタートになります。

12. ① WooCommerce for Japanese インストール
プラグインの追加をしますので、
「プラグイン＞新規追加」をクリック
WooCommerce for Japaneseは、
日本向けに入力フォームの並び替えや、
読み仮名の入力欄を追加してくれるプラグインです

13. WooCommerce for Japaneseで検索
有効化をクリック
① WooCommerce for Japanese インストール

14. WooCommerce で検索
有効化をクリック
② WooCommerce インストール ＆ 初期設定

15. 必要な情報を入力して次へ
② WooCommerce インストール ＆ 初期設定

16. WooCommerceで実装できるPayPal決済には
Express CheckoutとStandard の２種類がある
のですが、今回は Standard を使います。
この項目は Express Checkout なので
チェックを外します。
② WooCommerce インストール ＆ 初期設定

17. 送料の設定です
ハンズオンでは「全て無料」にします
お好みで大丈夫です
以降の「特別」「有効化」の設定は
スキップしてください
② WooCommerce インストール ＆ 初期設定

18. ③ PayPal設定の有効化
PayPal Standard の設定を行います
「WooCommerce＞設定」

19. ③ PayPal設定の有効化
「購入手続き＞PayPal」をクリックしてください

20. https://developer.paypal.com/developer/accounts/
③ PayPal設定の有効化
PayPal Developer からサンドボックスの
アカウント情報を取得します。

21. ③ PayPal設定の有効化
下記にチェックします
☑ PayPal Standard を有効化
☑ PayPal サンドボックスを有効化
APIユーザー名 / APIパスワード / API署（signature)
を入力し、「変更を保存」します

22. ④WooCommerce 対応テーマ(Storefront)ダウンロード
テーマ、Storefront のインストール
「外観 ＞ テーマ」をクリック

23. ④WooCommerce 対応テーマ(Storefront)ダウンロード

24. ④WooCommerce 対応テーマ(Storefront)ダウンロード
Storefront で検索
インストールし、有効化します

25. ④WooCommerce 対応テーマ(Storefront)ダウンロード
Storefront では、カンタンにEコマースのサイトを
立ち上げられるように、プリセットのテーマ設定と
サンプル商品を追加することができます

26. ④WooCommerce 対応テーマ(Storefront)ダウンロード
「公開」を押して設定を保存します

27. ④WooCommerce 対応テーマ(Storefront)ダウンロード
サンプル商品が自動で追加されています

28. ⑥購入テスト

29. ⑥購入テスト

30. サンドボックスモードなのを確認の上、
PayPal Developer からバイヤーアカウントでログイン
https://developer.paypal.com/developer/accounts/
⑥購入テスト

31. これで注文が完了になります
ショッピングサイトに戻ると注文受付画面に戻ります
⑥購入テスト

32. ⑥購入テスト

33. まとめ
ECサイトを実際にオープンする場合は、特商法の表記や
メール設定、PCIDSSへの配慮であったりなどが必要ですが
それでもかなり手軽にECサイトを作れる時代
PayPalやWooCommerceも、今後はぜひ選択肢にどうぞ