ブログ資料ダウンロードBCPREST手引書BCPREST運用マニュアルお問合せホーム技術ブログWordPressで会員制サイトを作る方法(プラグイン無し・Stripe定額課金対応)2019/4/23Cocoonテーマカスタマイズ範囲内で作業します。コピペで作業できます。StripeのプラグインはDirectStripeを使用します。WordpressやStripe初心者の方にもなるべく分かりやすく説明します。今回どんなタイトルにするか迷いました。WordPressで会員制サイトを作る方法(コピペでOK)Cocoonでプラグインを使わずに会員制サイトを作る方法Stripe定期購読の会員制サイトを作る方法どれも正解です。作業に入りたい人は2章から読んでください。上記では触れていませんが、以下のような工夫があります。会員制サイトのプラグインは一切使用しません⇒サイトはそんなに重くなりません記事のカテゴリーで有料/無料を切り替えます⇒投稿一覧画面でまとめて簡単に有料/無料切り替えができますStripeの支払いを使います⇒支払い手順が簡単です。支払いまでの離脱を極力少なくします有料コンテンツは途中まで無料会員にも見せます。その内容にページの目次が含まれています⇒無料会員の興味を引き付け課金を促します【補足】有料設定するとGoogleにクロールされるのは無料会員版のコンテンツです。有料会員しか見えない部分はGoogleにもクロールされないことに注意してください。現状では以下のことはできません。定期支払いを複数パターン作る。表現を簡単にするのと、長い説明を省くためにWordpress周辺の用語はそのまま使用します。子テーマのfunctions.phpテーマ/子テーマのディレクト本投稿は、読者の方がこれらの意味が分かっている前提で執筆しています。SMTP」プラグインでメール送信ができるようになっていること一般の投稿は「h2」タグ(いわゆる大見出し)が二つ以上ある構成になっていることカテゴリーで、スラッグ「free」または「limited」のカテゴリーが追加できること。ページがあること(Webサイトで物を売る時に必要)その他の前提条件Stripeの会員になって本人確認が完了していることサイトがHTTPS化されていること。これが無いとStripeの本番環境が使えません以降の内容は読んでも読まなくてもどちらもOK作業したい人は2章へ外部的な検討内容usermetaに以下を追加します。Stripe定期購読のIDstripe_customerは、StripeのユーザーとWordpressのユーザーを関連付けるために持っておきます。stripe_subscriptionは定期購読のキャンセル処理で使います。会員ランクは以下とします。キャンセル今日の日付と、会員が終わる日を比較して、過ぎていたら会員ランクを0にします。あと、ランク3の人には自動更新が付きます。自動更新はキャンセル可能ですが、キャンセルした場合でも、期限が残っているうちはこれまで通り有料会員と同じように扱うのでランク9とします。Stripeでは支払いなどが発生するとWebhookで通知する機能があるので、それをサーバ側で受信します。無料機能で定期支払に対応しているのがこれしかないです。Insightsテストで-50くらいもっていかれます。30;「1.」だったら↑みたいな感じでトリガを毎日0時実行で定義しておけば、自動で期限切れチェックしてくれます。Serverでは使えなかったので却下です。AWSならこれでいけます。「2.」タイムラグが心配なので却下。仕方ないので「3.」直書きすることに。ページを読み込むたびにいちいちチェックします。送信メールシステムからは3種類のメールが送信されます。メールひな形はfunctions.phpに直書きしているので変更可能です。上記は「30日1000円プラン」の例ですが、「90日2400円(自動更新)」の場合でもほぼ同じ内容のメールが送信されます。自動更新の場合は、更新される度に上記のメールが送信されます。以下の順番で作業を進めます。「1.」から「5.」までが準備作業です。「6.」に進んだ段階で、「8.」が終わっていなくても有料/無料設定は適用されます。準備作業Stripeの商品登録まず商品を登録し、その後に料金プランを設定します。Stripeのダッシュボードを開き、テストモードにしてから、商品をクリックします。【補足】今はテストモードですが、後で本番モードにして全く同じ作業を行います。「新規」ボタンをクリックします。(画像では既に商品が登録されています。)「定期利用する商品」を選択し、商品名を[自サイト名]+有料コンテンツ(自動更新)とします。「完了」ボタンをクリックします。料金体系の無い商品が作成されます。料金体系の欄に「料金プランがありません」と表示されています。料金プランを追加します。ニックネームに「90日有効自動更新」と入力します。※「3か月」ではないことに注意。単価を入力し、請求間隔を「カスタム:90日」とします。請求間隔3カ月という内容もありますが、選ばないでください。サーバ側では常に90日という判定を使っています。3カ月だと合計が90日なのか91日なのか...合わなくなってしまいます。項目を入力したら「料金プランの追加」ボタンをクリックします。これで料金プラン付きの商品が追加できました。名称をクリックして詳細を表示します。料金プランをクリックします。この画面に表示されているIDをメモします。▲▲▲※1StripeのWebhook登録WebhookとはStripe側の処理結果を自サーバで受け取るための仕組みです。テストモードになっている事を確認して「開発者」→「Webhook」をクリックします。【補足】今はテストモードですが、後で本番モードにして全く同じ作業を行います。「エンドポイントを追加」をクリックします。endpoint」をクリックします。Sendは5つ選択します。各キーの値をメモしておきます。Webhook設定画面の下に表示されている「署名シークレット」です。次に「開発者」→「APIキー」とクリックした画面に表示されている「公開可能キー」と「シークレットキー」です。▲▲▲※4【補足】今はテストモードですが、後で本番モードにして全く同じ作業を行います。Stripeライブラリのアップロード以下のリンクにアクセスします。ZIP」をクリックします。ダウンロードしたファイルを解凍し、サーバーのCocoon子テーマのトップディレクトリにフォルダごとアップロードします。Serverの場合は、/■ドメイン名■/public_html/wp-content/themes/cocoon-child-masterです。Stripe関係の準備はここまでです。以下の固定ページを追加します。この画面が表示された場合は、お手数ですがサイト管理者までご連絡ください。[show_cancel_subscription99]「記述内容」欄に書かれている内容をそのまま※コピペしてください。有料会員ページは後で設定します。※ショートコードをここに書くと反映されてしまうので99を追加していまます。コピペは以下のように読み替えてください。Stripeプラグインのインストールと設定プラグインをインストールして有効にします。Stripeの項目が表示されます。セッティングをクリックします。SETTINGS」タブが表示されています。以下の設定を入れます。SETTINGS」タブをクリックします。これから支払いボタンを作成します。30日1000円プラン90日2400円(自動更新)プランまずは前者のボタンです。BUTTON」をクリックします。以下の設定を入れます。url・・・/payment-error続いて2個目のボタンです。BUTTON」をクリックします。以下の設定を入れます。Stripeの設定は以上です。Stripeプラグインをインストールすると、サイトが超絶重くなります。このプラグインの機能は支払いページでしか必要ないので、そこだけで使うように設定します。プラグインをインストールして有効にします。Filter」の項目が表示されます。それをクリックして設定画面を表示します。画面一番下の「フィルター登録」ボタンをクリックし、設定を保存します。図のようにPageの下にあるコンセントのアイコンをクリックします。画面一番下の「有効かプラグイン登録」ボタンをクリックし、設定を保存します。固定ページ「有料会員」を編集します。「有料会員になるにはどちらかのメニューを選択してください。button」ボタンをクリックします。Stripeで作成したボタン名称があります。Button」ボタンをクリックします。value=”ds-1553497072072′′]といった感じでショートコードが展開されます。一つのボタンも挿入し、ショートコードが二つ記述されている状態にします。必要であれば、以降に続けて、本文に有料会員の説明を記載します。固定ページ「有料会員」のカスタムCSSの欄に以下のコードをコピペします。Filter」プラグインの設定があります。「使用する」を選択しDesctop/Mobileそれぞれにチェックします。全て設定後「更新」ボタンをクリックし、固定ページ「有料会員」を保存します。今回の仕組みでは、有料/無料の判定をカテゴリーで行います。カテゴリー「有料」に属している投稿は有料コンテンツ。それ以外は全て無料カテゴリー「無料」に属している投稿は無料。それ以外は全て有料コンテンツ「1.」「2.」どちらかのパターンしかできません。「1.」の方法が良い人は、カテゴリー追加でスラッグ「limited」を追加します。【補足】この段階では、まだ記事に制限はかかりません。【補足】全ての作業が終了するまで、ひとまず一つの記事だけに有料/無料設定を適用すると良いです。先の選択で「1.」の人は、既存の記事、またはこれから作成する記事の中で、有料にしたいものをカテゴリー「limited」に含めます。カテゴリーは複数に所属しても問題ないので、既に別のカテゴリーが設定されている記事に関しては、複数のカテゴリーに含めるようにします。同様に、「2.」の人は無料にしたい記事をカテゴリー「free」に含めます。【補足】どちらの場合でも、この段階ではまだ記事に制限はかかりません。会員制サイトの処理をfunctions.phpに記述ここは後述のソースコードをコピペでOKです。自サーバのCocoon子テーマのfunctions.phpに会員制サイトの処理を追加します。これまでfunctions.phpを編集した事が無い人・・・自分のfunctions.phpを後述のソースコードで置き換えればOKfunctions.phpに既に処理が書いてある人・・・自分のfunctions.phpの末尾に後述のソースコードを追記functions.phpのソースコードは後述します。後述のソースコードの一部を自分の環境に合わせます。★★自サイトのドメイン名(https://は含めない)★★・・・自サイトのドメイン名を記述また、有料/無料設定の方式で、カテゴリー「有料」に属している投稿は有料コンテンツ。それ以外は全て無料カテゴリー「無料」に属している投稿は無料。「★★カテゴリー「無料」以外なら制限をかける」となっている行のPHPコメント化を解除し、「//★★カテゴリー「有料」なら制限をかける」となっている行をPHPコメント化します。「1.」で良い人はそのままです。今動作している子テーマのfunctions.phpをバックアップするさらにfunctions.phpをいつでも元の状態に戻せるようにしておきます。先に編集したfunctions.phpをサーバーにアップロードし、自サイトのTOPページ、いずれかの固定ページ、いずれかの投稿ページがこれまで通り表示されることを確認します。【補足】もし正しく表示されない場合は作業を中止して、バックアップしてあるfunctions.phpをリストアしてください。テスト、会員制サイトの動作確認まずはStripeの設定がテストモードの状態で会員制サイトの動作確認を行います。移行した後に、まったく同じテストを行います。有料コンテンツの表示確認WordPressをログアウトし、有料設定されている投稿を表示します。(無料以外有料設定の人は、無料以外の投稿を表示します)投稿が二つ目の大見出しより前(記事にh2タグが複数あるとして、2つめのh2タグ直前まで)まで表示されていて、それ以降は上記のように表示されていることを確認します。先のリンクの「会員登録」をクリックし会員登録画面を表示します。支払いボタンをクリックし、クレジットカードの入力画面を表示させます。以下の通りにテストデータを入力します。メールアドレス・・・任意。4242(Stripeのテスト番号)MM/YY・・・本日から1か月後CVC・・・111入力したメールアドレス宛にメールが届いています。そこに記載されている内容で自サイトにログインできることを確認します。ログイン後に有料コンテンツにアクセスし、内容が全て表示されていることを確認します。以下の二つのファイルの末尾に「show_login_menu();」と記述します。Serverの場合以下のファイルの事です。画面上部にログインメニュー↑が表示されていることを確認します。登録したユーザーでログインして期限が正しく表示されていることを確認します。他に以下のパターンを確認します。期限が過ぎた人が「期限切れ」になること自動更新の人は、期限が過ぎた後に自動で期限が延長(再課金)されること自動更新の人に「自動更新キャンセル」のリンクがあること自動更新をキャンセルした人は会員種別が「自動更新キャンセル」になって、それでも期限内は有料コンテンツが参照できること。自動更新キャンセルのメールが送信されていること。期限を切れた人が再び課金を行って、再び有料会員になれること。その後、有料コンテンツが参照できること。「支払い」をクリックします。課金した人のデータが表示されていることを確認します。※テスト課金の場合は、ここには表示されるのみで、実際の振り込みは一切行われません。本番環境へ変更(そして本番動作確認)Stripe本番商品の登録Stripeを本番環境にし、「準備作業-Stripeの商品登録」と全く同じ作業をします。Stripeの本番環境で、「準備作業-StripeのWebhook登録」と全く同じ作業をします。その後「準備作業-Stripe認証キーの取得」と全く同じ作業をします。mode」のスイッチをOFFにします。SETTINGS」画面で「st90day_auto」ボタン設定を表示します。以下の部分だけ設定変更します。以下の部分を本番環境用に合わせます。★★Stripeシークレットキー※3★★・・・先にメモしたStripe本番環境のシークレットキー※13★★Webhook署名シークレット※4★★・・・先にメモしたStripe本番環境のWebhook署名シークレット※13修正したらサーバーにアップロードします。本番課金テスト実際に存在するクレジットカードで先に記述した「テスト、会員制サイトの動作確認」と全く同じ作業を行います。「ログインメニューの設置」だけは、テスト/本番は関係ないので、もう作業しなくてよいです。