登録ログイン

WordPressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応)

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

Cocoonテーマカスタマイズ範囲内で作業します。主にコピペで作業できます。StripeのプラグインはDirectStripeを使用します。WordpressやStripe初心者の方にもなるべく分かりやすく説明します。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

今回どんなタイトルにするか迷いました。

  • WordPressで会員制サイトを作る方法(コピペでOK)
  • Cocoonでプラグインを使わずに会員制サイトを作る方法
  • Stripe定期購読の会員制サイトを作る方法

どれも正解です。

いきなり作業に入りたい人は2章から読んでください。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

ここでは途中までしか表示されていませんが、

WordPressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応)
Cocoonテーマカスタマイズ範囲内で作業します。主にコピペで作業できます。StripeのプラグインはDirectStripeを使用します。WordpressやStripe初心者の方にもなるべく分かりやすく説明します。
Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) - Qiita
Cocoonテーマカスタマイズ範囲内で作業します。主にコピペで作業できます。StripeのプラグインはDirectStripeを使用します。WordpressやStripe初心者の方にもなるべく分かりやすく説明します。 今回どんなタイ...

↑上記でFULLバージョンを公開しています。興味のある方はご覧ください。

 

会員制サイト概要

完成図

本サイトと同じものができます。

有料会員を始めます!(4/19追加内容あり)
今後は課金額が3万円溜まり次第、新着記事を書いていこうと思います。また、一部例外を除いて有料コンテンツを無料開放することは無いので、よろしくお願いします。
有料会員
今後は課金額が3万円溜まり次第、新着記事を書いていこうと思います。また、一部例外を除いて有料コンテンツを無料開放することは無いので、よろしくお願いします。

機能的には↑に書いてある通りです。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

会員制サイトの特徴

上記では触れていませんが、以下のような工夫があります。

  • 会員制サイトのプラグインは一切使用しません
  • ⇒サイトはそんなに重くなりません
  • 記事のカテゴリーで有料/無料を切り替えます
  • ⇒投稿一覧画面でまとめて簡単に有料/無料切り替えができます

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

  • Stripeの支払いを使います
  • ⇒支払い手順が簡単です。支払いまでの離脱を極力少なくします
  • 有料コンテンツは途中まで無料会員にも見せます。その内容にページの目次が含まれています
  • ⇒無料会員の興味を引き付け課金を促します

【補足】有料設定するとGoogleにクロールされるのは無料会員版のコンテンツです。有料会員しか見えない部分はGoogleにもクロールされないことに注意してください。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

現状では以下のことはできません。

  • 定期支払いを複数パターン作る。現状は1パターンのみ
  • 固定ページにも制限をかける
  • WeChatPay、Alipay(支付宝)での支払い

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

前提知識

本投稿では、

表現を簡単にするのと、長い説明を省くためにWordpress周辺の用語はそのまま使用します。

  • 固定ページを追加
  • プラグインの追加
  • 子テーマのfunctions.php
  • テーマ/子テーマのディレクト

本投稿は、読者の方がこれらの意味が分かっている前提で執筆しています。(その都度、調べて進むのは問題ないです)

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

WordPressの条件

  • WordPressテーマで「Cocoon」を使っていること
  • ⇒Cocoonでなくても可能ですが多くの手直しが必要です
  • 他の会員制サイトプラグインが導入されていないこと

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

  • 「Theme my logon」プラグインが導入されていないこと
  • ⇒共存は可能ですが、ソースコードのURL参照箇所を手直しする必要があります
  • 「WP Mail SMTP」プラグインでメール送信ができるようになっていること

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

  • 一般の投稿は「h2」タグ(いわゆる大見出し)が二つ以上ある構成になっていること
  • カテゴリーで、スラッグ「free」または「limited」のカテゴリーが追加できること。それを元に有料/無料の区別します。
  • 「特定商取引法」のページがあること(Webサイトで物を売る時に必要)

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

