購入者ログイン購入者ログイン2016年2月4日WordPressで会員制の素材サイトを作るためにやったこと中島たくみちWeb制作WordPress先日、会員制の動画素材サイト「ビデオガ」を公開しました。WordPressを使って構築しています。「WordPressで会員制サイトを作る」といった記事をよく見かけます。割りと簡単に会員制サイトを作れそうだと思っていました。実際にやってみて分かったのは、単にプラグインを使うだけじゃ足りない!ってことです。やることは色々ありました。いうわけで、忘れないうちにやったことを書き出しておきたいと思います。同じような会員制サイトを作ろうとしている方にとっては、ちょっとだけ参考になるかも。追記:「コンテンツ独自販売マニュアル」を公開しました。有料の会員制サイトや継続課金商品の作り方も紹介していますので、この記事と合わせて参考にしていただければと思います。作業に入る前に考えていたことは、だいたいこんな感じです。時間を短縮するためには出来あいのWordPressテーマを使って、そのまま使うのが一番です。言っても、動画素材サイトを作るためのWordPressテーマなんて、まず見つかりません。そこで、ポートフォリオ系のテーマに狙いを定めました。前述のとおりブログ機能も使いたいので、素材ページはポートフォリオとして、通常の投稿はブログ記事として管理していけばいいわけです。今回は、TCDさんの「PHOTEC」を使うことにしました。ポートフォリオの一覧表示が格好良かったのが決め手です。素材数が増えた時に、一気に見渡せるようにしておきたいので、グリッドレイアウトがいいなと考えていました。詳しくは後述しますが、ポートフォリオページの写真の部分に動画を表示できるようにカスタマイズしています。サーバーの選定ConoHaでWordPress用にサーバーを運用中なので、当面はそこに同居させることにしました。KUSANAGIを使っています。やばいくらい爆速です。その辺の話はまた別の機会に。WordPressのセットアップ&テーマのインストールKUSANAGIでは、SSHでログインしてコマンドをいくつか叩くとWordPressをセットアップできます。独自ドメインをとってDNSレコードも設定してあったので、すぐにWordPressが使えるようになりました。購入しておいたテーマファイルをアップロードして有効化します。「PHOTEC」はダッシュボードから配色の設定やロゴ画像のアップロードができるので、それもまとめて済ませておきます。ここから先が、会員制サイトを作るための作業です。Login」を使いました。日本語での情報量も多いので、定番プラグインっぽいです。Membership」を使おうとしていたのですが、フォーム周りのカスタマイズが思った通りにできなかったので挫折。Login」を使うことに決めました。設定はこうなりました。onlyこれで会員登録の時にユーザー名を設定する必要がなくなります。今回は、特にユーザー名をどこかで表示することもないので、メールアドレスとパスワードだけで登録&ログインできたほうが便利です。E-mailこれは、登録完了時に送られるメールの文面をカスタマイズするためのものです。チェックを入れると「E-mail」という設定項目が増えます。そこで文面を変更することができます。Passwordsパスワードをわすれた場合に、再設定できるようになります。メールが送られて、リンクをクリックすると再設定画面が表示されるという、よくある機能ですね。Redirectionログインした後などのリダイレクト先を設定できるようになります。ログイン後の飛び先を「Referer」にしました。すると、ログイン処理が終わったあとに、その直前に見ていたページに飛ぶわけですね。素材ページを見ていた人が「これをダウンロードしよう」と思ってログインした時に、トップページに飛ばされたりすると、かなり不親切です。なく、きちんと直前に見ていた素材ページに飛ばしてあげましょう。各種フォームのデザインの微調整デフォルトのままだと味気ないので、少しだけ調整しました。Login」だと、フォームのテンプレート(phpファイル)をテーマフォルダ内にコピーして編集するとそちらが使われるようになります。CSSが書ける人にとってはカスタマイズしやすいと思います。テンプレートファイルはプラグインフォルダの「theme-my-login/templates」の中に入っています。今回いじったのは、次の4つです。(会員登録フォーム)login-form.php(ログインフォーム)lostpassword-form.php(パスワード紛失時のメールアドレス入力フォーム)resetpass-form.php(パスワード再設定のフォーム)会員登録ページはこんな感じになりました。シンプルですが、まぁとりあえず...。動画素材のデータを入力するためにカスタムフィールドを設定しました。Fields」というプラグインを使うと、投稿画面に入力項目を増やすことができます。これだけだと表示されないので、テーマファイル内にphpのコードを埋め込む必要があります。Fields」の関数を使って、表示したい項目ごとに以下のように記述していきます。?>表形式で埋め込んで、こんな風になりました。先ほどのカスタムフィールドの設定で、プレビュー用の動画のYoutubeIDとダウンロード用のファイル名の項目も作りました。それを使って、素材ページに表示するようにします。「PHOTEC」はBootstrapで作られていたので、すぐにボタンが作れました。大きめにサイズ調整して、アイコンも追加してあります。ログインしているかどうかで表示を変える素材ページで、ログイン中のユーザーにはダウンロード用のボタンを表示します。ログインしていないユーザーには会員登録ボタンを表示します。そのためには、テーマファイル内にこんなphpのコードを埋め込むだけ。;同じように、ヘッダーにログイン時には「ログアウト」のボタンを、非ログイン時には「ユーザー登録」と「ログイン」のボタンを表示するようにしました。ツールバーを表示しないユーザーがログインした時に上部にWordPressのツールバーが表示されていたら格好悪いです。そこで、function.phpに以下のコードを追加します。'__return_false');}これで、管理者以外はツールバーが表示されなくなります。Login」の設定で、ログイン後は直前に見ていたページにリダイレクトするようにしています。何らかのタイミングでダッシュボードが表示されてしまうこともありそうでした。(例えば、パスワードをリセットした時など)そこで、以下のコードをfunction.phpに追加して、ユーザーがダッシュボードにアクセスした時は強制的にトップページにリダイレクトするようにしました。'__return_false');}もちろん、管理者はダッシュボードにアクセスできるようになっています。トランザクションメールをほぼ確実に届かせる会員制サイトでは、ユーザー登録完了やパスワードのリセットなどのタイミングでトランザクションメールがユーザーに送られます。これが届かないとトラブルのもとなので、外部のメール配信サービスを使って到達率を高めることにしました。今回使ったのは、「Mandrill」です。Mandrillのアカウントを登録したら、送信元として設定するメールアドレスのDKIMとSPFの設定を済ませます。ドメインのDNSレコードに追記が必要な作業です。「wpMandrill」をWordPressにインストールして、MandrillのAPIを設定します。これで、WordPressから送られるメールがすべてMandrill経由になります。Mandrill経由で送信されていて、SPFとDKIMもpassしていることが確認できました。ユーザーにメールマガジンを送れるようにするこれはすぐに必要というわけではないのですが、のちのちは新しい動画素材を追加した時などにユーザーにメールマガジンを送るつもりです。いうわけで、「MailChimp」の登録をしておきました。してMailChimpなのかというと、登録者2,000人までなら無料で使えるからというのもありますが、、、WordPressと連動できるからという理由のほうが大きいです。WordPress」をインストールして、Mandrillと同じようにAPIを入力したら、新規登録者がMailChimpのリストにも自動的に追加されるようになりました。SSLを導入するパスワードを扱うのにhttpで通信するのは、たぶんユーザーとしても怖いと思うので(僕だったら、そんな怪しいサイト使いたくないです)、httpsでアクセスできるようにしました。そのためにはまずSSLサーバー証明書を購入する必要があります。KingSSLで購入したのですが、1年分で900円で、申し込み後数分で発行されました。あとは、サーバーに証明書をおいて、nginxの設定ファイルに記述して再起動するとhttpsでアクセスできるようになりました。httpでのアクセスはすべてhttpsにリダイレクトされるように設定しました。最後にサイトの構築は半日ほどで終わるだろうと思ってはじめたのですが、結局、土日が完全に潰れました(笑WordPressで会員制サイトを作るのは簡単といえば簡単ですが、作業量はそこそこありますね。言っても、全くのゼロから作るよりは遥かに楽だと思いますが。コンテンツ販売やマーケティングのためのツールを開発しています。この記事が気に入ったらいいね!をクリックFacebookページで情報を発信しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。