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