その他の前提条件

  • Stripeの会員になって本人確認が完了していること
  • サイトがHTTPS化されていること。これが無いとStripeの本番環境が使えません
以降の内容は

読んでも読まなくてもどちらもOK

作業したい人は2章へ

外部的な検討内容

usermetaに以下を追加します。

メタデータ名 意味
member_rank 会員ランク(後述)
member_start_timestamp 会員になった日
member_end_timestamp 会員が終わる日
stripe_customer Stripe側のユーザー名(customer)
stripe_subscription Stripe定期購読のID

stripe_customerは、StripeのユーザーとWordpressのユーザーを関連付けるために持っておきます。stripe_subscriptionは定期購読のキャンセル処理で使います。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

会員ランクは以下とします。

会員ランク 意味
0 期限切れ
2 30日会員
3 90日会員(自動更新)
9 キャンセル

今日の日付と、会員が終わる日を比較して、過ぎていたら会員ランクを0にします。

あと、ランク3の人には自動更新が付きます。自動更新はキャンセル可能ですが、キャンセルした場合でも、期限が残っているうちはこれまで通り有料会員と同じように扱うのでランク9とします。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

Stripeでは支払いなどが発生するとWebhookで通知する機能があるので、それをサーバ側で受信します。

Stripeイベント きっかけ サーバーの処理概要
customer.created 初めて会員になった WordPressのユーザーを作る
customer.subscription.created 定期購読の申し込みがあった 誰が申し込んだのかを覚える
invoice.payment_succeeded 定期購読の支払いが完了した 会員ランク3をセットする
charge.succeeded 普通に支払われた 会員ランク2をセットする
customer.subscription.deleted 定期購読がキャンセルされた 会員ランク9をセットする

プログラムの検討内容

◆◆何を使って有料/無料を識別するか

  1. カテゴリー
  2. 記事に新しくメタデータを追加

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

⇒記事の一覧画面で↑みたいな感じで有料/無料を切り替えたいので「1.」カテゴリー案を採用

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

◆◆いつ有料会員のフラグを設定するか

  1. 支払いボタンが押された時
  2. StripeからのWebhook(invoice.payment_succeededまたはcharge.succeeded)を受信した時

⇒Stripe側で支払いが認識されて初めて課金されたと言えるので「2.」採用

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

◆◆Stripeの支払いを何プラグインでやるか

  1. Direct Stripe
  2. Stripe Payments
  3. Stripe Payments for WordPress – WP Simple Pay

「1.Direct Stripe」採用。無料機能で定期支払に対応しているのがこれしかないです。重いのが難点。環境にもよるけどPageSpeed Insightsテストで-50くらいもっていかれます。後述で対処します。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

◆◆会員期限切れの確認をどうやるか

  1. My SQL DBにトリガを定義(定時実行)
  2. WP-Cron(定時実行)
  3. 直書き(即時実行)

CREATE EVENT e_vip_return_03 ON SCHEDULE EVERY 86400 SECOND DO update $users set mrank = 0 where mrank = 3 and datediff(current_timestamp,vip_registered ) > 30;

「1.」だったら↑みたいな感じでトリガを毎日0時実行で定義しておけば、自動で期限切れチェックしてくれます。X Serverでは使えなかったので却下です。AWSならこれでいけます。

「2.」タイムラグが心配なので却下。仕方ないので「3.」直書きすることに。ページを読み込むたびにいちいちチェックします。

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

送信メール

システムからは3種類のメールが送信されます。メールひな形はfunctions.phpに直書きしているので変更可能です。

◆最初にお金を払った時(ユーザ登録完了)

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

◆支払い完了

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

上記は「30日1000円プラン」の例ですが、「90日2400円(自動更新)」の場合でもほぼ同じ内容のメールが送信されます。

自動更新の場合は、更新される度に上記のメールが送信されます。

◆自動更新キャンセル

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

Wordpressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応) 参考画像

続きを読むには会員登録が必要です。
タイトルとURLをコピーしました